Question

我正在构建Chrome扩展程序，当我点击工具栏图标时，我正在执行background.js，而在background.js我正在运行执行脚本。像这样：

chrome.tabs.executeScript(null, { file: "libs/jquery.min.js" }, function() {
    chrome.tabs.executeScript(null, { file: "scripts/myScript.js" })
});

在myScript.js中，我可以确认它已经执行了jQuery并运行了我的脚本。

myScript.js：

console.log('test');

$(document).ready(function() {
   console.log('jQuery test');
})

他们都工作

此时，我正在尝试实现网页内的变量（不是我写的）;我们说它是var helloWorld = "the content"。

如果我在控制台（开发工具）中尝试console.log(helloWorld)，它就可以了。但是，如果我尝试myScript.js，它会说：

$(document).ready(function() {
    console.log(helloWorld)

    setTimeout(function() {
       console.log(helloWorld)
    }, 1500)
})

未捕获的ReferenceError：未定义helloWorld

我已经看到了内容脚本方法的一些解决方法，但我无法使其适用于executeScript方法。如何访问helloWorld内的myScript.js变量？

我尝试过使用Predator的方法。以下是代码：

injected.js：

chrome.runtime.sendMessage("njfhnpgecmbmbipcjpkkglbkpcbjammb", {varName: "test"});
// I tried returning a string first

background.js

chrome.tabs.executeScript(null, { file: "libs/jquery.min.js" }, function() {
    chrome.tabs.executeScript(null, { file: "scripts/myScript.js" })
});

chrome.runtime.onMessageExternal.addListener( function(message, sender, sendResponse){
    console.log(message.varName);
    if( message.varName !== undefined ){
        console.log(message.varName);
    }
});

清单：

"background": { 
   "scripts": ["scripts/background.js"],
   "persistent": true
 },

根据您的第一个回答myScript.js：

$(document).ready(function() {
    setTimeout(function() {
        var s = document.createElement('script');

        s.src = chrome.extension.getURL('scripts/fetcher.js');
        s.onload = function() {
            this.remove();
        };
        (document.head || document.documentElement).appendChild(s);
    }, 500)
})

根据您更新的答案myScript.js：

function exec(fn) {
    var script = document.createElement('script');
    script.setAttribute("type", "application/javascript");
    script.textContent = '(' + fn + ')();';
    document.body.appendChild(script); //run the script
    document.body.removeChild(script); //clean up
}

background.js没有收到消息

Answer 1

您的内容脚本在单独的上下文中运行，这意味着它无法访问网页的全局范围。但是我之前做过管理，通过

注入代码来解决这个问题

location.href = "javascript: /* some messaging code */";

可能不是最好的做法，但它对我有用（并且可能有更新的API可以让你在没有这个的情况下使用。）

Answer 2

就像我在将内容脚本中的函数或代码注入网站页面后的评论中所述，您可以从该页面向外部发送消息到 background.js 你的扩展名。

chrome.runtime.sendMessage("extensionIdHere", {varName: varValue});

之后，您可以使用此代码来侦听这些外部消息并对其进行响应或使用已发送的值。

chrome.runtime.onMessageExternal.addListener( function(message, sender, sendResponse){ if( message.varName !== undefined ){ //process the info } });

编辑：首先尝试这个，如果它不起作用，请阅读以下内容：

在manifest.json的底部添加此内容，然后重试：

"externally_connectable": { "matches": [ "https://theSiteWhereYouAreInjectinTheCode.com/*" ] }

如果在此之后仍无效，请尝试将此功能添加到content script，以便将该代码注入网页。

//Injects functions directly into the dom function exec(fn) { var script = document.createElement('script'); script.setAttribute("type", "application/javascript"); script.textContent = '(' + fn + ')();'; document.body.appendChild(script); //run the script document.body.removeChild(script); //clean up }

然后就这样称呼它：

exec( function(){ chrome.runtime.sendMessage("njfhnpgecmbmbipcjpkkglbkpcbjammb", {varName: "helloWorld"}); });

通过background.js

2 个答案: