發送消息到Chrome擴展中的內容腳本

Question

我試圖從我的後臺腳本發送消息到內容腳本並失敗。

這是我在後臺腳本代碼：

iterator=0; 
    chrome.tabs.query({},function(tabs){ 
     for(var i=0; i<tabs.length; i=i+1){ 
      chrome.tabs.executeScript(tabs[i].id,{file: 'createBanner.js'}); 
     } 
     for (var i=0; i<tabs.length; i=i+1){ 
     chrome.tabs.sendMessage(tabs[i].id,{ 
      action: "currentPicNumber",picNumber: iterator 
     }); 
     } 
    }); 

在我的內容的腳本（createBanner.js）我有：

chrome.runtime.onMessage.addListener(function(request,response,sendResponse){ 
    if(request.action=="currentPicNumber"){ 
    console.log(request.picNumber.toString()); 
    } 
}); 

當我運行它的控制檯不顯示任何東西。我希望能夠在createBanner.js和我的後臺腳本之間來回發送消息。

請幫忙，謝謝

Answer 1

什麼是你manifest.json樣子？是在content_scripts中列出的createBanner.js？如果是這樣，您將能夠在每個頁面上執行它，而無需爲每個選項卡手動插入executeScript。 例如（在清單中）

"content_scripts": [ 
{ 
    "matches": ["http://*/*", "https://*/*"], 
    "js": ["createBanner.js"] 
} 
] 

Answer 2

chrome.tabs.executeScript是異步的。在調用sendMessage時，腳本尚未準備好接收它。

您可以指定一個executeScript的回調函數，該函數只有在執行了注入JavaScript（即註冊處理程序）後纔會運行。爲了使clojure正常工作，我使用返回回調函數的高階函數messageCallback。

所以，你的代碼如下：

function messageCallback(tabId, picNumber){ 
    return function(){ 
     chrome.tabs.sendMessage(
      tabId, 
      {action: "currentPicNumber", picNumber: picNumber} 
     ); 
    }; 
} 

chrome.browserAction.onClicked.addListener(function(){ 
    chrome.tabs.query({},function(tabs){ 
     for(i in tabs){ 
      chrome.tabs.executeScript(
       tabs[i].id, 
       {file: 'createBanner.js'}, 
       messageCallback(tabs[i].id, iterator) 
      ); 
     } 
    }); 
});