Skip to content

Port to Web Extensions

Eric Bixby edited this page Apr 1, 2022 · 1 revision

Objective

The intent of this page is to capture my notes, design decisions, and miscellany for the task of porting the auto-sort-bookmarks add-on from using the Mozilla add-on API to the Chrome Web Extensions API.

Because Palemoon does not currently plan to switch to Web Extensions, this add-on will need to be forked. The main fork will migrate to Web Extensions and the new fork (ASB-PM) will support Palemoon exclusively.

The "embedded" feature will be used to migrate settings stored using the Mozilla API to Web Extension. This means a minor release of the add-on will be needed that will migrate settings from the old storage location to the new location. Otherwise, users will just need to use the default settings from the Web Extension version of the add-on.

I found a tool called 'weh', which stands for Web Extension Helper (WEH). It's available via NPM. It's a tool and kind-of-framework. This helps with creating add-ons for Firefox, Chrome, Edge, and Opera. However, Edge doesn't support the bookmarks API so there's no point supporting Edge. WEH will be used for handling preferences. Angular will be used for the user interface (UI).

Before, "main" in "package.json" determined the starting point. Then require/import statements were used to load additional code. Now, "background" in "manifest.json" loads all the code.

weh Preferences storage

background/weh-bg-prefs.js:        var prefsStr = localStorage.getItem("weh-prefs");
background/weh-bg-prefs.js:            localStorage.setItem("weh-prefs", prefsStr);

content/popup.html:<script src="weh-prefs.js"></script>
content/settings.html:<script src="weh-prefs.js"></script>

View Preferences

old way

  • Enter "about:config" into addressbar; filter by "extensions.[addon-id]"

new way

MacOS:

~/Library/Application Support/Firefox/Profiles/*/browser-extension-data/[addon-id]/storage.js

Chrome:

  1. Window -> Extensions
  2. Inspect view: background page
  3. Application tab
  4. Storage -> Local Storage

manifest.json

  • "application" needed for firefox, not supported by chrome.
  • "version_name" supported by chrome, not supported by firefox.