Chrome擴展程序：創建選項卡，然後將內容腳本注入它

Question

從內容腳本接收到消息後，我想創建一個新選項卡並填充它動態打開的頁面（現在我只是試圖打開新創建的頁面紅）。

eventPage.js：

​​

這成功地創建了一個新的標籤和負載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來在你的服務器上產生一個新的「空白頁」，只要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"; 
    });