Use of fetch api in extensions

[thosrtanner]

How can I actually get hold of the 'fetch' method if I want to use it an an extension?

Getting hold of some APIs that are available to web pages has always been a little tricky, and since the fetch API is fairly new, I couldn't find anything useful on the historical mozilla documentation

[moonbat]

You don't - you use the existing mechanism of registering an HttpObserver for http-on-modify-request and an nsIHttpChannel, both of which are documented.

If you want to make extensions, you're better off reading the XUL and XUL School tutorials and following examples from there. Also see the documentation for Services.jsm for common services that are cached by this module.
As an example, instead of using

Code: Select all

var ios = Components.classes["@mozilla.org/network/io-service;1"]
                    .getService(Components.interfaces.nsIIOService);
var ch = ios.newChannel("https://www.example.com/", null, null);

as in the nsIHttpChannel page above, you can use

Code: Select all

Components.utils.import("Services.jsm");
var ch=Services.io.newChannel("https://www.example.com/", null, null);

. The Services.jsm docs indicates what all interfaces are offered by Services, you can substitute them accordingly. Just add the import statement at the top of your source file once.

These aren't weeny Web Extensions and so use different and more powerful API than the sort of Javascript that merely manipulates webpage content.

[Kris_88]

Getting hold of some APIs that are available to web pages has always been a little tricky

This interface is also available for the XUL windows.
You can, for example, get a browser window and call window.fetch()

[thosrtanner]

Getting hold of some APIs that are available to web pages has always been a little tricky

This interface is also available for the XUL windows.
You can, for example, get a browser window and call window.fetch()

doesn't work terribly well outside of a browser window though

[thosrtanner]

You don't - you use the existing mechanism of registering an HttpObserver for http-on-modify-request and an nsIHttpChannel, both of which are documented.

If you want to make extensions, you're better off reading the XUL and XUL School tutorials and following examples from there.
...

Thanks for the references to the archived documentation and nsIHttpChannel which looks useful. It is worth noting however that the page in the tutorial about fetching remote content refers to XMLHttpRequest. There's nothing about setting up an http channel in the tutorials

[Kris_88]

doesn't work terribly well outside of a browser window though

works fine for me

Code: Select all

   let windowMediator = Cc["@mozilla.org/appshell/window-mediator;1"]
	  .getService(Ci.nsIWindowMediator);
   let win = windowMediator.getMostRecentWindow("navigator:browser");
   win.fetch('https://google.com/')
     .then((response) => { return response.text(); })
     .then((data) => { Services.prompt.alert(null, 'fetch', data); });

[Kris_88]

alternatively you can use XHR

Code: Select all

var xhr = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"].createInstance();
xhr.open('GET', 'https://...', true);
xhr.timeout = 5000;
xhr.responseType = 'text';
xhr.onloadend = function() {
   if (xhr.readyState != 4 || xhr.status != 200) return;
   // xhr.response ...
};
xhr.send();

[thosrtanner]

I'm using xhr. with a wrapper round it so I can use async/await.

Having said which, I don't think fetch gives me what I want either, so it looks like using an observer might be the way to go.

[FranklinDM]

There is another option available: Components.utils.importGlobalProperties.

I haven't seen this used in any extensions (yet), aside from XPC tests and internal platform modules. See this for usage examples.

[Kris_88]

Components.utils.importGlobalProperties

Thank you!