Return value from a promise

[Boonie]

I’m trying to get some values from local storage but I can’t figure out how to return a value from a promise. I would like to have the storage getter inside a function so I can call it when needed, everything I try results in a pending state from the promise. I tried using resolve but I’m not sure if it works like this.

function getter() {
	var get = browser.storage.local.get().then(storage => {
		resolve(storage);
	}, onError);
	return get;
}

console.log(getter());

[NilkasG (Niklas Gollenstede)]

I think I explained this quite well here:

Chrome.storage.local is undefined in Firefox

Neither chrome.storage.local.get(…) nor browser.storage.local.get(…) return any data. Both accept a callback as the last parameter and will asynchronously pass their data as an argument to that callback. With browser.storage.local.get(…) you can omit the callback because it also returns a Promise. Promises are special ES6 language objects. Semantically they promise that some value will be avaiable in the future. There are two ways to get that future value: calling .then(…) on the pro…

[Boonie]

Is there any reason this does not work? The promise has been resolved successfully and is pushed to the responseHeaders array, but it does not get applied to the website for some reason.

function setHeader(h) {
	var setH = new Promise((resolve, reject) => {
		h.responseHeaders.push({
			name: 'Set-Cookie',
			value: "test=123"
		});
		resolve({responseHeaders: h.responseHeaders});
	});
	
	setH.then(value => {
		console.log(value);
	}, reason => {
		console.log(reason);
	});
	
	return setH;
}

browser.webRequest.onHeadersReceived.addListener(details => {
		browser.storage.local.get(null, storage => {
			setHeader(details);
		});
	}, {
		urls: ['*://test.com/*'],
		types: ['main_frame']
	},
	['blocking', 'responseHeaders']
);

[NilkasG (Niklas Gollenstede)]

You are not returning anything from the onHeadersReceived listener.

You are doing this way to complicated. This should work:

browser.webRequest.onHeadersReceived.addListener(
	details => {
		// this is *very* bad for performance
		const storage = await browser.storage.local.get(null);
		
		details.responseHeaders.push({
			name: 'Set-Cookie',
			value: "test=123"
		});
		return {responseHeaders: details.responseHeaders};
	}, {
		urls: ['*://test.com/*'],
		types: ['main_frame']
	},
	['blocking', 'responseHeaders']
);

If you want to report errors, use a try-catch block and console.error().

[Boonie]

Ah I see now, was defiantly overthinking it.

I see you added that comment, I knew that it is going to be bad for performance since it is calling on every headerReceived. I am calling the local storage to get an array of url’s to check against. Is there any way to make it less resource intensive?

This is currently what I am doing, and I know its really bad.

	    await browser.storage.local.get(null).then(checkSettings);
const get = await browser.storage.local.get(null);

[NilkasG (Niklas Gollenstede)]

You can create an auto-updating local copy of the storage contents. If you put more stuff in the storage, you should restrict the keys in your copy:

(async () => {

const storage = await browser.storage.local.get(null);
browser.storage.onChanged.addListener((changes, area) => {
	if (area !== 'local') { return; }
	Object.entries(changes).forEach(([ key, { newValue, }, ]) => {
		if (newValue === undefined) {
			delete storage[key];
		} else {
			storage[key];
		}
	});
});

browser.webRequest.onHeadersReceived.addListener(
	details => {
		// use storage
		
	}, ...
);

})();

[Boonie]

Late replay, but thanks, it works.

Only thing I had to fix was you forgot to set the new storage key value. Easy fix for anyone that comes across this.

 storage[key] = newValue