# Plasmo — The Browser Extension Framework

> Build, test, and publish browser extensions for Chrome, Firefox, and Edge using React or Vue with hot-reload and automatic manifest generation.

## Install

Save as a script file and run:

# Plasmo — The Browser Extension Framework

## Quick Use
```bash
pnpm create plasmo
cd my-extension
pnpm dev   # live-reload in Chrome
pnpm build # production bundle
```

## 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

---
Source: https://tokrepo.com/en/workflows/7c2d56c8-4211-11f1-9bc6-00163e2b0d79
Author: Script Depot