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.

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

  1. Get the files from github.com/llagerlof/fresh-chrome-extension 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)

Let's team up together 🀝

We're hiring for a Senior Full Stack Engineer to join the DEV team. Want the deets? Head here to learn more about who we're looking for.