在开发 chrome 扩展程序时，如何打开一个空白页来运行脚本？

Posted 2023-05-09

【中文标题】在开发 chrome 扩展程序时，如何打开一个空白页来运行脚本？

【英文标题】：When developing a chrome extension how can I open a blank page to run a script on?

【发布时间】：2013-10-20 19:42:02

【问题描述】：

我正在创建一个 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，我可以使用注入的脚本来控制它。

【参考方案1】：

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

使用它来制作您的结构并添加您想要的 2 个 iframe。 如果你想控制它，你可以使用使用后台脚本的消息传递在 2 个 javascript 页面之间进行通信。要从父页面与 iframe 进行通信，只需查看 Invoking JavaScript code in an iframe from the 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);
  
);

【讨论】：

感谢您的回答，对我最大的帮助是意识到我可以从我的扩展程序中打开一个 html 页面。这使我能够以我需要的方式完全控制它