chrome.extension.getBackgroundPage()函数示例

Question

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

有人可以告诉我一个如何做的例子吗？

这是清单:

"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 我需要内运行相关的功能background.js从popup.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向后台页面发出请求。

通常，我使用隐式（临时）或显式（永久）通道来执行此操作。使用时间通道：

弹出窗口.js

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

背景.js

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

拥有永久频道：

弹出窗口.js

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

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

背景.js

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

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