Search code examples
javascriptxmlhttprequestfirefox-addonmozillafirefox-addon-sdk

"XMLHttpRequest is not a constructor" error, contrary do Mozilla docs on usage inside browser chrome


I am building a Mozilla AddOn, using the AddOn SDK. I need to make an AJAX post, so I'm using XMLHttpRequest. In Mozilla's documentation it says that XMLHttpRequest

can't be instantiated using the XMLHttpRequest() constructor. The constructor is not defined inside components and the code results in an error. The best way to work around this is to use the XPCOM component constructor.

The docs say to do it this way:

const XMLHttpRequest = Components.Constructor["@mozilla.org/xmlextras/xmlhttprequest;1"];
var oReq = new XMLHttpRequest();

Fine. So I implement the code exactly as it's shown in the docs:

var { Cc, Cu, Ci, Cr, Cm, components } = require('chrome');
const XMLHttpRequest = components.Constructor["@mozilla.org/xmlextras/xmlhttprequest;1"];
. . .
var oReq = new XMLHttpRequest();

And I get a "XMLHttpRequest is not a constructor" error on this line.

What am I missing? What am I doing wrong here? I can't use the "Components.Constructor["@..." way because the AddOn SDK CLI tool that generates the .xpi file complains, saying that

use 'Components' to access chrome authority. To do so, you need to add a line somewhat like the following:

const {components} = require("chrome");

Then you can use any shortcuts to its properties that you import from the 'chrome' module ('Cc', 'Ci', 'Cm', 'Cr', and 'Cu' for the 'classes', 'interfaces', 'manager', 'results', and 'utils' properties, respectively. And components for Components object itself).

OK, fine. I do have the require(chrome) call at the top of my file, and generate the shortcuts, and then amusing components, which is the correct form, and which the message from the AddOn compiler says to use. And yet I get the error.

Any help greatly appreciated.


Solution

  • You should be using the request module in the Add-on SDK.

    Should you for some reason still want to use nsIXMLHttpRequest directly, please note that the correct way to produce the constructor in an SDK module would be:

    XMLHttpRequest = components.Constructor(
      "@mozilla.org/xmlextras/xmlhttprequest;1",
      "nsIXMLHttpRequest");
    

    Except that components.Constructor() doesn't seem to work in the SDK. So better create an instance directly:

    var {Cc, Ci} = require('chrome');
    var r = Cc["@mozilla.org/xmlextras/xmlhttprequest;1"].
            createInstance(Ci.nsIXMLHttpRequest);
    r.open("GET", "http://example.org/");
    r.addEventListener("loadend", function(e) {
        console.log(this, e, e.type, this.responseText);
    });
    r.send();
    

    The MDN wiki(!) information is simply incorrect. I edited the article now and set the "Technical Review needed" flag.