Differences between locally loaded vs. store-installed extensions

There are minor, but often important differences between temporary loaded browser extensions and extensions, which have been installed via the Chrome webstore/Mozilla Addon store. These can be tricky to debug, as they appear only in limited circumstances. Here is a list of differences, I've been identifying while developing my browser add-ons:

Chrome and SVG icons aren't going well together

Chrome, SVG, Happens-only-on-Webstore

With the public release of the first version of my extension, I've noticed that some people got a notification on install "Could not decode image: 'icon.svg'". My first attempt to resolve this was naturally ensuring the SVG is valid and it contains a valid XML-tag <?xml version="1.0" encoding="UTF-8"?> at the beginning. This wasn't successful, unfortunately. Chrome just doesn't seem to like SVG icons. I decided to resolve the issue by replacing the SVG icon with a PNG image instead. The SVG images can easily be converted using a free online service like svgtopng.com. After replacing and awaiting the review by the Chrome team the issue was finally resolved.

Firefox Storage API locally vs. in production

Firefox, Storage API, Happens-locally-loaded

The storage API might not work as you intended when installing the extension temporarily. On restart of Firefox and reinstalling your temporary extension, Firefox will assign your addon a new ID (identifier). This unique identifier is used to namespace the local and sync storage. Result of the change is, your storage clearing itself without any obvious reason. The only hint is in hidden away the console of the background JS. There you might find the following message:

Error: "The storage API will not work with a temporary addon ID. Please add an explicit addon ID to your manifest. For more information see https://bugzil.la/1323228."

Reading through the bug report hinted on how to resolve this issue. It can be resolved by adding the following keys to your manifest.json:

"applications": {
  "gecko": {
    "id": "whichlogin@peterthaleikis",
    "strict_min_version": "53.0"
  }
},

The "id" can either be either an

• an email address,
• a string like project@yourname or
• a UUID.

Make sure to avoid real or catch-all email addresses as you might make yourself a target for spammers. Adding the "applications" key will lead to a warning issued by Chrome Unrecognized manifest key 'applications'. Preassumbly this warning can be ignored.

Found more problems? Please reach out!

I'll extend this list as I discover new differences to help other browser extension developers out 🙏️ If this article helped you please consider sharing it on Twitter. Have you found another difference and would like to add it? Shout out on Twitter or Telegram (see contact) and I'll add it in 👍️