chrome.extension.getBackgroundPage()函数示例

Question

我正在开发一个小型Chrome扩展程序，需要在后台运行。但是，我知道当我使用弹出窗口时，这是不可能的。阅读之后，似乎最好的选择是创建popup.js，以便使用chrome.extension.getBackgroundPage()函数运行background.js。

谁能给我举个例子说明一下是怎么做的？

这是舱单：

"browser_action": {
"permissions": ["background"],
"default_popup": "popup.html"},
"options_page": "options.html",
"background": {
    "scripts": ["background.js"],
    "persistent" : true
}

我已将popup.js引用包含在popup.html中

<script src="popup.js"></script>

并在popup.js中创建了一个变量

var bkg = chrome.runtime.getBackgroundPage();

因此，现在我需要一种激活background.js的方法，我需要从popup.js运行background.js中的相关函数，还是给出一个运行background.js的通用命令？

Answer 1

是的，您需要在弹出窗口中从后台调用函数。下面是一个简单的例子，它演示了它是如何工作的。

background.js

function backgroundFunction () {
    return "hello from the background!"
}

popup.js

(function () {
    var otherWindows = chrome.extension.getBackgroundPage();
    console.log(otherWindows.backgroundFunction()); 
})();

当你检查你的popup.js时，你会看到“背景中的你好！”在你的控制台里。GetBackgroundPage()只是返回背景页面的窗口对象，因为您可能知道所有变量都附加到这个窗口对象，因此这样您就可以访问在后台脚本中定义的函数。

有一个示例代码在chrome文档中演示了这一点，请参阅空闲简单示例并查看history.js文件

Answer 2

后台页面被加载，然后扩展被加载到Chrome中。

将弹出页面视为普通的网页:在这里，您需要使用chrome.runtime向后台页面发出请求。

通常，我使用一个隐式(时态)或显式(永久)通道来完成它。时间通道：

popup.js

chrome.runtime.onMessage.addListener(function (answer) { /* your code */ });
chrome.runtime.sendMessage({cmd: "shutdown"});

background.js

chrome.runtime.onMessage.addListener(function (request) {
    if (request.cmd === "shutdown") {
        shutdown();
    }
});   

拥有永久通道：

popup.js

var port = chrome.runtime.connect({name: "myChannel"});

port.onMessage.addListener(function (answer) { /* your code */ });
port.postMessage({cmd: "shutdown"});

background.js

chrome.runtime.onConnect.addListener(function (port) {
    port.onMessage.addListener(function (request) {
        if (request.cmd === "shutdown") {
            shutdown();
        }
    }
});

UPD.虽然这种内容-后台通信方式功能齐全，但当前使用chrome.runtime.getBackgroundPage()调用后台脚本中的函数的规范建议不应该是异步的(因此，需要更少的编码，代码更容易阅读)。请参阅手册和其他对这篇文章的回答来澄清这个问题。