Question

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

如何访问数据并分配变量with port.on？

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

//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;
});

有关详细信息，请参阅：Communicating using "port"

修改

现在你提供了一些实际的代码，根据心灵调试我认为我理解你的问题。

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

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

只需将数据传输到面板
即可
worker.port.on("gotElements", function(elements) { pcPanel.port.emit("message", elements); }

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

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

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

1 个答案: