A collection of simple browser extensions for learning purposes.
Each browser extension is defined in its own sub-directory. They include:
This is a simple web extension for Chrome using the Manifest v3 API.
See the README in manifest-v3-chrome/.
This is a Firefox web extension that illustrates message passing.
See the README in firefox-message-passing/.
The web is awesome. Web browsers are extremely powerful, and Web APIs are mostly brilliantly documented by the MDN Web Docs. As such, web extensions are a great way to continue to harness the power of the web and do so by mostly re-using web APIs. Unfortunately, there are quite a bit of vendor-specific API differences in browser extensions.
Compare and contrast the browser extension API differences by reading the docs:
- Chrome developer docs: Extensions: Getting started
- MDN Web Docs: Browser Extensions
- Safari developer docs: Safari Web Extensions
- Microsoft Edge documentation: Extension concepts and architecture
Note that there is a brighter future for standardized cross-browser extension development. Read this MDN Web Docs article about it:Building a cross-browser extension .
General clean-ups, TODOs and things I wish to implement for this project:
- DONE How can we include the JavaScript source code to avoid
Uncaught ReferenceError: getHeaderText is not defined? - Look into "browser actions" instead of what I'm doing, which is a custom popup HTML document.
- DONE Add message passing. I think message passing is a pretty important tool in extension design.
Materials that I referenced and found useful while developing this project:
- Chrome developer docs: extensions API Reference
- Content scripts
- chrome.scripting
- Message Passing
- Notably, there are three ways paths for message passing:
- From extension to content script
- From extension to another extension
- From extension to web page
- Notably, there are three ways paths for message passing: