solick
solick

Reputation: 2345

querySelectorAll returns array with empty objects in Firefox Addon

I´m trying to write my first firefox addon using the sdk.

For the moment, i´m trying to interact with the amazon website.

So once i entered a string to search and see the result i want the list of all results.

I identified the list which contains the complete search for the first result page (16 elements).

The command

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

works perfectly in the firefox console using firebug.

However using it in a firefox addon script it returns a list of 16 empty objects.

Does anyone has an idea why this happens?

UPDATE: Here the complete code:

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

});

And the output:

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

using

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

in console at firefox get me

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]

Upvotes: 1

Views: 1781

Answers (1)

legoscia
legoscia

Reputation: 41578

As far as I can tell, it's only console.log that shows the elements as empty. The add-on code will be able to manipulate DOM elements as usual.

I guess it has something to do with how content scripts interact with page scripts, but I don't really understand it myself.

Upvotes: 1

Related Questions