Browser extensions are individual pieces of software that function to extend the capabilities and features of web browsers.
Anatomy
At a high level, each extension runs independently of the tabs. They usually have their own JavaScript runtimes and user interfaces (usually for options pages). We can connect to the broader browser with some supported APIs, which lets us understand what’s going on right now.
In general, we should divide our JavaScript into a few types of scripts.
- Background scripts should be used to handle browser events. They execute in the extension’s own environment.
- Content scripts are used to inject content into the web page. They execute in the context of web pages.
The popup page is used when the user presses the icon on the toolbar. The options page is used in the browser’s extension options.
The anatomy of a browser extension is specified in a manifest.json file. The modern, idiomatic way to build browser extensions on both Firefox and Chromium is by using Manifest v3.
Key ideas
Resources
- Building Browser Extensions, by Matt Frisbie
https://www.geoffreylitt.com/2023/01/08/for-your-next-side-project-make-a-browser-extension.html https://github.com/lxieyang/chrome-extension-boilerplate-react
https://areknawo.com/modern-web-extension-development-with-typescript/ https://saeedesmaili.com/getting-started-with-developing-browser-extensions/
https://github.com/KevinPayravi/indie-wiki-buddy https://github.com/Nearcyan/BlueRaven https://github.com/lawfx/YoutubeNonStop https://github.com/wseagar/eight-dollars https://github.com/fuddl/wd