How can I pass data from an injected content script to an iframe?

Question

It's my first time developing a chrome extension, and to be honest, I'm not even sure if this is the right design pattern.

My Chrome extension has a button up in the toolbar. When that button is clicked, I want to toggle an iframe directly into the active webpage.

I got that part working no problem:

manifest.json

{
  "manifest_version":         2,
  "description":              "Inject a complete, premade web page",
  "name":                     "Inject whole web page",
  "version":                  "1",
  "web_accessible_resources": ["html/price-snipe-iframe.html"],
  "permissions": [
    "tabs", "http://*/*", "https://*/*"
  ],
  "background": {
    "scripts": ["js/lib/jquery.min.js", "background.js"]
  },
  "browser_action": {
    "default_icon": {
      "19": "icons/action19x19.png",
      "38": "icons/action38x38.png"
    },
    "default_title": "Price Sniper"
  }
}

background.js

chrome.browserAction.onClicked.addListener(function(tab) {

  chrome.tabs.insertCSS(null, {
    file: "css/global.css"
  });
  chrome.tabs.executeScript(tab.id, { file: "js/lib/jquery.min.js" });
  chrome.tabs.executeScript(tab.id, { file: "iframe-injector.js" });

});

iframe-injector.js

var snipeBar = $('#price-snipe-bar');

if (! $('#price-snipe-bar').length) {
  var iFrame  = document.createElement("iframe");
  iFrame.src  = chrome.extension.getURL("html/price-snipe-iframe.html");
  iFrame.id = "price-snipe-bar";
  iFrame.innerHTML = "<h1>GOT IT?</h1>"

  document.body.insertBefore(iFrame, document.body.firstChild);

  $('body').css({ 'margin-top': '43px'});
} else {
  $('#price-snipe-bar').remove();
  $('body').css({ 'margin-top': ''});
}

Here I'm simply seeing if the iframe exists, and if doesn't I'm inserting it.

The thing I really need to do here is get the images off of the active or current tab/page, and inject them into the iframe.

Is there a way to do this, or is there a better pattern for this?

score 0 · Answer 1 · edited May 23 '17 at 12:28

You create a new iframe in the document.

Its origin is chrome-extension://..., so it should have full access to the Chrome API.

You can use Messaging from that frame's scripts to contact your content script and request data.

The only tricky thing is to pass along the right tab ID, but you can do it by passing it to the content script first and then creating a frame with tab ID as parameter in the URL.

How can I pass data from an injected content script to an iframe?

1 Answers1