Building browser extensions

Table of Contents

tips etc webext

[A] Apply the Javascript best practices webextjs


  • Flow or Typescript
  • ES6
  • Promise API
  • Fetch API

[B] addons.mozilla.org publishing webextamo

TODO [A] releasing new PUBLIC version on AMO webextamo

CREATED: [2020-04-03]

apparently doesn't work through webext regardless. once it's autosigned, you're screwed??
so to publish on AMO you always have to upload the zip

  • withsecrets ./build –firefox –release –lint
    dump the zip extension
  • choose to upload it AS LISTED on AMO
  • git archive master –output=promnesia-source.zip – upload source

huh. interesting, it seemed to have published instantly…

  • [2020-05-19] and again, published immediately… odd!

TODO [B] [2019-08-18] fregante/Awesome-WebExtensions: A curated list of awesome resources for WebExtensions development. webextpromnesiagrasp

Chrome Webstore Upload - Upload the extension to the Chrome Web Store via cli (or on Travis, automatically).

[2019-09-02] https://github.com/LinusU/wext-shipit this works also for firefox? webextpromnesiagraspfirefox

TODO [C] [2019-08-18] use sinon-chrome? Mocks the Chrome Extensions API for testing webextgrasppromnesia

STRT [B] [2019-08-28] Working with quota on mobile browsers: A research report on browser storage - HTML5 Rocks webexthtml

[2019-09-07] To do this research, I have built a tool called Browser Storage Abuser to minimize the manual work. You can store as much data as possible to see the limit of each storage on your browser. webexthtml

[2019-09-07] Android firefox: For IndexedDB, you can use up to 50MB on desktop, 5MB on mobile for free. However, the user can allow the limit to be removed by granting permission. webexthtml

DONE [C] [2019-05-01] telotortium/org-capture-extension at native-messaging-host webext


Native Messaging Host
This is a version of the Org Capture Extension using the Chrome Native Messaging host

[2019-08-10] hmm firefox also got it? webext

[2020-02-15] ok, seems tricky, and apparently requires installing via OS webext

TODO [C] [2019-09-08] fregante/webext-options-sync: Helps you manage and autosave your extension's options. Chrome and Firefox. webextpromnesiagrasp

webext-domain-permission-toggle -

TODO [C] [2019-08-29] javascript - Chrome messaging: chrome.runtime.sendMessage not working on the newest release 49 - Stack Overflow webext

This is the intended behaviour. Messages were not supposed to be received by the sending page. The old behaviour was a bug. This is discussed in these bug reports: 479425 479951.

TODO [C] browseraction impacts presense of menu item on android.. webext

CREATED: [2019-09-08]

