Content script for iframe inside extension popup or background script

Question

Welcome To Ask or Share your Answers For Others

Content script for iframe inside extension popup or background script

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

Content script for iframe inside extension popup or background script

I am trying to interact with an iframe located in a chrome-extension popup. I know content.js can be injected in all frame using the manifest.json but it's working with frame inside a webpage and not inside the extension's popup.

Is it doable ? I tried many things but I didn't find a solution yet.

my manifest :

{
"name" :"test",
"version": "1.0",
"manifest_version": 2,
"description" :"Scraping Facebook",
"permissions": [
  "cookies",
  "background",
  "tabs",
  "http://*/*",
  "https://*/*",
  "storage",
  "unlimitedStorage"
],
"icons": { "128": "images/pint.png" },
"content_scripts": [
  {
    "matches": [
      "http://*/*",
      "https://*/*"
    ],
    "js": ["jquery-3.1.0.min.js","content.js"],
    "run_at":"document_end"
  }
],
"web_accessible_resources": [
    "http://*/*",
    "https://*/*",
    "styles/*",
    "fonts/*"
],
"background": {
    "scripts": ["background.js"]
  },
"browser_action" :
    {
        "default_popup": "popup.html",
        "default_title": "test"
    }
}

Question&Answers:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-16T22:26:19+0000

Use "all_frames": true in your content script declaration to inject it into an iframe:

"content_scripts": [{
    "matches": [ "http://example.com/*" ],
    "js": [ "content.js" ],
    "all_frames": true
}],

To differentiate this iframe from normal tabs you can add a dummy parameter to the URL when you create the iframe e.g. http://example.com/?foo so you can match it in manifest.json like "http://example.com/*foo*" for example.

Then you can use messaging: the content script initiates it, and the extension script registers a listener.

Trivial one-time sendMessage:

content.js:

chrome.runtime.sendMessage('test', response => {
  console.log(response);
});

popup.js (or background.js and so on):

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  console.log('popup got', msg, 'from', sender);
  sendResponse('response');
});

Long-lived port:

content.js:

let port = chrome.runtime.connect({name: 'test'});
port.onMessage.addListener((msg, port) => {
  console.log(msg);
});
port.postMessage('from-iframe');

popup.js (or background.js and so on):

let iframePort; // in case you want to alter its behavior later in another function
chrome.runtime.onConnect.addListener(port => {
  iframePort = port;
  port.onMessage.addListener((msg, port) => {
    console.log(msg);
  });
  port.postMessage('from-popup');
});

An example of popup.html is really straightforward:

<html>
  <body>
    <iframe width="500" height="500" src="http://example.com"></iframe>
    <script src="popup.js"></script>
  </body>
</html>

Of course you can also add the iframe(s) programmatically using DOM manipulation.

Categories

Content script for iframe inside extension popup or background script

Content script for iframe inside extension popup or background script

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags