Use of fetch api in extensions

Add-ons for Pale Moon and other applications
General discussion, compatibility, contributed extensions, themes, plugins, and more.

Moderators: FranklinDM, Lootyhoof

thosrtanner
Lunatic
Lunatic
Posts: 395
Joined: 2014-05-10, 18:19
Location: UK

Use of fetch api in extensions

Unread post by thosrtanner » 2023-03-26, 06:27

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

User avatar
moonbat
Knows the dark side
Knows the dark side
Posts: 4942
Joined: 2015-12-09, 15:45
Contact:

Re: Use of fetch api in extensions

Unread post by moonbat » 2023-03-26, 06:58

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.
"One hosts to look them up, one DNS to find them and in the darkness BIND them."

Image
Linux Mint 21 Xfce x64 on HP i5-5200 laptop, 12 GB RAM.
AutoPageColor|PermissionsPlus|PMPlayer|Pure URL|RecordRewind|TextFX

User avatar
Kris_88
Keeps coming back
Keeps coming back
Posts: 932
Joined: 2021-01-26, 11:18

Re: Use of fetch api in extensions

Unread post by Kris_88 » 2023-03-26, 15:13

thosrtanner wrote:
2023-03-26, 06:27
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
Lunatic
Lunatic
Posts: 395
Joined: 2014-05-10, 18:19
Location: UK

Re: Use of fetch api in extensions

Unread post by thosrtanner » 2023-03-27, 06:26

Kris_88 wrote:
2023-03-26, 15:13
thosrtanner wrote:
2023-03-26, 06:27
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
Lunatic
Lunatic
Posts: 395
Joined: 2014-05-10, 18:19
Location: UK

Re: Use of fetch api in extensions

Unread post by thosrtanner » 2023-03-27, 06:52

moonbat wrote:
2023-03-26, 06:58
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

User avatar
Kris_88
Keeps coming back
Keeps coming back
Posts: 932
Joined: 2021-01-26, 11:18

Re: Use of fetch api in extensions

Unread post by Kris_88 » 2023-03-27, 06:57

thosrtanner wrote:
2023-03-27, 06:26
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); });

User avatar
Kris_88
Keeps coming back
Keeps coming back
Posts: 932
Joined: 2021-01-26, 11:18

Re: Use of fetch api in extensions

Unread post by Kris_88 » 2023-03-27, 07:06

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
Lunatic
Lunatic
Posts: 395
Joined: 2014-05-10, 18:19
Location: UK

Re: Use of fetch api in extensions

Unread post by thosrtanner » 2023-03-27, 14:18

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.

User avatar
FranklinDM
Add-ons Team
Add-ons Team
Posts: 570
Joined: 2017-01-14, 02:40
Location: Philippines
Contact:

Re: Use of fetch api in extensions

Unread post by FranklinDM » 2023-04-07, 04:13

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.

User avatar
Kris_88
Keeps coming back
Keeps coming back
Posts: 932
Joined: 2021-01-26, 11:18

Re: Use of fetch api in extensions

Unread post by Kris_88 » 2023-04-07, 15:23

FranklinDM wrote:
2023-04-07, 04:13
Components.utils.importGlobalProperties
Thank you!

Locked