javascript - Chrome 扩展 : create tab then inject content script into it

Question

收到来自内容脚本的消息后，我想创建一个新选项卡并填充它动态打开的页面(现在我只是想将新创建的页面变成红色)。

事件页面.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 的正文中，新选项卡的标题不会打印到控制台中，这表明脚本被注入(inject)得太早，所以我尝试用 延迟注入(inject)setTimeout 当失败时，我尝试监听 status-complete 事件:

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

问题是您无法将脚本注入(inject) chrome-extension://* 页面(您的 blankpage.html 是)。

比如改

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

到

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

在您的原始代码块中，它会将背景更改为红色。据我所知，没有办法绕过注入(inject) chrome-extension://* 页面(我认为这是一个巨大的安全问题)。我不确定您的扩展程序试图做什么，但是注入(inject)“实时”页面应该可以工作...也许您可以创建一些 API 以在 chrome.runtime 时在您的服务器上生成一个新的“空白页” .onMessage.addListener 触发了吗？

编辑

所以你不能注入(inject)东西到 chrome-extension://* 页面，但是你可以向它们传递消息并在其中使用 chrome API 的一些子集如下所述的新页面。因此，使用消息传递，您将能够完全按照您的意愿进行操作(修改新页面)，尽管是以一种迂回的方式。这是一个对我有用的非常简单的概念证明:

事件页面.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"});
}

空白页面.js:

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