如何将参数从后台脚本传递到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 直接注入到网站中，而您指定了ject.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() 注入的内容脚本

Answer 3

使用 Manifest v3 现在最好的方法是：userScripts（需要在 Chrome 120 中打开开发者模式）：

const dead = 'back';
chrome.userScripts.register([{
    id: 'test',
    matches: ['*://*/*'],
    allFrames: true,
    runAt: 'document_start',
    world: 'MAIN',
    js: [{code: `console.log('eval is ${dead}, baby!');`}]
}], 
() => {
    resolve(true);
});

好处：这是在内容脚本中传递参数的最快方式，保证其执行速度比网站脚本更快。