Browser Extension Development

#stub

Resources for developing a browser extensions

Intro

• Making extensions is different for
  • Firefox, Safari, Chromium based browsers (luckily Edge is entering this ecoysystem soon)
• Some chrome based extensions work on Chromium-based mobile browsers, e.g. Yandex / Dolphin, depending on which APIs they us

Suggested baseline

1. Fastest way to start: Extensionizr, or fork a similar extension. Use Parcel or snowpack for low-config bundling.
2. If more involved, fork a boilerplate:

• Browse a list like https://github.com/fregante/Awesome-WebExtensions
• React, typescript, hot-reloading, prettier, basic JS project quality of life features

Boilerplates used in the past

(Update in 2021 next time I ship something, check w/ Abe to see what he used for "You are here")

• https://github.com/notlmn/browser-extension-template
• https://github.com/jhen0409/react-chrome-extension-boilerplate
• https://smellycode.com/chrome-extension-live-reloading-with-react/

Prior work

• TODO: add as section to Archived Projects

• Topology layout explorer (based on redux devtools x cytoscape)

  • Modified from source code of reselect devtools (found while writing code maps talk)
  • In turn, forked from redux devtools: https://github.com/reduxjs/redux-devtools

• Local Demos

  • Login to sites / sidecar in Electron
  • Web scraping visual assistance (Kimono Labs / Parsehub)

Future sections

• Actively maintained OSS extensions for reference
• https://twitter.com/sindresorhus/status/1249580426579939330
• Stub a similar page for electron apps
• Reference a guide that ended up being useful + link to what was built with its guidance