Javascript Firefox插件（JPM）-如何从面板传递消息；从脚本到内容脚本？

我正在尝试将一个点击事件从面板脚本（popup.js）发送到内容脚本（content.js），这是我尝试过的代码。并且所需的输出没有在控制台上打印

popup.html

content.js

js（main）

---

为了将消息从传递到内容脚本，您必须通过后台脚本进行中继。因此，通信看起来像面板脚本⟷ 背景脚本⟷ 内容脚本

由于您可能有许多不同的内容脚本，这一点变得复杂。每个选项卡甚至可以有多个内容脚本。因此，您必须在内容脚本附加时跟踪它们，并使它们保持组织，至少按选项卡进行组织。这样，您就可以将消息中继到正确的内容脚本

由于面板是一个用户界面，因此通常希望向活动选项卡发送消息。另一方面，它可能希望向特定选项卡或特定选项卡中的特定脚本发送消息。您需要确定您的附加组件需要的粒度级别

以下脚本将通过Page Mod将内容脚本加载到每个选项卡中（根据问题，包含的URL是

'*'

）。每个内容脚本都按选项卡跟踪。没有为每个选项卡提供多个内容脚本。为了使内容脚本列表中的条目无效，实际上应该监听选项卡事件。但是，在本例中没有这样做。单击某个按钮时，将显示该面板。单击面板中的按钮时，面板会将

中继

消息发送到后台脚本，然后后台脚本会解码

中继

消息并将其发送到相应的内容脚本

我为

中继

消息设置了一种格式。该格式为：

{
     target: {
        type:targetType, //Currently, the only valid targetType is 'content'.
        id:targetId //A tab ID, or 'activeTab'
    },
    emitType:emitType, //The type of emit message that will be sent.
    data:message //The contents of the relayed message.
}

守则：

index.js：

var panels=require（“sdk/panel”）；
var self=要求（“sdk/self”）；
var数据=需要（“sdk/self”）。数据；
var pageMod=require（“sdk/page mod”）；
变量选项卡=需要（“sdk/选项卡”）；
//打开浏览器控制台
var utils=require（'sdk/window/utils'）；
activeWin=utils.getMostRecentBrowserWindow（）；
activeWin.document.getElementById（'menu_browserConsole'）.docomand（）；
var-workers={}；
//PageMod
pageMod.pageMod({
包括：“*”，
contentScriptWhen:'准备就绪'，
contentScriptFile：[
//data.url（“js/jquery-3.1.0.min.js”），
url（“js/content.js”）
],
附加工
});
函数attachWorker（worker）{
如果（！workers.hasOwnProperty（worker.tab.id））{
//以前没有此选项卡
工人[worker.tab.id]={}；
}
//这并没有考虑到有多个工人的可能性
//每个标签一次。
//还记得那个工人吗
log（'index.js:Attached worker on tab='，worker.tab.id）；
工人[worker.tab.id]。工人=工人；
}
//面板
变量面板=面板。面板({
contentURL:self.data.url（“popup.html”），
手皮
});
面板端口开（'message'，receiveMessage）；
面板端口打开（“继电器”，接收器）；
函数handleHide（）{
}
函数receiveMessage（消息）{
log（'index.js:received message:'，message）；
}
职能接管人（数据）{
log（'index.js:received relay:'，data）；
让我们去港口；
让targetId；
if（数据类型！=='object'）{
log（'index.js:received relay:data不是对象'）；
返回；
}//否则
如果（！data.hasOwnProperty（'target'））{
log（'index.js:received relay:No-target-specified'）；
返回；
}//否则
如果（data.target.type==='content'）{
if（data.target.id&&data.target.id==='activeTab'）{
targetId=tabs.activeTab.id；
}否则{
targetId=data.target.id；
}
log（'index.js:received relay:target ID:'，targetId）；
如果（！workers.hasOwnProperty（targetId）| |！workers[targetId].worker）{
log（'index.js:received relay:No target worker可用于ID:'
，targetId）；
返回；
}//否则
emitPort=workers[targetId].worker.port；
}否则{
//尚未定义
console.log（'index.js:received relay:未理解目标类型。类型：'
，data.target.type）；
返回；
}
log（'index.js:received relay:emitType='，data.emitType'，：：data='
，数据。数据）；
emitPort.emit（data.emitType，data.data）；
}
//动作按钮
var ui=要求（“sdk/ui”）；
var action_button=ui.ActionButton({
id:“面板显示按钮”，
标签：“显示面板”，
图标：“./icon.png”，
onClick：函数（状态）{
panel.show（）；
}
});

data/js/content.js：

console.log（'In content.js'）；
self.port.on（“消息”，函数（文本）{
log（'content.js:received message:'，text）；
});

data/popup.js：

函数myFunction（）{
log（'popup.js:Button clicked.Sending relay message'）；
//addon.port.emit（'message'，'helloworld'）；
sendRelay（'content'、'activeTab'、'message'、'Button clicked in panel'）；
}
函数sendRelay（targetType、targetId、emitType、message）{
addon.port.emit（'relay'{
目标：{
类型：targetType，//当前，唯一有效的targetType是“内容”。
id:targetId//选项卡id，或“activeTab”
},
emitType:emitType，//将发送的emit消息的类型。
数据：消息//中继消息的内容。
});
}

data/popup.html：

夹子

package.json：

{
“标题”：“演示传递消息面板背景内容”，
“名称”：“重新分配”，
“id”：”relaymessage@ex",
“版本”：“0.0.1”，
“说明”：“演示从面板传递消息->背景脚本->内容脚本。”，
“main”：“index.js”，
function myFunction() {
  addon.port.emit('message', 'hello world');
}

self.port.on("message", function(text) {
  console.log(text);
});

var panels = require("sdk/panel");
var self = require("sdk/self");
var data = require("sdk/self").data;
var pageMod = require("sdk/page-mod");

pageMod.PageMod({
  include: "*",
  contentScriptWhen: 'ready',
  contentScriptFile:
  [data.url("js/jquery-3.1.0.min.js"),
  data.url("js/content.js")]
});

var panel = panels.Panel({
 contentURL: self.data.url("popup.html"),
 onHide: handleHide
});

{
     target: {
        type:targetType, //Currently, the only valid targetType is 'content'.
        id:targetId //A tab ID, or 'activeTab'
    },
    emitType:emitType, //The type of emit message that will be sent.
    data:message //The contents of the relayed message.
}