Browser Extension v2 消息通讯
Chrome 插件不同页面之间的消息通讯。
Tip
不同的 JavaScript 文档（一般指 content scripts、background 运行的 scripts、popup 页面所引用的 scripts）是在不同的作用域中，它们之间通过 Chrome 提供的 API 进行事件触发和监听以实现数据传递和消息通信。
background 与 content script
background.js
js
// 设置一个 browser action 的监听器，监听 onClicked 事件
chrome.browserAction.onClicked.addListener(buttonClicked);
function buttonClicked(tab) {
// 当用户点击浏览器右上角的插件图标时会执行该函数
// 参数 tab 是一个关于当前网页标签的信息的对象
var msg = {
message: "user clicked!"
}
// 传递消息
chrome.tabs.sendMessage(tab.id, msg);
}
content.js
js
// 在 content script 监听消息
chrome.runtime.onMessage.addListener(receiver);
function receiver(request, sender, sendResponse) {
// 当接受到消息后执行该回调函数
// 第一个参数 request 是所接收到的消息
if (request.message === "user clicked!") {
// Do something!
}
}
popup 读取 background 数据
popup script 可以直接调用 background script 中的方法和变量，也可以直接访问 background page 的 DOM
background.js
js
function test() {
alert('我是 background');
}
popup.js
js
var bg = chrome.extension.getBackgroundPage();
bg.test(); // 访问bg的函数
alert(bg.document.body.innerHTML); // 访问 bg 的DOM