1

我正在创建一个 chrome 扩展，它需要打开一个空白页面，然后根据一些注入的脚本在这个空白窗口中打开 1/2 iframe。

我的问题是如何打开一个可以注入和运行 JS 的空白窗口？

我通过打开一个带有 url 的页面来尝试此操作，about:blank但由于以下错误，我无法将脚本注入此页面：

chrome.tabs.create({
    url: 'about:blank'
}, function(tab) {
    chrome.tabs.executeScript(null, {
        file: 'jquery/jquery.js'
    }, function() {
        console.log('done', arguments);
    });
});

tabs.executeScript: Cannot access contents of url "about:blank".
Extension manifest must request permission to access this host.

显然，此错误消息使我认为我无权访问此 url 并更新了我的清单以允许访问所有 url，但我有同样的问题。

"permissions": [
    "tabs",
    "*://*/*"
],

额外信息

我不直接打开网址的原因是因为我有 2 个网址需要一个接一个地访问。这些文件是升级脚本，我需要从中查看结果。

最好的方法是打开一个页面，并在窗口的左侧和右侧有一个 iframe，我可以使用注入的脚本来控制它。

4

1 回答 1

2

您可以在扩展包中创建一个虚拟升级页面，我们称之为 upgrade.html

用它来制作你的结构并添加你想要的 2 个 iframe。如果你想控制它，你可以使用使用后台脚本的消息传递在 2 个 javascript 页面之间进行通信。要从父页面与 iframe 进行通信，只需查看Invoking JavaScript code in an iframe from parent page 中的任何答案

如果您事先不知道要运行的逻辑（尽管您应该知道），那么您可以在页面之间传递整个字符串并在另一侧对它们进行评估 – 尽管这不是您通常想要做的事情。这是消息传递的文档：http: //developer.chrome.com/extensions/messaging.html

简而言之：您的内容脚本有页面 A，页面 B 是您的背景页面，页面 C 是带有 2 个 iframe 的更新页面，然后：

// A.js
var port = chrome.runtime.connect({name: "content-script"});
port.postMessage({ runScript: 'yahoo(); function yahoo; () { alert("Yahoo!"); }' });

// B.js
// The background page is only used as a proxy
var upgrade_port = null;
chrome.runtime.onConnect.addListener(function(port) {
  switch (port.name) {
    case 'content-script':
       // Also you need to query for the upgrade page and open it if it does not exist
       port.onMessage.addListener(function(msg) {
         upgrade_port.sendMessage(msg);
       });
       break;
    case 'upgrade-page':
      upgrade_port = port;
      break;
    default:
      console.warn('Unknown port name: ' + port.name);
  }
});

// C.js
var port = chrome.runtime.connect({name: "upgrade-page"});
port.onMessage.addListener(function (message) {
  if (message.runScript) {
    eval(message.runScript);
  }
});

您需要使用端口，否则您无法从一个页面到另一个页面进行通信。此外，如果您事先在页面 C 中插入 JS 并将其设为静态并将参数传递给 RPC 样式（远程过程调用）函数，也就是：

// A.js
port.postMessage({action:'RPC', name:'yahoo', args:['hello', 'world', 3]});

// C.js
var RPCs = {
  yahoo: function (str1, str2, no) {
    alert(str1 + ',\n' + str2 + '\nThis is a number: ' + no);
  }
};

port.onMessage.addListener(function (msg) {
  switch (msg.action) {
    case 'RPC':
      if (!RPC[msg.name]) { console.warn('Unknown RPC: ' + msg.name); return; }
      RPC[msg.name].apply(RPC, msg.args || []);
      break;
    default:
      console.warn('Unknown action: ' + msg.action);
  }
});
于 2013-10-12T23:05:26.290 回答