Question

我正在编写一个Chrome扩展程序，需要根据某个给定的参数修改特定域中的页面，这些参数需要XSS才能获得，所以简单地使用内容脚本似乎是不可能的。所以，我决定使用tabs.executeScript注入脚本。

现在我需要知道两件事：首先，如何在使用executeScript时将参数传递给脚本？我想我可以使用消息，但在注入脚本时是不是有更直接的方法来传递参数？

其次，我的脚本使用jQuery，所以我需要以某种方式包含jQuery。这很傻，但我不知道该怎么做。到目前为止，我在我编写的HTML页面中嵌入了jQuery（例如background.html）。

Answer 1

如果您不想使用消息传递，那么：

chrome.tabs.executeScript(tabId, {file: "jquery.js"}, function(){
    chrome.tabs.executeScript(tabId, {code: "var scriptOptions = {param1:'value1',param2:'value2'};"}, function(){
        chrome.tabs.executeScript(tabId, {file: "script.js"}, function(){
            //all injected
        });
    });
});

（jquery.js应放入扩展文件夹）。脚本选项将在scriptOptions中的script.js变量中提供。

通过消息传递也很简单：

chrome.tabs.executeScript(tabId, {file: "jquery.js"}, function(){
    chrome.tabs.executeScript(tabId, {file: "script.js"}, function(){
        chrome.tabs.sendMessage(tabId, {scriptOptions: {param1:'value1',param2:'value2'}}, function(){
            //all injected
        });
    });
});

您需要向script.js添加请求侦听器：

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    var scriptOptions = message.scriptOptions;
    console.log('param1', scriptOptions.param1);
    console.log('param2', scriptOptions.param2);
    doSomething(scriptOptions.param1, scriptOptions.param2);
});

Answer 2

基于上面的直接方法，我能够直接从Chrome扩展程序的后台脚本中将代码注入新标签页。但是，请注意，executeScript命令的代码部分不仅仅采用变量，而只采用字符串。因此，经过实验，我发现我们需要事先设置命令串并包含我们想要的变量。像这样：

Run

这很有效！

Answer 3

包含依赖项的更好方式

通过以下方式将依赖库（和其他.js文件）添加到manifest.json中的后台脚本中：

"background": {
  "scripts": [
    "jquery.js",
    "main.js"
]

在应用程序代码之前列出依赖性，以便它们在之前加载。

Reference: Register Background Scripts

注意：这将执行脚本的紧急加载，而不是像executeScript那样延迟加载。

tabs.executeScript - 传递参数和使用库？

3 个答案: