Javascript chrome.extension.getBackgroundPage（）函数示例

我正在开发一个小的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>

现在我需要一种方法来激活

background.js

我是否需要从

popup.js

运行

background.js

中的相关函数，

---

或者给

background.js

一个运行的一般命令？

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

将弹出页面视为一个普通的网页：在这里，您需要使用向背景页面发出请求

通常，我使用隐式（暂时的）或显式（永久的）通道。使用时间通道：

popup.js

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

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

chrome.runtime.onMessage.addListener（函数（答案）{/*您的代码*/}）；
chrome.runtime.sendMessage（{cmd:“shutdown”}）；

background.js

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

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

chrome.runtime.onMessage.addListener（函数（请求））{
如果（request.cmd==“关机”）{
关机（）；
}
});   

永久通道：

popup.js

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

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

var-port=chrome.runtime.connect（{name:“myChannel”}）；
port.onMessage.addListener（函数（应答）{/*您的代码*/}）；
port.postMessage（{cmd:“shutdown”}）；

background.js

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

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

chrome.runtime.onConnect.addListener（函数（端口））{
port.onMessage.addListener（函数（请求）{
如果（request.cmd==“关机”）{
关机（）；
}
}
});

---

UPD.虽然这种内容背景通信方式功能齐全，但当前使用

chrome.runtime.getBackgroundPage（）

在后台脚本中调用函数的规范建议是，请求不应该是异步的（因此，需要更少的编码，更容易阅读代码）。请参阅和本帖的其他答案以澄清这一问题。

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

background.js

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

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

popup.js

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

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

当您检查popup.js时，您将在控制台中看到“hello from the background！”。只需返回后台页面的窗口对象，因为您可能知道所有变量都附加到此窗口对象，这样您就可以访问后台脚本中定义的函数

---

有一个示例代码，请参阅并查看文件

我已编辑了我的答案。请注意，如果您没有“持久性”

，则此解决方案是可以的：false

在您的

manifest.json

中。否则请查看@PawelmhmThank you#Pawelmhm的答案，但由于我的background.js代码在window.onload中，来自popup.js的调用似乎无法到达该函数。当我删除window.onload时，无论我将脚本标记放在popup.html上的什么位置，我都会得到null错误的“onclick”。@NimrodSarda：如果有人看不到你的代码，猜测你的代码可能有什么错误是不一样的。

chrome.runtime.getBackgroundPage（）

是首选方式，不应仅用于事件页面。它同样适用于持久性背景页面，因此无论背景页面的类型如何，它都可以始终使用。

chrome.extension.getBackgroundPage（）

，另一方面，它不能用于事件页面。（我不是说你的意思不同，只是稍微强调一下。）谢谢你澄清这件事。我已经修改了我的答案，这样它就不再包含误导性的陈述。

chrome.extension.getBackgroundPage（）的优点
over
chrome.runtime.getBackgroundPage
是第一个是同步的。同步方式编码最初会使代码更清晰易懂。但是，同步代码通常不需要努力就无法再次异步，因此如果您正在开发新的扩展，请使用
chrome.runtime.getBackgroundPage（回调）
@lexass您的答案显示了，但没有相应的事件。因此，消息将丢失。@RobW：您所说的“优势”是指“劣势”吗？：D（至少应该是“差异”（imo），尽管我强烈认为异步是一种优势。）