javascript - 在 Firefox Add-on SDK 中使用 port.on 传递数据

Question

我正在开发一个简单的插件，它可以在页面上查找数字并将它们显示在插件的 html 面板中。

您如何访问数据并使用 port.on分配变量？

myMessagePayload 包含"4000, 800"从 main.js 文件发送的内容。

//main.js
var tag = ".first, .second";
var data = require("sdk/self").data;
var pageMod = require("sdk/page-mod");

pageMod.PageMod({
  //include: "*.example.com",
  include: "http://example.com/*",
  contentScriptFile: data.url("element-getter.js"),
  onAttach: function(worker) {
    worker.port.emit("getElements", tag);
    worker.port.on("gotElement", function(elementContent) {
      pcPanel.port.emit("message",elementContent);
    });
  }
});

// element-getter.js
self.port.on("getElements", function(tag) {
  var elements = document.querySelectorAll(tag);
  for (var i = 0; i < elements.length; i++) {
    self.port.emit("gotElement", elements[i].innerHTML);
  }
});


// display.html
addon.port.on("message", function handleMyMessage(myMessagePayload) {
  var firstNumber = parseInt(myMessagePayload[0]);
  var secondNumber = parseInt(myMessagePayload[1]); 
}

console.log(myMessagePayload); 
//info: addon: 4000
//info: addon: 800


console.log(myMessagePayload[0]) //returns 4
console.log(myMessagePayload[1]) //0
console.log(myMessagePayload[2]) //0
console.log(myMessagePayload[3]) //0

如何将 port.on() 接收到的值设置为变量？

Answer 1

.port.on()将接收对象。您可以发送任何 JSON 可序列化对象，例如

• 普通的旧数据类型，如数字

  port.emit("num", 100);
  .port.on("num", function(data) { console.log(data == 100); });
  

• 或字符串等

  port.emit("str", "mystring");
  .port.on("str", function(data) {
    console.log(data == "mystring");
    var anotherVariable = data; // pointless, but whatever.
  });
  

• 或实际对象（JSON 可序列化）

  port.emit("obj", {
    str: "mystring",
    num: 100,
    arr: [1,4,5],
    obj: {str: "anotherString"}
  });
  .port.on("obj", function(data) {
     console.log(data.str == "mystring");
     console.log(data.num == 100);
     console.log(data.arr[1] == 5);
     console.log(data.obj.str == "anotherString");
     var anotherVariable = data.obj.str;
  });
  

有关更多信息，请阅读：使用“端口”进行通信

编辑

在你现在给出一些实际代码之后，基于心理调试，我想我理解你的问题。

1. 一次转移所有元素。请记住：您可以传输数组。

   self.port.on("getElements", function(tag) {
     var elements = Array.map(document.querySelectorAll(tag). function(e) e.innerHTML);
     self.port.emit("gotElements", elements);
   });
   

2. 只需将数据传输到面板

   worker.port.on("gotElements", function(elements) {
     pcPanel.port.emit("message", elements);
   }
   

3. 在面板中，您现在在一条消息中获得了所有匹配的元素

   addon.port.on("message", function handleMyMessage(elements) {
     var firstNumber = parseInt(elements[0], 10);
     var secondNumber = parseInt(elements[1], 10);
     // more elements?
   }