如何将参数从后台脚本传递到chrome扩展中的内容脚本?

时间:2018-02-08 19:49:51

标签: javascript google-chrome-extension

我有一个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

})();

2 个答案:

答案 0 :(得分:3)

使用messaging

<强> 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.

    });

})();

答案 1 :(得分:0)

您想要使用的解决方案有时很方便,但它不会被称为内容脚本 它只是在页面上插入HTML的不同情况下使用的。 您正试图将JS片段直接注入网站,而您将inject.js文件指定为内容脚本。

WebExtensions标准中的内容脚本意味着该脚本可以访问网页的HTML(减去某些限制,例如iframe)并可以对其进行修改。

考虑将后台脚本的内容更改为:

sudo chmod -R 777 /var/db/lockdown/

并在内容脚本中添加从后台检索的消息的侦听器

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); 变量应该是您要在inject.js文件中运行的函数。该函数可以在其签名中获得一个参数,当它被执行时,它包含作为callback函数的第二个参数传递的JS对象。

在这种情况下,它将是

chrome.tabs.sendMessage

此外,如果您确实需要使用代码注入,那么您必须做两件事:

  1. var callback = function(data) { // here in data.param you have your parameter } 的content_script部分删除inject.js,并将其添加到manifest.json部分。

  2. 阅读有关注入代码Pass a parameter to a content script injected using chrome.tabs.executeScript()

  3. 的所有必要信息