0
点赞
收藏
分享

微信扫一扫

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插件实时通信的几种方式


举报

相关推荐

0 条评论