WebExtensions questions -- options and loading content scripts dynamically

Add-ons Development
1

I am starting out with WebExtensions and have a few questions. My first attempt at a WebExtension is at https://github.com/willsALMANJ/page_keys. It creates a keyboard shortcut (for a url regular expression that can be set as an option) that logs a message to the console. Here are my questions related to it:

  1. I load the content script by using a chrome.tabs.onUpdated listener and chrome.tabs.executeScript call for matching urls in background.js. Is this the right way? Because I want to be able to set the url as a preference, I can’t set the content_script url in manifest.json. It doesn’t seem like I can regiester the listener for only certain pages.

  2. I check for my urlmatch option and set it to the default value at the top of background.js. Is this the best way? In a Firefox addon, I would create a preference with a default value but it seems like WebExtensions don’t have anything like this.

  3. Right now I am using the “tabs”, <all_urls>, and “storage” permissions. Could the addon work with less broad permissions?

  4. Is there a way to view and manipulate a WebExtension’s options/storage in Firefox (outside adding debugging statements to the add-on)? With an old Firefox addon, I would use about:config.

2

  1. Seems about right. The other way would be to attach to all sites and back out if they shouldn’t be included. That’s a design choice.

  2. Yes, WebExtensions don’t have an explicit options framework like the sdk’s SimplePrefs. You have to build that yourself. I have implemented a quite powerfull options framework myself. It is still undocumented though: https://github.com/NiklasGollenstede/web-ext-utils
    A basic example use: https://github.com/NiklasGollenstede/wikipedia-peek
    Advanced use: https://github.com/NiklasGollenstede/stop-fingerprinting

  3. Nope.

  4. The beauty of WebExtensions is that they work in Chrome (and Opera) too. Currently the debugging support for WebExtensions is better in those browsers (Firefox is catching up though).
    running chrome.storage.local.get(null, s => console.log(s)) in the background script inspector (of any browser) will give you the current storage.

1 Like