Question

收到来自内容脚本的消息后，我想创建一个新标签并填充它动态打开的页面（现在我只是想把新创建的页面变成红色）。

eventPage.js：

// ... code that injects another content script, works fine

// Problem code...
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) 
  {
    chrome.tabs.create({url: chrome.extension.getURL("blankpage.html")}, 
                       turnTabRed);      
  });

function turnTabRed(tab)
{
  chrome.tabs.executeScript(
    tab.id,
    {code: 'document.body.style.backgroundColor="red"'}
  );
}

这会成功创建一个新标签并加载blankpage.html（这只是一个带有一些文字的HTML页面）很好，但无法将背景颜色涂成红色。在各个地方插入console.log()语句并在调试器中搞错之后，我确定正在调用turnTabRed，tab.id确实是新创建的选项卡的ID，如果我调用{ {1}}从控制台，新标签的背景变为红色。我注意到，如果我添加了

（*）

document.body.style.backgroundColor="red"

进入chrome.tabs.query( {}, function (tabArr) { for (var i = 0; tabArr[i]; i++) console.log(tabArr[i].title); });的主体，新标签的标题不会打印到控制台，这表明脚本注入太早，所以我尝试用turnTabRed推迟注入当失败时，我试着听取状态完成事件：

setTimeout

也失败了。在等待function turnTabRed(tab) { chrome.tabs.onUpdated.addListener( function(tabUpdatedId, changeInfo, tabUpdated) { if (tabUpdatedId == tab.id && changeInfo.status && changeInfo.status == 'complete') chrome.tabs.executeScript( tabUpdatedId, {code: 'document.body.style.backgroundColor="red"'}); }); }后调用（*）确实打印了新标签的标题以及所有其他标题。

怎么了？如何创建新选项卡，加载HTML页面然后将其背景变为红色？

Answer 1

问题在于您无法将脚本注入chrome-extension://*页面（blankpage.html）。

例如，更改

{url: chrome.extension.getURL("blankpage.html")}

到

{url: "http://www.google.com"}

原始代码块中的

，它会将背景更改为红色。据我所知，没有办法注入chrome-extension://*页面（我认为这是因为它是一个巨大的安全问题）。我不确定你的扩展程序试图做什么，但是注入“实时”页面应该有效...也许你可以创建一些API，以便在chrome.runtime.onMessage.addListener发生时在你的服务器上生成一个新的“空白页面” ？

修改

因此，您无法将内容注入chrome-extension://*页面，但您可以将消息传递给它们，并在这些新页面中使用某些chrome API子集，如下所述。因此，使用消息传递，您将能够完全按照自己的意愿（修改新页面），尽管是以迂回的方式。这是一个非常简单的概念证明，对我有用：

eventPage.js：

chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) { chrome.tabs.create({url: chrome.extension.getURL("blankpage.html")}, turnTabRed); }); function turnTabRed(tab) { chrome.tabs.sendMessage(tab.id, {"action" : "setBackground"}); }

blankpage.js：

chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) { if(request.action == "setBackground") document.body.style.background = "red"; });

Chrome扩展程序：创建标签然后将内容脚本注入其中

1 个答案: