DEV Community

Lawrence Lagerlof
Lawrence Lagerlof

Posted on

9

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.

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more