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 ， 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，以便在chrome.runtime.onMessage時在你的服務器上生成一個新的“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";
  });