Javascript Chrome扩展：在后台页面和网站页面脚本之间进行通信的最佳方法

开门见山：

我想做的是在image.js文件中运行go（）函数。我用谷歌搜索过，我知道运行内联脚本是不可能的

调用我想要的javascript的最佳方法是什么？事件？信息？请求？还有别的办法吗

以下是我目前的代码：

background.js

chrome.browserAction.onClicked.addListener(function(tab) {

var viewTabUrl = chrome.extension.getURL('image.html');

var newURL = "image.html";
chrome.tabs.create({
    url : newURL
});

var tabs = chrome.tabs.query({}, function(tabs) {

    for (var i = 0; i < tabs.length; i++) {
        var tab = tabs[i];
        if (tab.url == viewTabUrl) {
            //here i want to call go() function from image.js

        }
    }
});
});

function go(){
  alert('working!');
}

---

实现这一点有多种方法。根据你想要达到的目标（你的问题还不清楚），一种方法可能比另一种更好

一种简单的方法是注入内容脚本并通过与之通信，但是将内容脚本注入带有

chrome扩展名：//

方案的页面（不管文档怎么说-有一个用于更正文档）

因此，这里有一种可能性：使用

---

例如：

在background.js中：

var viewTabURL = chrome.extension.getURL("image.html");
var win = window.open(viewTabURL);   // <-- you need to open the tab like this
                                     //     in order to be able to use `postMessage()`

function requestToInvokeGo() {
    win.postMessage("Go", viewTabURL);
}

window.addEventListener("message", function(evt) {
    if (location.href.indexOf(evt.origin) !== -1) {
        /* OK, I know this guy */
        if (evt.data === "Go") {
            /* Master says: "Go" */
            alert("Went !");
        }
    }
});

---

通常，在后台页面和扩展视图之间进行通信的最简单方法是通过直接访问相应的

窗口

对象。这样，您就可以调用函数或访问其他页面中定义的属性

从另一个扩展页面获取背景页面的

窗口

对象很简单：使用，或者如果它是一个事件页面

要从后台页面获取扩展页面的

窗口

对象，您至少有三个选项：

循环浏览的结果以找到所需的页面

首先使用

窗口打开页面。打开

，直接返回

窗口

对象

使扩展页中的代码调用后台页中的函数来注册自身，并将其窗口对象作为参数传递。例如，见

一旦对页面的

窗口

对象有了引用，就可以直接调用其函数：

win.go（）

作为旁注，在您的例子中，您正在打开一个扩展视图，然后立即想要调用其中的函数，而不需要从后台页面传递任何信息。实现这一点的最简单方法是，在加载视图时让视图运行函数。只需在image.js脚本末尾添加以下行：

go();

---

还要注意，示例中的代码可能找不到您的选项卡，因为

chrome.tabs.create

是异步的，将在创建选项卡之前返回。

我尝试了您的代码，但它对我无效。我可能做错了什么。您何时调用函数“requestToInvokeGo（）”？我没有包含对

requestToInvokeGo（）

的调用，我认为您可以随时调用它（并且可以多次调用）。当您试图调用它时，它不起作用？在后台页面或

image.html

tab的控制台中是否有任何错误？没有错误。据我所知，监听器没有反应（我在未打印时的开头放了一个console.log）。您是否调用了

requestToInvokeGo（）

？如何/何时？在定义后的“background.js”中添加该行使其工作，但它在我需要时运行。我想控制它运行的时间。我被困在第三步。我添加了

chrome.extension.getBackgroundPage（）.helpWindowLoaded（窗口）image.js

和

function-helpWindowLoaded（helpWindow）{helpWindow.help（id）；}

在

background.js

上，但它说id没有定义。我定义了一个id，它说“helpWindow”没有一个名为“help”的方法。@user2882482当然，这是一个特定于该问题的函数。在您的情况下，它将是

helpWindow.go（）

。另外：1、2和3不是步骤，而是不同的备选方案

chrome.tabs.create

在创建选项卡之前（可能在加载完成之前，但在创建选项卡之前）不会返回。2.不要推广使用过时的chrome.extension.getBackgroundPage（）。改用chrome.runtime.getBackgroundPage（回调）。（前者在返回之前甚至无法正确加载事件页面。）

go();