Content script for iframe inside extension popup or background script

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.

More Related Contents:

Leave a Comment Cancel reply