如何在Firefox插件中实现Chrome扩展程序的chrome.tabs.sendMessage API

Question

我正在使用Addon-Builder进行Firefox插件开发。我不知道如何在Firefox插件中实现Chrome扩展程序的chrome.tabs.sendMessage API。代码是这样的（代码在background.js中，类似于Firefox插件中的main.js）：

function sendMessageToTabs(message, callbackFunc){
    chrome.tabs.query({}, function(tabsArray){
        for(var i=0; i<tabsArray.length; i++){
            //console.log("Tab id: "+tabsArray[i].id);
            chrome.tabs.sendMessage(tabsArray[i].id,message,callbackFunc);
        }
    });
}

那么，我怎样才能做到这一点？

Answer 1

在使用Add-on SDK构建的附加组件中，内容脚本由main.js管理。没有内置方法可以访问所有加载项的内容脚本。要向所有选项卡发送消息，您需要手动跟踪内容脚本。

existing APIs可以轻松实现单向消息。但是，回调不是内置的。

我的browser-action SDK library包含一个名为“messaging”的模块，它实现了Chrome消息传递API。在以下示例中，内容脚本和主脚本使用名为“extension”的对象。该对象公开了onMessage和sendMessage方法，模仿Chrome扩展messaging 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);
    }
});