chrome插件：content.js、background.js, options.js, popup.js之间的通信

目录

• content.js向background.js发送消息
• background.js向content.js发送消息
• options.js或popup.js向background.js传递数据
• 总结

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]

参考文章

1. 谷歌浏览器插件content_scripts、background、popup之间的通信
2. 【总结】1798- Chrome插件实时通信的几种方式