Plasmo — The Browser Extension Framework

Introduction

Plasmo is a batteries-included framework for building browser extensions. It abstracts away manifest.json wiring, content-script injection, and multi-browser packaging so you can focus on the UI and logic using React, Vue, or Svelte.

What Plasmo Does

• Scaffolds extension projects with a single CLI command
• Auto-generates manifest.json v3 from TypeScript exports and file conventions
• Provides live-reload during development for popup, options, and content scripts
• Handles content-script mounting, shadow DOM isolation, and messaging out of the box
• Publishes to Chrome Web Store, Firefox Add-ons, and Edge Add-ons via Plasmo BPP

Architecture Overview

Plasmo wraps Parcel under the hood for bundling and hot-module replacement. File naming conventions (popup.tsx, content.ts, background.ts) drive automatic manifest generation. Content scripts are injected into isolated shadow DOM containers, preventing CSS collisions with the host page. A messaging API provides type-safe communication between content scripts, background service workers, and popup pages.

Self-Hosting & Configuration

• Requires Node.js 16+ and pnpm (or npm/yarn)
• Run pnpm create plasmo to scaffold a new project
• Customize permissions and metadata in package.json under the manifest key
• Use .env files for API keys; Plasmo injects them at build time
• Configure target browsers in plasmo.config.ts

Key Features

• Zero-config manifest generation from file conventions
• First-class React, Vue, and Svelte support with TypeScript
• Content script auto-mounting with shadow DOM isolation
• Type-safe messaging between extension contexts
• Built-in CI/CD publishing via Plasmo Browser Platform Publisher

Comparison with Similar Tools

• WXT — similar DX with Vite-based bundling; Plasmo uses Parcel and has broader framework support
• Chrome Extension CLI — minimal scaffolder without live-reload or manifest generation
• webpack manual setup — full control but requires extensive boilerplate for each extension context
• Vite plugin chrome extension — lightweight but less opinionated about project structure
• crxjs — Vite-based alternative focused on Chrome MV3; smaller ecosystem

FAQ

Q: Which browsers does Plasmo support? A: Chrome, Edge, Firefox, Opera, and Brave. Manifest v3 is the default; v2 can be targeted for Firefox.

Q: Can I use Tailwind CSS? A: Yes. Add Tailwind as a PostCSS plugin and it works in popup, options, and content scripts with shadow DOM isolation.

Q: Does Plasmo support background service workers? A: Yes. Create a background.ts file and export handlers; Plasmo registers the service worker automatically.

Q: How do I publish my extension? A: Use plasmo bpp with store credentials in environment variables for automated submission to all major stores.

Sources

• https://github.com/PlasmoHQ/plasmo
• https://docs.plasmo.com