Chrome Extension boilerplate (Manifest V3)
Lawrence Lagerlof
Posted on August 9, 2021
The goal
This boilerplate extension can be used for devs as a starting point for creating your own extensions.
Features
Once installed it observes the 3 most common events: Before the page load, after page load, and clicking the extension button on the browser top bar.
For each event it writes a message on DevTools console (press F12 to see it).
The manifest
is configured to work on every https and http page, but is up to you to define your own.
Installation
- Get the files from github.com/llagerlof/fresh-chrome-extension and put them inside some directory.
- Open the browser extension page: chrome://extensions
- Check the developer mode on top right.
- Click
Load Unpacked
and select the extension directory.
How to test it
- Open any website.
- Open developer tools and look at the console. You will see 2 messages. One message was written before page load, the other was written after page load.
- Click the extension button on browser top bar and watch the console. A third message will be written (don't forget that new extensions are hidden inside the Chrome "puzzle" button, on top right).
Have fun.
💖 💪 🙅 🚩
Lawrence Lagerlof
Posted on August 9, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.