I am currently in the process of developing my first Firefox add-on using the SDK.
Specifically, I am focusing on interaction with the Amazon website at the moment.
After entering a search query and viewing the results, I aim to retrieve a list of all the search results.
I have successfully identified the list containing the complete search results for the initial page (16 elements).
The command
document.querySelectorAll('ul#s-results-list-atf li.s-result-item')
works flawlessly in the Firefox console when using Firebug.
However, when executing it in a Firefox add-on script, it returns a list of 16 empty objects.
Does anyone have insights into why this issue is occurring?
UPDATE: Here is 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")]
});
*/
// Event listener for tab content loads.
tabs.on('ready', function(tab) {
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) {
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) {
// Functionality to be added
}
});
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');
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: Search Results on Amazon.de for: qivicon
When using
document.querySelectorAll('ul#s-results-list-atf li.s-result-item')
in the Firefox console, the following result is obtained
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]