DEV Community

Lawrence Lagerlof
Lawrence Lagerlof

Posted on

Chrome Extension boilerplate (Manifest V3)

The goal

This boilerplate extension can be used for devs as a starting point for creating your own extensions.


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.


  1. Get the files from and put them inside some directory.
  2. Open the browser extension page: chrome://extensions
  3. Check the developer mode on top right.
  4. Click Load Unpacked and select the extension directory.

How to test it

  1. Open any website.
  2. 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.
  3. 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).

Screenshot do console quando a extensão é usada.

Have fun.

Top comments (0)