How to recover Firefox bi HTML source code via Addon/Add-on?

Question

I am writing an add-on ("addon") to Firefox. I need to get the HTML source code open in the current Firefox tab and display in a alert, using Javascript.

I tried to use alert(document.documentElement.outerHTML), but just shows the code below:

Any suggestions ?

Answer 1

As you are writing an add-on to Firefox, you should know that Firefox itself is a great program written in Javascript and XUL (its weird markup language, which serves, in a way, as a native-faced HTML with many more components). Well, when you click the extension button, the current document is the Firefox window itself, so it will display the XUL source code from the window.

I assume your Javascript code is something like the below:

var seesource = {
  run : function(aEvent) {
    alert(document.documentElement.outerHTML);
  }
};

Fortunately, the scope of scripts will contain a variable called content, that will reference the contents of the current tab. The secret is to get the document of this variable:

var seesource = {
  run : function(aEvent) {
    alert(content.document.documentElement.outerHTML);
  }
};

See the result

This, however, is not valid if you are using the Addon SDK, the most modern way to develop complements. In this case, the thing will be a little more complicated (in English) but clearly not your case.

• The full extension code is on Bitbucket. If you want, lower the failed version (revision) or the full version (revision).

Answer 2

If the page has jQuery included, the following works:

$.get(document.html, function(html) { alert(html); } );

But to work on all pages, the ideal is to use the pure Javascript version:

// No IE, só funciona a partir da versão 9

request = new XMLHttpRequest();
request.open("GET", document.url, true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400){
    // Sucesso!
    html = request.responseText;
    alert(html);
  } else {
    alert("O servidor retornou um erro")
  }
};

request.onerror = function() {
  alert("Não foi possível conectar ao servidor");
};

request.send();

You can copy and paste to the console on any page to test.

Tip: When in doubt how to do something without jQuery, see: You Might Not Need jQuery