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

~~~

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.

Take this course offline

Subscribe to my newsletter to get every free book and course in PDF and EPUB format.

Get the downloads

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