Let's Code A Webextension

Collection of material for a web extension workshop

Example 1: Vanilla

Only essential files like content script and popup, no build step required

A bit harder to extend functionality using npm packages

Example 2: Vite React

Full React App with Vite

HMR limited by Manifest V3 CSP and Chrome Bugs

Based on @samrum/vite-plugin-web-extension

Ideas For Your Own Extension

• Word Replacer
• Image Manipulation
• Custom Animations
• Auto decline Cookies
• Form Autofill Helper
• Code Syntax Highlighting

Links

Firefox

• Extension Workshop
• Debugging
• Your First Webextension
• Manifest V3 (Preview still incompatible with Chrome MV3)

Chrome

• Getting Started
• Manifest V3
• Debugging