Browser extensions are one of the most underrated things a web developer can build. They’re small, useful, and you can ship one fast. Here’s what helped me understand them.
What an extension is made of:
manifest.json: The config file. It defines the name, version, permissions, and which scripts run where (use Manifest V3 for new projects)
Content scripts: JavaScript that runs inside web pages, so you can read or change the page
Background service worker: Handles events and long-running logic behind the scenes
Popup / options page: The UI users see. It’s just HTML, CSS, and JS, and you can build it with React
Storage and messaging APIs: Save user settings and let the different parts talk to each other
Tips for getting started:
Start with a tiny idea, like a button that changes a page’s style or saves a note
Ask only for the permissions you really need. Users and store reviewers care about this
Load your extension unpacked in developer mode to test changes quickly
Use a bundler like Vite if you want React or TypeScript in your popup
Chrome, Edge, and Firefox share most of the WebExtensions API, so one codebase can often cover several browsers
Common mistakes:
Requesting broad permissions “just in case”
Forgetting that service workers in Manifest V3 can shut down, so don’t keep state only in memory
Skipping a clear privacy explanation before publishing
The best part is that you can solve a real problem you have every day, and publish it for others to use.
Have you built a browser extension, or do you have an idea for one?
