querySelectorAll在Firefox Addon中返回带有空对象的数组

时间:2015-03-29 15:16:50

标签: javascript firefox css-selectors firefox-addon-sdk

我正在尝试使用sdk编写我的第一个firefox插件。

目前,我正在尝试与亚马逊网站进行互动。

所以,一旦我输入一个字符串进行搜索并查看结果,我想要所有结果的列表。

我确定了包含第一个结果页面的完整搜索的列表(16个元素)。

命令

document.querySelectorAll('ul#s-results-list-atf li.s-result-item')

使用firebug在firefox控制台中完美运行。

但是在firefox插件脚本中使用它会返回一个包含16个空对象的列表。

有没有人知道为什么会这样?

更新:这里是完整的代码:

main.js:

var buttons = require('sdk/ui/button/action');
var tabs = require("sdk/tabs");
var pageMod = require("sdk/page-mod");
var self = require("sdk/self");
var data = self.data;

var button = null;
var hoverState = 0;

/*************/

/*
pageMod.PageMod({

  include: "*.mozilla.org",
  contentScriptFile: [data.url("jquery-1.10.2.min.js"), data.url("content.js")]

});
*/


// Listen for tab content loads.
tabs.on('ready', function(tab) {
  console.log('###--------> tab is loaded', tab.title, tab.url);

    var worker = tab.attach({
        contentScriptFile: [data.url("jquery-1.10.2.min.js"), data.url("content.js")]


    });

  if (tab.url.indexOf("www.amazon.de") > -1) {

      console.log("### ---> Amazon Website detected");

      button = buttons.ActionButton({
        id: "mm1-productIdCatcher",
        label: "Enable Id Catcher",
        icon: {
            "16": "./icon-16.png",
            "32": "./icon-32.png",
            "64": "./icon-64.png"
        },
            onClick: function(state) {
                //tabs.open("https://www.mozilla.org/");
                //console.log("###------> test");


                if(hoverState == 0) {
                    hoverState = 1;
                    worker.port.emit("enable");

                } else {
                    hoverState = 0;
                    worker.port.emit("disable");
                }

            }
        });





        worker.port.emit("message", "+++ amazon.de detected +++");

  }
  else {
      if(button != null) {
          button.destroy();
          hoverState = 0;
      }

  }

});

content.js:

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

self.port.on("enable", function() {

    console.log("disabling...");


});

self.port.on("disable", function() {

    console.log("enabling...");



    var queryList = document.querySelectorAll('ul#s-results-list-atf li.s-result-item');
    //var queryList = document.getElementsByClassName('s-result-item');

    console.log("queryList: ", queryList
    console.log("queryList[0]: ", queryList[0]);

     var query_0 = document.querySelector("#result_0");

    console.log("query_0: ", query_0);

    console.log("title: ", document.title);

});

输出:

console.log: mm1-getproductid: disabling...
console.log: mm1-getproductid: enabling...
console.log: mm1-getproductid: queryList:  {"0":{},"1":{},"2":{},"3":{},"4":{},"5":{},"6":{},"7":{},"8":{},"9":{},"10":{},"11":{},"12":{},"13":{},"14":{},"15":{}}
console.log: mm1-getproductid: queryList[0]:  {}
console.log: mm1-getproductid: query_0:  {}
console.log: mm1-getproductid: title:  Suchergebnis auf Amazon.de für: qivicon

使用

document.querySelectorAll('ul#s-results-list-atf li.s-result-item')
在firefox的控制台中

让我

NodeList[li#result_0.s-result-item, li#result_1.s-result-item, li#result_2.s-result-item, li#result_3.s-result-item, li#result_4.s-result-item, li#result_5.s-result-item, li#result_6.s-result-item, li#result_7.s-result-item, li#result_8.s-result-item, li#result_9.s-result-item, li#result_10.s-result-item, li#result_11.s-result-item, li#result_12.s-result-item, li#result_13.s-result-item, li#result_14.s-result-item, li#result_15.s-result-item]

1 个答案:

答案 0 :(得分:0)

据我所知,它的 console.log将元素显示为空。附加代码将能够像往常一样操作DOM元素。

我想这与how content scripts interact with page scripts有关,但我自己并不了解。