Awesome

Learning Firefox extensions (Firefox add-ons)

Just one of the things I'm learning. https://github.com/hchiam/learning

Tutorial: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension

An example forked from MDN repo: https://github.com/hchiam/webextensions-examples/tree/master/borderify

Some steps:

Open about:debugging in Firefox.
Click "This Firefox" if that option exists.
"Temporary Extensions": "Load Temporary Add-on..."
Select the .json file.
(If you're running Firefox in incognito, go to about:addons -> "Manage" -> "Run in Private Windows": "Allow")

You might need about:debugging to see Extension ID = GUID for browser_specific_settings.gecko.id in manifest.json, or run JavaScript crypto.randomUUID() to generate a most-likely-unique UUID.

Example Firefox add-on repos:

Note:

This template is old – consider using something like https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/tutorial.hello-world or https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples

Useful links:

about:debugging#/runtime/this-firefox
about:addons
To submit an add-on, you'll need to login to your submissions: https://addons.mozilla.org/developers/addons
Example of sending messages between popup script and content script: https://github.com/hchiam/urlvoid-firefox-extension/commit/b05c5befabf32ac8438cd555082bb42218a72e96

Mobile debugging before deployment:

https://extensionworkshop.com/documentation/develop/getting-started-with-web-ext/

and

https://extensionworkshop.com/documentation/develop/developing-extensions-for-firefox-for-android/

# connect Android mobile device via USB
adb devices
web-ext run --target=firefox-android
web-ext run --target=firefox-android --android-device=...
# a new firefox tab should automatically open

You can now inspect in Firefox with the URL about:debugging on your laptop (e.g. the two I personally found helpful are "Temporary Extensions > Inspect" and "Main Process > Inspect").

Want to create your own Chrome extension?

Used this template repo as a starting point: https://github.com/hchiam/chrome-extension-template