Getting Started with Plasmo: A Modern Framework for Building Browser Extensions

Browser extensions (also called browser extensions) extend the capabilities of browsers such as Chrome . They can intercept requests, listen to events, control windows, and modify page content using simple web technologies (HTML, CSS, JS) and a manifest file.

Technology Stack

For large projects you may want to adopt modern tools like React , Vue , TypeScript , and Webpack , but most browsers lack a mature scaffolding tool for extensions.

Plasmo Framework

Plasmo, discovered on GitHub, is a framework designed specifically for developing browser extensions. It has quickly gained popularity (over 2.4k stars) and is described as the "Next.js for browser extensions".

Development

The framework ships with built‑in support for React + TypeScript , allowing you to skip using create‑react‑app . Create a new project with the following command:

npm x plasmo init

The generated project is minimal and clear. popup.tsx is the default exported React component shown when the extension’s popup opens, assets holds icons, and the remaining files are configuration.

Plasmo also supports integration with other technologies such as:

Next.js

Stripe

Redux

Tailwind CSS

Google Analytics

Supabase Authentication

Firebase Authentication

Examples and additional stacks can be found in the official examples repository.

Debugging

Enable developer mode at chrome://extensions , run npm dev , click “Load Unpacked”, and select the build/chrome-mv3-dev folder. The extension will support hot‑reloading, making development very nice .

Publishing

Plasmo provides a “Browser Platform Publish” (BPP) feature that can automatically submit your extension to Chrome Web Store, Firefox Marketplace, and Edge Web Store. Create a keys.json file with the required credentials, for example:

{
  "$schema": "https://raw.githubusercontent.com/plasmo-corp/bpp/v2/keys.schema.json",
  "chrome": {
    "clientId": "xxx",
    "refreshToken": "xxx",
    "extId": "xxx"
  },
  "edge": {
    "clientId": "ConardLi",
    "clientSecret": "code秘密花园",
    "productId": "xxx",
    "accessTokenUrl": "https://login.xxx/oauth2/v2.0/token"
  }
}

Do not commit the keys directly to GitHub; use GitHub Encrypted Secrets for safety.

Conclusion

Using Plasmo, developers can focus on core business logic while the framework handles environment setup, configuration, deployment, and publishing for browser extensions.