firefox - 如何在 pagemod 和 widget 之间发出和监听事件？

Question

我正在使用addon-sdk。我有一个小部件，单击该小部件后我想对网站执行一些操作(无论是修改页面还是读取深层 DOM)。

这是我读完后的想法https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/page-mod#Communicating_With_Content_Scripts将是:

1. pagemod 在匹配的网址上激活(在本例中为任意)
2. 单击满足左键单击事件的小部件。然后它会发出小部件点击。
3. Pagemod 接收 widget-click 事件并触发名为 from-pagemod 的事件。
4. from-pagemod 对网页执行某些操作。

我在标准输出中看到以下输出:

console.log: project: about to emit widget-click
console.log: project: after emitting widget-click

所以 pagemod 没有收到该事件或者它从未被设置。我不确定这个简单的测试用例缺少什么。如有任何帮助，我们将不胜感激。

这里是lib/main.js。

var widgets = require('sdk/widget');
var pageMod = require("sdk/page-mod");
var data = require("sdk/self").data;
var tabs = require("sdk/tabs");

exports.main = function() {
    var widget = widgets.Widget({
        label: "widget label",
        id: "widget-id",
        contentURL: data.url("off.png"),
        contentScriptFile: [data.url("widget.js"), data.url("page.js")]
    });

    widget.port.on("left-click", function() {
        console.log("about to emit widget-click");
        widget.port.emit("widget-click", "foo");
        console.log("after emitting widget-click");
    });


    var page = pageMod.PageMod({
        include: "*",
        contentScriptWhen: "end",
        contentScriptFile: data.url("page.js"),
        onAttach: function(worker) {
            worker.port.on("widget-click", function(msg) {
                console.log("on widget-click, ready to emit from-pagemod event");
                worker.port.emit("from-pagemod", "foo");
            });
        }
    });
};

这是page.js

self.port.on("from-pagemod", function(msg) {
    console.log("inside from-pagemod listener");
    // read DOM or modify the DOM
});

这里是widget.js

this.addEventListener('click', function(event) {
  if(event.button == 0 && event.shiftKey == false)
    self.port.emit('left-click');
}, true);

Answer 1

编辑2，回答实际问题:

如果您想在内容脚本已附加时在小部件单击上对页面执行某些操作，请在您有权访问 page-worker 的位置注册您的 widget 监听器。您可以通过将 widget.port.on 代码放入 pageMod 的 onAttach() 中来实现此目的，但它仅适用于最近附加的页面。使其发挥作用的最佳方法是存储所有工作人员，然后在单击小部件时检查当前选项卡是否有工作人员，如下所示:

ma​​in.js ^部分

var workers = [];

widget.port.on("left-click", function() {
  console.log("about to emit widget-click");
  var worker = getWorker(tabs.activeTab);
  if (worker) {
    worker.port.emit("widget-click", "foo");
    console.log("after emitting widget-click");
  }
});

var page = pageMod.PageMod({
  include: "*", // TODO: make more specific
  contentScriptWhen: "end",
  contentScriptFile: data.url("page.js"),
  onAttach: function(worker) {
    workers.push(worker);
    worker.on('detach', function() {
      detachWorker(worker);
    });
    // could be written as
    // worker.on('detach', detachWorker.bind(null, worker);
  }
});

function detachWorker(worker) {
  var index = workers.indexOf(worker);
  if(index!==-1) workerArray.splice(index, 1);
}

function getWorker(workers, tab) {
  for (var i = workers.length - 1; i >= 0; i--) {
    if (workers[i].tab===tab) return worker;
  }
}

page.js

self.port.on("widget-click", function(msg) {
  console.log("inside widget-click listener");
  // read DOM or modify the DOM
});

您的解决方案不起作用的原因是您假设事件以某种方式链接到文件而不是对象。

<小时/>

旧答案:你把事情搞得太复杂了。

只需在单击时附加内容脚本(而不是将内容脚本添加到每个页面，除非收到事件，否则不执行任何操作)

main.js

var widgets = require('sdk/widget');
var data = require("sdk/self").data;
var tabs = require("sdk/tabs");

exports.main = function() {
    var widget = widgets.Widget({
        label: "widget label",
        id: "widget-id",
        contentURL: data.url("off.png"),
        contentScriptFile: data.url("widget.js")
    });

    widget.port.on("left-click", function() {
        console.log("about to attach script");
        var worker = tabs.activeTab.attach({
            contentScriptFile: data.url("page.js");
        });
        worker.port.on('message from content script', function(someVariable){
            //Now I can do something with someVariable in main.js
        });
    });
};

page.js

// read DOM or modify the DOM
//I'm done, I'll send info back to the main script. This is optional
self.port.emit('message from content script', someVariable);

编辑:阅读Modifying the Page Hosted by a Tab了解更多信息。另外，Tutorials当您尝试使用 SDK 执行一些以前未执行过的操作时，该页面是一个很好的起点。这是退一步思考实现目标的替代方案的好方法。