Plasmo Framework

Plasmo is an SDK for developing cross-platform browser extensions, often described as 'Next.js for browser extensions'. Key features include:

• React & TypeScript Support: First-class support for modern web development.
• Declarative Manifest: Automatic manifest.json (MV3) configuration.
• UI-enabled Content Scripts: Support for rendering UI within content scripts.
• Tab Pages: Easy creation of extension tab pages.
• Developer Experience: Active reloading and React HMR.
• Environment Variables: Support for .env* files.
• Built-in APIs: Specialized APIs for Storage and Messaging (communication between different parts of the extension).
• Remote Code Support: Ability to connect remote code (e.g., for Google Analytics).
• Cross-platform: Support for various manifest types and build targets.
• Automated Deployment: Integration with BPP (Browser Platform Publisher).
• Framework Extensions: Additional support for Svelte and Vue via plugins.

Plasmo uses a file-based routing/structure system to define different parts of your browser extension. You can place these files in the root directory or within a src directory.

Core Extension Files

• Popup: Edit popup.tsx to change the extension popup UI.
• Options Page: Edit options.tsx to change the extension options page.
• Content Scripts: Edit content.ts to modify scripts that run in the context of web pages.
• Background Service Worker: Edit background.ts to modify the background script.

Example Directory Layout

You can organize your project as follows:

ext-dir
├───assets
│   └───icon.png
├───popup
│   ├───index.tsx
│   └───button.tsx
├───options
│   ├───index.tsx
│   ├───utils.ts
│   └───input.tsx
├───contents
│   ├───site-one.ts
│   ├───site-two.ts
│   └───site-three.ts

Note: If you move source code to a src directory, assets and configuration files must remain in the project root.

Plasmo uses a file-based routing system to define different parts of your browser extension. You can place these files in the root directory or organize them into subdirectories.

Core Extension Files

• popup.tsx: Defines the extension's popup UI.
• options.tsx: Defines the extension's options page.
• content.ts: Defines content scripts that run in the context of web pages.
• background.ts: Defines the background service worker.

Directory Organization

You can organize your project by moving these files into specific folders:

ext-dir
├───assets
|   └───icon512.png
├───popup
|   ├───index.tsx
|   └───button.tsx
├───options
|   ├───index.tsx
|   ├───utils.ts
|   └───input.tsx
├───contents
|   ├───site-one.ts
|   ├───site-two.ts
|   └───site-three.ts

Note: You can also move source code into a src subdirectory, but assets and configuration files must remain in the project root.

Plasmo uses a declarative approach where specific filenames map to extension components. By default, changes to these files trigger updates to the corresponding extension parts:

• popup.tsx: Updates the extension's popup UI.
• options.tsx: Updates the extension's options page.
• content.ts: Updates content scripts.
• background.ts: Updates the background service worker.

You can organize these files into subdirectories (e.g., popup/index.tsx, contents/site-one.ts). If you prefer to move your source code into a src directory, follow the official customization guide, but note that assets and configuration files must remain in the root directory.

ext-dir
├───assets
|   └───icon.png
├───popup
|   ├───index.tsx
|   └───button.tsx
├───options
|   ├───index.tsx
|   ├───utils.ts
|   └───input.tsx
├───contents
|   ├───site-one.ts
|   ├───site-two.ts
|   └───site-three.ts

Plasmo uses a declarative development model where specific filenames correspond to different parts of the browser extension. By default, you can place these files in your root directory:

• popup.tsx: Defines the extension's popup UI.
• options.tsx: Defines the extension's options page.
• content.ts: Defines content scripts that run in the context of web pages.
• background.ts: Defines the background service worker.

You can also organize these into sub-directories (e.g., popup/index.tsx, contents/site-one.ts) or move all source code into a src directory to keep your root clean. Note that assets and configuration files must remain in the root directory.

ext-dir
├───assets
│   └───icon.png
├───popup
│   ├───index.tsx
│   └───button.tsx
├───options
│   ├───index.tsx
│   ├───utils.ts
│   └───input.tsx
├───contents
│   ├───site-one.ts
│   ├───site-two.ts
│   └───site-three.ts