Intercepting HTTP requests and saving them for later

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:

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 };

    { 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?

The docs has some nice example of the fetch API:

(look for “headers: {”)

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) => {
    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