How to Start Developing Browser Extensions

2 min read

While developing browser extensions uses frontend technologies, the APIs and working methods are different from web pages, so using development frameworks can significantly improve efficiency. Browser extension development is still a niche field compared to web and app development, and the developer community is noticeably less active. Fortunately, all the necessary development tools are available. Here's a summary of what I've used.

Now all major browsers follow a unified standard for extension development: manifest v3, so the development process and tech stack are similar. There might be some differences in details, which I'll note where I've encountered them.

Development Frameworks

A qualified development framework should at least establish repo structure, support hot reload debugging, support browser extension interface type hints, etc. You can choose one of the following tech stacks.

Code Repository Template

React + typescript + vite + monorepo: https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite

To be precise, it's a template, not a framework. It includes all the features a development framework should have. For browser extension development where the interfaces aren't too complex, I personally prefer repository templates that show all the details rather than frameworks that hide implementation details.

  • Supports HMR, sourcemap, etc.
  • Uses pnpm + turbo to manage monorepo
  • Provides implementations for all Chrome extension features, including tab homepage, devtools, sidebar, etc., making it easy to reference and replace
  • Packages for Chrome, Firefox, and other major browsers. Default compatibility for Firefox
  • No hidden details, all code is shown for easy understanding and modification

Plasmo

If you don't like the template above, you can consider the Plasmo framework

  • Supports mainstream frameworks like React, Vue, Angular
  • Supports debugging features like HMR
  • Uses Parcel for bundling, not vite
  • Some details (like manifest generation, content UI rendering process) are encapsulated, making them harder to understand

Debugging

  • Loading the extension
    • Run npm dev in the repo
    • Open extensions in Chrome: chrome://extensions/
    • Enable "Developer mode" -> Click "Load unpacked" -> Select the compiled output folder
  • Debugging is implemented through Chrome devtools
    • Content scripts: Select "Content scripts" in the "Sources" tab to debug code
    • Background script runs in a service worker, so open chrome://extensions/ -> Find the extension -> Click service worker to debug code