如何在Chrome擴展程序中將參數從后台腳本傳遞到內容腳本？

Question

我有一個chrome擴展程序，該程序從后台腳本調用內容腳本以將HTML插入網頁。

當我調用內容腳本（inject.js）時，我想傳遞來自內容腳本（eventpage.js）的一些參數，但是這樣做有些麻煩。 我也不想使用利用chrome.storage或localstorage的解決方案。

Manifest.json（相關部分）：

{
  "manifest_version": 2,
  "content_scripts": [
    {
      "matches": ["http://*/*"],
      "js": ["inject.js"]
    }
  ],
  ...     
  "background": {
    "scripts": ["eventpage.js",...],
    "persistent": false
  },

}

Eventpage.js（背景）：

// Want to add the parameter here

chrome.tabs.executeScript(tabId, {
    file: 'inject.js'
});

Inject.js（內容）：

(function() {

    // Want to retrieve the parameter passed from eventpage.js here

})();

Answer 1

使用消息傳遞 ：

Eventpage.js

// Want to add the parameter here
var parameterToSend;

chrome.tabs.executeScript(tabId, {
    file: 'inject.js'
}, function() {
    chrome.tabs.sendMessage(tabId, {parameter: parameterToSend});
});

Inject.js

(function() {

    // Want to retrieve the parameter passed from eventpage.js here

    chrome.runtime.onMessage.addListener(function(message) {
        var receivedParameter = message.parameter;

        //use receivedParameter as you wish.

    });

})();

Answer 2

您想使用的解決方案有時很方便，但是它不稱為內容腳本，它用於在不同情況下僅在頁面上插入HTML的情況。 您正在嘗試直接將JS片段注入網站，而您將inject.js文件指定為內容腳本。

WebExtensions標准中的內容腳本意味着該腳本可以訪問網頁的HTML（減去一些限制，例如iframe）並可以對其進行修改。

考慮將后台腳本的內容更改為：

chrome.tabs.query({active:true, lastFocusedWindow: true}, function(tabs){
    if (tabs.length > 0) {
        chrome.tabs.sendMessage(tabs[0].id, {
           type:"message-type",
           param: 'param'
         });
}});   

並在內容腳本中為從后台檢索的消息添加偵聽器

chrome.extension.onMessage.addListener(callback);

callback變量應該是要在inject.js文件中運行的函數。 該函數可能會在其簽名中獲取一個參數，執行該函數時會包含作為chrome.tabs.sendMessage函數的第二個參數傳遞的JS對象。

在這種情況下

 var callback = function(data) {
    // here in data.param you have your parameter
 }

另外，如果您確實需要使用代碼注入，那么您將必須做兩件事：

1. 刪除inject.js從您的content_script部分manifest.json並把它添加到web_accessible_resources一部分。

2. 閱讀有關注入代碼的所有必要信息，將參數傳遞給使用chrome.tabs.executeScript（）注入的內容腳本