1

私は、ページ上の数字を見つけて、アドオンの 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() が受け取った値をどのように変数に設定しますか?

4

1 に答える 1

4

.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. パネルでは、一致するすべての要素が 1 つのメッセージに表示されるようになりました

    addon.port.on("message", function handleMyMessage(elements) {
  var firstNumber = parseInt(elements[0], 10);
  var secondNumber = parseInt(elements[1], 10);
  // more elements?
}
于 2013-09-27T17:52:22.950 に答える