目录
content.js向background.js发送消息
消息方向：
// content.js 一般不直接与options.js, popup.js 通信，而是与常驻的background.js通信
content.js => [background.js, options.js, popup.js]
发送消息：
// content.js
chrome.runtime.sendMessage({
data: 'Hello'})
接收消息：
// background.js, options.js, popup.js
chrome.runtime.onMessage.addListener(function (message){
console.log(message);
})
接收情况：
// background.js message
{
data: 'Hello'}
// options.js message
{
data: 'Hello'}
// popup.js message
{
data: 'Hello'}
background.js向content.js发送消息
webextension-polyfill 通过browser代理对象，可以让chrome实现Promise
// https://github.com/mozilla/webextension-polyfill
import browser from "webextension-polyfill";
// 获取当前活跃的tab
const tabs = await browser.tabs.query({
active: true,
currentWindow: true,
});
if (tabs && tabs.length > 0) {
await browser.tabs.sendMessage(tabs[0].id, message);
}
options.js或popup.js向background.js传递数据
background.js 定义接收函数
// background.js
function onMessage(message) {
console.log(message);
}
// 注意，如果是模块化打包，需要挂载到全局
window.onMessage = onMessage;
options.js 调用消息接收函数
```js
// options.js 或者 popup.js
const background = chrome.extension.getBackgroundPage();
background.onMessage({
data: "hello" });
接收到的数据
// background.js message
{
data: 'hello'}
总结
可以把background.js看做是服务端或者一个桥梁或者是全局状态管理器，其他组件和它通信，存取数据都和background.js要，这样编程会简单很多
content.js <=> background.js <=> [options.js, popup.js]
参考文章
扫描二维码关注公众号，回复：
16515301 查看本文章
