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

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,如果我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"'});
    });
}

这也失败了.在等待之后调用(*)setTimeout确实打印了新选项卡的标题以及所有其他标题.

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

Answer 1

问题是你不能将脚本注入chrome-extension://*页面(你的脚本blankpage.html).

例如,改变

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

至

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

在原始代码块中,它会将背景更改为红色.据我所知,没有办法注入chrome-extension://*页面(我认为这是因为它是一个巨大的安全问题).我不确定你的扩展程序正在尝试做什么,但是注入"实时"页面应该可以工作......也许你可以创建一些API来在你的服务器上生成一个新的"blankpage",一旦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";
  });