FireFox issue

Add-ons Development
1

Hello,

I have created application that is written with pure html, css and javascript.

The application works great on all chromium based browsers and as browser extension for chromium based browser and even works as FireFox extension (Add-on), but the same code as a website does not work on a FireFox.

There isn’t any error displayed in a console on any browser.

Summary:

  • Website in FireFox based browsers (DOES NOT WORK)
  • Add-on in FireFox based browsers (WORKS)
  • Website in Chromium based browsers (WORKS)
  • Browser extension in Chromium based browsers (WORKS)

Code is the same everywhere.

Link to an already hosted website: https://passky.org

Self hosted website: https://github.com/Rabbit-Company/Passky-Website
This works on chromium based browser, but doesn’t on FireFox.

Self hosted browser extension: https://github.com/Rabbit-Company/Passky-Browser-Extension
Browser extension has the same code as website has. It works on both Chromium based browsers and also FireFox based browsers. Which is really strange as same code works as FireFox add-ons, but it doesn’t as website.

2

Any relevant errors in the Web Console?

https://developer.mozilla.org/docs/Tools/Web_Console/

3

I think that problem is here: https://github.com/Rabbit-Company/Passky-Website/blob/main/js/header.js#L33 with const initStorageCache. This is what chrome suggested to use.

And than in other pages it must wait until all data are saved to storage.
https://github.com/Rabbit-Company/Passky-Website/blob/main/js/settings.js#L1

Which doesn’t seem for FireFox to do that.

4

I have used Asynchronous preload storage from here: https://developer.chrome.com/docs/extensions/reference/storage/#asynchronous-preload-from-storage

But it doesn’t seems to work on FireFox browsers. Like it does work on FireFox as add-on, but as website it doesn’t.

5

Do you mean you want to use objects/methods/functions in the chrome namespace in web content? I didn’t realize that worked in any browser – as far as I know, it should be accessible only to extensions.

6

I have put try catch there. So if chrome namespace would return an error it would use localStorage by default.

function readData(key){
    try{
        chrome.storage.local.get([key], function(result) {
            storageData[key] = result[key];
        });
    }catch{
        storageData[key] = localStorage.getItem(key);
    }
    return storageData[key];
}

I use the same code as browser extension and as website. So it should use chrome namespace when it’s available (Browser extension) and if it isn’t it should provide an error which would be handled by catch and than use localStorage instead. This works on Chromium based browsers, but it doesn’t seems to work on FireFox.

Edited:
I have tested that and It’s working like expected:

image
image1227×250 36.6 KB

7

It seems that localStorage isn’t shared between different pages with my code. But when I come to the previous page localStorage works.

Edited:
It feels like it’s linked only to one page. Like every different page has it’s own localStorage.

8

That’s a good point, catch should work. You said the error was indicated as occurring on line 33. If I run this test code in the console, I do not get an error:

var storageData = {};

// Line 33:
const initStorageCache = getAllStorageData().then(items => {
	Object.assign(storageData, items);
	//setTheme();
});

function getAllStorageData() {
	return new Promise((resolve, reject) => {
		try{
			chrome.storage.local.get(null, (items) => {
				if (chrome.runtime.lastError) return reject(chrome.runtime.lastError);
				resolve(items);
			});
		}catch{
			resolve({ ...localStorage });
		}
	});
}

// TEST:
initStorageCache.then(()=>{console.log('Done!')});

What was the error message?

9

Yes I didn’t get any error this time either. As you can see in the video localStorage is different if I access it from index.html vs from register.html. This shouldn’t happen.

Edited:
Here is the video: https://youtu.be/kjQVVmfOj4o
LocalStorage should be the same on every page.

10

Oh, in the video, you are testing on file:/// where there are extra security restrictions. Can you host the page on http:// or https:// and test again?

If not, or temporarily, you could try relaxing the security restriction referenced in the following thread (privacy.file_unique_origin):

https://support.mozilla.org/en-US/questions/1315943#answer-1371771

11

Thank you so much for your help. I have tested it now on website hosted from my home (localhost) and everything worked perfectly fine. The problem was in cache as javaScript files didn’t changed when I have updated the website.

Video: https://youtu.be/7-1lrsq8zn8

Problem was solved when I have removed the cache. FireFox should add some kind of protection from that to even happen. For example it should open website from cache but when everything would be loaded it should also send request to fetch files from server in the background and compare hashes from cached files and newly fetched files from cache. And if hashes wouldn’t match than it should notify user that cached version of website is old and if you like to replace cached files with new ones.

The problem here was that some javascript files in cache was from newer Passky version and some of them was from old one (Don’t know how that did happen), so there was a problem as some javascript code was from new Passky version and some from old ones.

I hope that this makes sense as I’m really not good at English.

Thank you again for all your help. I really appreciate that.

12

This would utterly defeat the point of caching, namely not downloading the files (granted the first load would still be faster). You can solve these issues by keeping the devtools open (that disables caching by default), or by versioning your js files. The first is suited for testing in development, the latter is suited for production.