Question

这是我第一次开发Chrome扩展程序，说实话，我甚至不确定这是否是正确的设计模式。

我的Chrome扩展程序在工具栏中有一个按钮。单击该按钮后，我想直接将iframe切换到活动网页。

我得到的部分没有问题：

的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': ''});
}

我只是看看iframe是否存在，以及我是否插入iframe。

我真正需要做的是从活动或当前标签/页面中取出图像，然后将它们注入iframe。

有没有办法做到这一点，还是有更好的模式？

Answer 1

您在文档中创建了新的iframe。

它的来源是chrome-extension://...，因此它应该可以完全访问Chrome API。

您可以使用该框架脚本中的Messaging来联系您的内容脚本并请求数据。

唯一棘手的问题是传递正确的标签ID，但您可以通过passing it to the content script first进行操作，然后在网址中创建一个标签ID作为参数的框架。

如何将数据从注入的内容脚本传递到iframe？

1 个答案: