Browser extensions are individual pieces of software that function to extend the capabilities and features of web browsers.

Software model

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. 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. Content scripts are used to inject content into the web page.

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/