Free course

Browser Extensions Course

Build a secure Manifest V3 browser extension with a popup, extension storage, content scripts, messaging, a service worker, keyboard commands, tests, and a release package.

5 modules · 25 lessons · No signup

Prerequisites: HTML, CSS and JavaScript

Download this course as PDF or EPUB

Read it offline, on your Kindle, or print it. Join my free newsletter and you get this course plus every other book and course I published.

Download PDFDownload EPUB
~~~

Your progress

of lessons completed.

Course completed.

What you'll learn

Build, test, secure, and package Page Notes, a local-first extension that saves and displays a note for the active web page.

Course contents

  1. Extension foundations

    Define the project, create Manifest V3, load it unpacked, and understand its contexts.

    1. ✓ Choose an extension problem
    2. ✓ Create the Manifest V3 file
    3. ✓ Load and reload the unpacked extension
    4. ✓ Understand extension contexts
    5. ✓ Check your understanding: extension foundations

  2. Popup and storage

    Build the popup, identify the active page, and persist and render notes safely.

    1. ✓ Build the popup interface
    2. ✓ Identify the active page
    3. ✓ Save with extension storage
    4. ✓ Load and render safely
    5. ✓ Check your understanding: popup and storage

  3. Content scripts

    Inject on demand, communicate across contexts, and make reversible page changes.

    1. ✓ Run code in the page
    2. ✓ Inject on user action
    3. ✓ Send a message to the content script
    4. ✓ Make page changes reversible
    5. ✓ Check your understanding: content scripts

  4. Service worker and messaging

    Handle browser events, commands, worker lifecycle, contracts, and context debugging.

    1. ✓ Add the extension service worker
    2. ✓ Add a keyboard command
    3. ✓ Design message contracts
    4. ✓ Debug each context
    5. ✓ Check your understanding: service worker and messaging

  5. Secure, test, and publish

    Review permissions and data, protect extension pages, test behavior, and package a release.

    1. ✓ Review permissions and data
    2. ✓ Protect extension pages
    3. ✓ Test the extension
    4. ✓ Package and publish
    5. ✓ Check your understanding: secure, test, and publish