[C] [2019-10-27] Re: [fregante/webext-options-sync] feat: optionally use chrome.storage.local (#19) - karlicoss@gmail.com - Gmail webext

I'd rather not offer this option because I think cross-device sync is always preferable from the user's point of view, but I'm willing to add this for extensions with options that are meant to be local (e.g. a port number)
PR welcome, documentation included.

TODO [C] [2019-09-08] let the user decide what storage type shall be used by obama · Pull Request #8 · fregante/webext-options-sync webext

DONE [B] [2019-09-08] notlmn/browser-extension-template: Barebones boilerplate with webpack, options handler and auto-publishing webextgrasp


    Use modern Promise-based browser.* APIs webextension-polyfill.
    Auto-syncing options.
    Auto-publishing with auto-versioning and support for manual releases.
    Extensive configuration documentation.

[2020-02-08] Discontinuing support for beta versions | Mozilla Add-ons Blog webext

AMO supports signing self-hosted (unlisted) versions, which we believe is a good replacement. With self-hosted versions, developers can create multiple development update channels if needed. They can easily move users between channels. The main caveat is that the files and update mechanisms need to be hosted by the developer

[2020-02-15] How to add comments to package.json? - DEV Community 👩‍💻👨‍💻 webexttoblog

How to add comments to package.json?

TODO [C] [2020-02-15] xo - npm webext

Opinionated but configurable ESLint wrapper with lots of goodies included. Enforces strict and readable code. Never discuss code style on a pull request again! No decision-making. No .eslintrc or .jshintrc to manage. It just works!

[2020-02-15] browser-extension-template/options-storage.js at master · notlmn/browser-extension-template webext

import OptionsSync from 'webext-options-sync';

TODO [C] [2020-02-15] notlmn/browser-extension-template: Barebones boilerplate with webpack, options handler and auto-publishing webext

Target respective browsers using .babelrc.

[C] [2020-02-15] DrewML/chrome-webstore-upload-cli: Upload/Publish Chrome Web Store extensions from the CLI webext

  • comment
guide for publishing on chrome store

[C] [2020-02-21] Choosing a browser to write extensions for | Lobsters webext

Thanks for the advice! I was actually inspired to go down this route by seeing the things you’ve been building. I think my interests are similar, but not quite the same.
There are two main extensions I want to build. First, a way to archive and mark up webpages. There is a Chrome extension called Weava that does something similar, but it’s SaaS and I doesn’t seem to have a convenient export format.
Second, I would like better history tools. In particular, often have the problem that I read an article or page and want to link to it in a blog post (or similar), but I’ve forgotten how I found it. I’d like an extension that can maintain “chains” of followed links so that I can always look up how I found something.
I’m happy to get in touch and consider collaborating if you’re interested.

[B] [2020-02-18] mozilla/web-ext: A command line tool to help build, run, and test web extensions webext

Hi! This tool is under active development. To get involved you can watch the repo, file issues, create pull requests, or ask a question on dev-addons

[B] [2020-02-18] Add `web-ext submit` to submit listed add-ons to AMO · Issue #804 · mozilla/web-ext webext

web-ext submit would submit to amo only. If you want the zip you can already use web-ext build

[B] [2018-11-08] Shraymonks/flow-interfaces-chrome: Flow interface declarations for the Chrome extensions API webextjsflow


npm install --save-dev flow-interfaces-chrome

[D] [2020-02-17] Introducing Prism: An awesome new syntax highlighter | Lea Verou webext

TODO chrome got far better profiling, better debugging information + screenshots webext

CREATED: [2020-03-22]

TODO ugh, can't force webpack/chrome into using date in the version… webext

[2020-04-05] roam-toolkit/webpack.config.js at master · roam-unofficial/roam-toolkit webext

new webpack.DefinePlugin({
			'NODE_ENV': JSON.stringify(nodeEnv),
			'WEB_BROWSER': JSON.stringify(webBrowser),
  • comment
hmm wonder if this is useful?

[2018-03-29] how webext works? webext

background runs all the time. communicate with extension via message passing. TODO runtimehandlers?
content scripts have no access to background
make sure you return false at the end

logging webext

from content page, console.log goes to the page console, whereas from the rest to background.html

TODO [C] [2020-11-04] softvar/awesome-web-storage: Everything you need to know about Client-side Storage. webextjs

[C] [2020-05-14] Let's guess what Google requires in 14 days or they kill our extension | Hacker News webext

In practice I was able to use native messaging to spawn the executable but to actually talk with it I needed to use a websocket, kind of defeating the point.

TODO for fucks sake. releasing even without 'unlisted' channel doesn't make it automatically submitted for manual review??? webext

CREATED: [2020-04-03]

[2020-02-15] ok, first time you need to create manually; after that, get the id (it's public, so ok to put in a git repo) and use it with the build script webext

[2020-05-17] listed vs unlisted webext

so according to this https://blog.mozilla.org/addons/2017/01/26/mixing-listed-and-unlisted-on-amo , you can have mixed self distributed/AMO with the same extension id, but not the same version
so adding –unlisted is a reasonable way to beta test
the only confusing bit is why it is still queueing for reviews??

DONE [B] ugh why did I end up with several versions of grasp on AMO?? webext

CREATED: [2020-02-08]

it feels that signing is enough to upload. next time try waiting for a bit..

[C] [2020-05-24] Manage Events with Background Scripts - Google Chrome webext

The only occasion to keep a background script persistently active is if the extension uses chrome.webRequest API to block or modify network requests. The webRequest API is incompatible with non-persistent background pages.

[C] [2020-05-13] Let's guess what Google requires in 14 days or they kill our extension | Hacker News webextgoogle

[C] [2019-07-07] client/security.rst at 734e3a25318364819a8c38ef881e4788a2b06365 · hypothesis/client webextsecurity

[2019-08-04] For example: in order to draw highlights, the annotated page needs to know the location of annotations, but it does not ever need to know the body text of an an annotation, and so it should not be possible to expose this over the messaging interface. webextsecurity

TODO [B] [2020-11-09] Web Developer's Toolbox – Add-ons for Firefox (en-GB) webext

[B] android debugging webext

CREATED: [2019-06-12]

web-ext run --target=firefox-android --android-device=XXXX

[C] [2019-02-16] Creating a Chrome extension in 2018: The good, the bad and the meh | Checkly webext

[2019-08-10] basic intro with examples of testing and explaining the extensions architecture webext

TODO [D] [2019-06-01] Creating a Chrome extension in 2018: The good, the bad and the meh webextgrasp


// boots a Chrome instance using Puppeteer and adds the extension we build in the earlier test
  test('it installs the extension', async () => {
    const options = {

[C] [2019-06-29] Using Firefox WebExtensions with Selenium webext

nice, this guy contributed to selenium?

TODO [C] [2019-06-29] Standard8/example-webextension: Example repository containing templates and good practices for creating a WebExtension for Firefox webext


Example repository containing templates and good practices for creating a WebExtension for Firefox

[C] [2019-07-08] GUI and Headless Browser Testing - Travis CI webextci


Using the Firefox addon in headless mode #

Starting with version 56, Firefox can be used in “headless” mode, which is suitable for driving browser-based tests using Selenium and other tools. Headless mode can be enabled using the MOZ_HEADLESS environment variable:

  firefox: latest

[C] [2019-06-12] Getting started with web-ext - Mozilla | MDN webext

[2019-08-10] web-ext is a nice tool for signing, linting and even simple browser testing (e.g. web-ext run) webext

[C] [2019-06-12] Extensions in Firefox 66 | Mozilla Add-ons Blog webext


Firefox no longer emits a warning when the manifest property `background.persistent` is set to `true`.

[C] [2019-06-12] commands.update() - Mozilla | MDN webext

[C] [2019-06-12] 1475043 - Allow commands.update() to un-set a shortcut, disabling the command webext

[C] [2019-06-12] Differences between desktop and Android extensions - Mozilla | MDN webext

[C] [2019-06-12] 1520119 - Support removing a shortcut in manage shortcuts webext

[C] [2019-06-12] Debugging Firefox for Android over WiFi - Firefox Developer Tools | MDN webext


The computer with desktop Firefox and your Android device must be connected to the same Wi-Fi network. Desktop Firefox cannot be using a wired connection that routes to the Wi-Fi network; both must truly be on Wi-Fi.

[C] [2019-06-12] Developing extensions for Firefox for Android - Mozilla | MDN webext

[2019-08-10] need to open browser on android prior to running web-ext command! webext

[C] [2019-06-12] Setting up an extension development environment - Archive of obsolete content | MDN webext

[D] [2019-07-07] javascript - How to make side panel in chrome extension? - Stack Overflow webext

[D] [2019-06-01] Extensionizr - boilerplate for your chrome extension webext


[D] [2019-06-01] Creating a history clearing Chrome extension | Jake Lee webext

[2019-08-10] pretty simple guide webext

[D] [2019-06-13] what is the state of add-on/extensions development for firefox? : firefox webext


I think you're supposed to call "browser.*" and I would not be surprised if calling "chrome.*" gets deprecated on the long term)

[2020-12-07] Webext special commands webext

_executebrowseraction: works like a click on the extension's browser action.
_executepageaction: works like a click on the extension's page action.
_executesidebaraction: opens the extension's sidebar. Only supported in Firefox 54 and newer.

[2020-11-09] Element | Malleable Systems Collective webext

Ohh thanks! I thought the 'browser console' was just a log at first, apparently you have to enable devtools.chrome.enabled in about:config first for the terminal to show up!

TODO [C] [2019-09-22] javascript - Chrome extension - page update twice then removed on YouTube - Stack Overflow webextpromnesia

[2020-05-05] wildcard/chrome-autoreload.js at master · geoffreylitt/wildcard webext

[C] [2019-12-09] Request the right permissions | Extension Workshop webext


A good example of this approach is Gesturefy, which offers users the following advice:

[C] [2020-07-28] Mozilla Add-ons Blog webext

[2020-05-05] feat: Added option to `–watch-file` to address eager reloading by jezhou · Pull Request #1784 · mozilla/web-ext webext

[C] [2020-05-24] Understanding Google Chrome Extensions webext

DONE [C] [2019-08-29] Implement a settings page - Mozilla | MDN webext


You can also open this page programmatically using the runtime.openOptionsPage() function.

[2019-04-21] When to use margin vs padding in CSS - Stack Overflow webextcss


To me, the biggest difference between padding and margin is that vertical margins auto-collapse, and padding doesn't.

TODO [2019-05-13] {margins} collapse {paddings} dont webextcssdrill

[2019-10-27] mnemonic is alphabetic order? dunno. webextdrillcss

TODO [2019-05-13] this is also a good example for drill webextcssspacedreptoblog

DONE [B] js library for chrome settings, too annoying to bind them manually.. webextpromnesiagrasp

CREATED: [2019-04-21]

[2019-08-24] found something the other day; must be in links webextpromnesiagrasp

[2019-11-19] [Question] How to set cors headers? · Issue #308 · http-party/http-server webextcors

fucking hell, why is that shit so hard???

[2019-11-18] python - Enable access control on simple HTTP server - Stack Overflow webextcors


@HairOfTheDog The SimpleHTTPRequestHandler doesn’t support the OPTIONS HTTP method. You could add it if you want (read the Python manual about HTTP servers); or you could just not try to access the server like that.

TODO right, set up logins in about:profiles .after that it gets cloned webext

CREATED: [2020-03-28]

[2019-06-13] fuck. looks like firefox doesn't allow persistent dev extensions, that really sucks. and unbranded version doesn't have PPA? wtf? how are developers supposed to test their stuff webextfirefox

[2019-08-31] uBlock/manifest.json at 6c34b3c3c96756b6db7ff2f3a0394472d81cde3e · gorhill/uBlock webext

DONE [2019-09-01] keepassxc-browser/manifest.json at develop · keepassxreboot/keepassxc-browser webext


"options_ui": {
    "page": "options/options.html",
    "open_in_tab": true

[C] [2020-11-15] Content scripts - Mozilla | MDN webext

[C] [2020-10-19] 1309288 - Install addons permanently from about:debugging webext

[C] [2020-11-10] In Chrome Extension development, how do I pass a variable from background.js to a content script that embedded as a script node? - Stack Overflow webext

getBackgroundPage returns the JavaScript 'window' object for the background page running inside the current extension and not in the content script.

[C] [2020-11-10] Chrome extension: message from background.js to content.js - Stack Overflow webext

chrome.runtime.sendMessage sends a message to all open extension pages (i.e. background, popup, etc.)
chrome.tabs.sendMessage sends a message to all content scripts from the extension in a given tab (possibly filtered by frame ID)

TODO [A] What I learned about writing web extensions webextblog

[B] there is an incredible lack of documentation for building web extensions and the best practices webextblog

CREATED: [2020-05-02]

combining it with npm/webpack weirdness and kind of slow feedback loop (reloading etc, it makes it very hard)

TODO [D] 1. Use JS Flow 2. Use async. I mean, seriously. webextblogjs

CREATED: [2019-08-06]

[2019-09-29] could link that stackoverflow post and replace typescript advice with flow? webextblogjs

[C] structure my post like webextblogtoblog

CREATED: [2020-05-02]
  • what is very hard or broken
  • what it's ought to be?
  • how I fixed it in the meantime

TODO [D] developing firefox/chrome extensions? webextblog

CREATED: [2019-06-29]

TODO [C] post about testing grasp? webextblogtesting

CREATED: [2019-06-29]

TODO [D] [2020-01-25] [h-dev] Abridged summary of dev@list.hypothes.is - 1 update in 1 topic webext

I think that it works last I checked! There is only a need to get the build
infrastructure working and have an owner on addons.mozilla.org, and for
Mozilla to approve it.

[D] [2019-12-09] Add `web-ext submit` to submit listed add-ons to AMO · Issue #804 · mozilla/web-ext https://github.com/mozilla/web-ext/issues/804 webext

Automate all the things! wink Here people discussed the Chrome Web Store version, but it also applies to AMO sindresorhus/module-requests#66

[D] [2020-04-22] Publish Firefox extension on addons.mozilla.org · Issue #310 · hypothesis/browser-extension webext

I know it's not perfect and I would also like to see a Firefox addon, but some friends and I have been using Hypothesis seamlessly in Firefox, both for desktop and for mobile, following the instructions I posted here: https://medium.com/@delahera/hypothesis-web-annotation-mobile-358db1f9ec46

[D] [2020-11-09] A-C: WebExtensions and AddOns webext

[B] [2021-03-12] Mozilla is a political organisation now. Has been for a few years. Install kiwi… | Hacker News webextfirefox

Install kiwi on Android for extension enabled Chromium.
Jump to search, settings & sitemap