Intercepting HTTP requests and saving them for later

Add-ons Development
#1

Please let me know if these are too basic of questions for this forum (first timer here). I would be happy to migrate to a more appropriate place if you point me in the right direction.

I am following some of the strategies outlined in the following page: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests

My objective is to block a particular time consuming GET request but save the headers for later use with the fetch API. Essentially, I want to replace that request with a cached version saved to perhaps localstorage. I can then create a button to manually refresh my localstorage data when necessary.

I successfully block the request I am interested in and I am able to save the details object passed to my listener function into a global variable (including headers). What would be the best way to use the information in details to create an appropriate fetch call?

Some sample code in my background script:

var globalHeaders

function cancelPeopleRetrieve (requestDetails) {
    globalHeaders = requestDetails;
    return { cancel: true };
}

browser.webRequest.onBeforeSendHeaders.addListener(
    cancelPeopleRetrieve,
    { urls: [endpoint] },
    ["blocking", "requestHeaders"]
);

What is the best way to use globalHeaders to create a proper fetch call? Is just building the thing manually the most straightforward and easy thing to do?

#2

The docs has some nice example of the fetch API:


(look for “headers: {”)
#3

Thank you!

In that case, I have settled for something like this:

async function fetchPeople(details) {
    let headers = {}
    // cycle through all headers to create an appropriate object
    details.requestHeaders.forEach((header) => {
	headers[header.name]=header.value;
    });
    
    response = await fetch(retrievepeopleurl, {
	"credentials": "include",
	"headers": headers,
	"referrer": referrer,
	"method": "GET",
	"mode": "cors"	
    });

    return await response.json();
}

Is this the way to go? Seems to work fine. Thanks for the pointer!

1 Like