在使用插件 SDK 构建插件时,内容脚本由 main.js 管理。没有内置方法可以访问所有附加组件的内容脚本。要将消息发送到所有选项卡,您需要手动跟踪内容脚本。
现有的 API很容易实现单向消息。但是,回调不是内置的。
我的浏览器操作 SDK 库包含一个名为“消息传递”的模块,它实现了 Chrome 消息传递 API。在以下示例中,内容脚本和主脚本使用名为“扩展”的对象。该对象公开了onMessage
和sendMessage
方法,以 Chrome 扩展消息API 为模型。
以下示例将内容脚本添加到 Stack Overflow 上的每个页面,并在单击时将选项卡的标题记录到控制台(使用Ctrl++打开的那个Shift)J。
lib/main.js
// https://github.com/Rob--W/browser-action-jplib/blob/master/lib/messaging.js
const { createMessageChannel, messageContentScriptFile } = require('messaging');
const { PageMod } = require('sdk/page-mod');
const { data } = require('sdk/self');
// Adds the message API to every page within the add-on
var ports = [];
var pagemod = PageMod({
include: ['http://stackoverflow.com/*'],
contentScriptWhen: 'start',
contentScriptFile: [messageContentScriptFile, data.url('contentscript.js')],
contentScriptOptions: {
channelName: 'whatever you want',
endAtPage: false
},
onAttach: function(worker) {
var extension = createMessageChannel(pagemod.contentScriptOptions, worker.port);
ports.push(extension);
worker.on('detach', function() {
// Remove port from list of workers when the content script is deactivated.
var index = ports.indexOf(extension);
if (index !== -1) ports.splice(index, 1);
});
}
});
function sendMessageToTabs(message, callbackFunc) {
for (var i=0; i<ports.length; i++) {
ports[i].sendMessage(message, callbackFunc);
}
}
// Since we've included the browser-action module, we can use it in the demo
var badge = require('browserAction').BrowserAction({
default_title: 'Click to send a message to all tabs on Stack Overflow'
});
badge.onClicked.addListener(function() {
sendMessageToTabs('gimme title', function(response) {
// Use console.error to make sure that the log is visible in the console.
console.error(response);
});
});
为了记录,有趣的部分main.js
是在onAttach
事件内部。
data/contentscript.js
extension.onMessage.addListener(function(message, sender, sendResponse) {
if (message === 'gimme title') {
sendResponse(document.title);
}
});