Failed to access DOM elements in Firefox add-in script

Question

Using Firefox 34 and addon SDK 1.17.

I am using the HTML version of the SDK to add content to a script. Inside the contents of the script, I see very strange behavior when trying to access DOM elements.

main.js

pageMod.PageMod({
    include: "somewebsite",
    contentScriptWhen: 'end',
    contentScriptFile: [data.url("stuff.js")]
});

stuff.js

log(document.getElementsByTagName("body")); // empty object
log(document.getElementById("SomeIdThatShouldBeThere")); // empty object
log(document.getElementsByTagName("li")); // x amount of empty objects...

This will work as expected:

document.body.style.border = "5px solid red";

Also for the empty objects that I get, I can do

obj.style.border = ...

and it will work, the html element will be modified to change the border color, etc. But I can not read the properties of the elements, so I work blindly.

I read that people say that there are some restrictions on modifying the DOM from content scripts, but I can't do even the most basic thing, apparently. Is this supposed to be supported or not?

edit: , , , - ... , , , .

Answer 1

dom , :

unsafeWindow.console.log(document.getElementById("SomeIdThatShouldBeThere"));
// Or map it in your contentscript file for less typing
var log = unsafeWindow.console.log;
log(document.getElementById("SomeIdThatShouldBeThere"));

about: config "extensions.sdk.console.logLevel" ​​ "", , .

, sdk cmd, , , - , .

Edit: , var, firebug , firefox. unsafeWindow.console.log(foo) .

Answer 2

:

log(document.getElementsByTagName("body")); // empty object
log(document.getElementById("SomeIdThatShouldBeThere")); // empty object
log(document.getElementsByTagName("li")); // x amount of empty objects...

:

console.log(document.getElementsByTagName("body")); // empty object
console.log(document.getElementById("SomeIdThatShouldBeThere")); // empty object
console.log(document.getElementsByTagName("li")); // x amount of empty objects...

Answer 3

. .

( http://louisremi.com/2011/12/07/mozilla-addons-interactions-between-content-scripts-and-pages/)

" Inline Script

- / customEvents. - , :

// Quotes nesting would be a real mess now,
// let use a separate file loaded as a contentScriptFile
var script = document.createElement( "script" );
script.innerHTML = "var test =" + JSON.stringify( anyValue )+";";
document.body.appendChild( script );

, Script. Window.

customEvents

customEvents , , (jsonable) :

// inline script in example.com/index.html
var evt = document.createEvent("CustomEvent");
evt.initCustomEvent( "transData", true, false, jsonableValue );
window.dispatchEvent(evt);
// in contentScript.js
window.addEventListener( "transData", function( event ) {
  // the data is available in the detail property of the event
  self.port.emit( "transData", event.detail );
});"

Answer 4

I ran into the same problem in my additional content script. For some unknown reason, the values objectmay be printed to the console if you copy them to a new object. You can create a simple function as a workaround:

function getLoggableObject(obj){
    var loggable={};
    for(var key in obj){
        loggable[key]=obj[key];
    }
    return loggable;
}

Here is an example of calling this function:

 console.log("default  : ", $("table")[0]);
 console.log("loggable : ", getLoggableObject($("table")[0]));

And the output of these log statements:

"default  : " Object {  }
"loggable : " Object { createCaption: "function createCaption() {
    [native code]
}", deleteCaption: "function deleteCaption() {
    [native code]
}", createTHead: "function createTHead() {
    [native code]
}", deleteTHead: "function deleteTHead() {
    [native code]
}", createTFoot: "function createTFoot() {
    [native code]
}", deleteTFoot: "function deleteTFoot() {
    [native code]
}", createTBody: "function createTBody() {
    [native code]
}", insertRow: "function insertRow() {
    [native code]
}", deleteRow: "function deleteRow() {
    [native code]
}", caption: null, 210 more… }