skills.rest
choufeng
choufengCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

plasmo

Develop React/TypeScript browser extensions with the Plasmo framework.

2|Updated Jul 15, 2024
Search Tags:#typescript#react#manifest#browser-extension#content-scripts#plasmo#csui
One-click install
npx skills add https://github.com/choufeng/impersonate-agents --skill plasmo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: plasmo
Source: https://github.com/choufeng/impersonate-agents/tree/main/.claude/skills/plasmo
Command: npx skills add https://github.com/choufeng/impersonate-agents --skill plasmo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Plasmo streamlines browser-extension development by providing a unified framework and tooling to create React/TypeScript-based extensions with CSUI, background workers, messaging, and manifest handling.

Core Features & Use Cases

  • Declarative manifest support and MV3 compatibility
  • CSUI with Shadow DOM isolation for UI components
  • Comprehensive extension architecture: content scripts, background workers, messaging, storage, and manifest customization
  • Cross-browser deployment and hot-reload during development

Quick Start

Install Node.js and Plasmo tooling, scaffold a new project with plasmo, run dev to start the local server, and load the extension from build/chrome-mv3-dev in Chrome.

Frequently Asked Questions about plasmo

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a React browser extension with content scripts and Manifest V3?▼

Build React browser extensions with content scripts and Manifest V3 by using the Plasmo framework, which provides declarative manifest support and hot-reload during development.

What is the best way to isolate a browser extension's UI from page styles using Shadow DOM?▼

Isolate a browser extension's UI from page styles using CSUI with Shadow DOM isolation, a feature provided by the Plasmo framework to prevent style leakage between the page and your React components.

Do I need Node.js to develop a TypeScript browser extension with Plasmo?▼

Yes, you need Node.js and Plasmo tooling installed to scaffold projects and run the local development server for building TypeScript-based browser extensions.

Can I deploy a Plasmo extension across multiple browsers?▼

Plasmo supports cross-browser deployment, allowing you to build and deploy your React/TypeScript browser extension across different browser platforms from a single compatible project structure.

How do I set up messaging and background workers for a browser extension?▼

Set up messaging and background workers for browser extensions through Plasmo's comprehensive architecture, which handles background workers, messaging, and storage alongside content scripts.

Why won't my browser extension load during local development?▼

If your browser extension won't load during local development, ensure you run the dev command and load the unpacked extension directly from the build/chrome-mv3-dev directory in Chrome.

Related Skills

Explore More Software Engineering Skills→
zhu637882-stackzhu637882-stack

env-setup

Detect, install, and configure Homebrew, Node.js, pnpm, PostgreSQL, Redis, Git, then output a summary.

Community
Advanced
arisngarisng
5

chrome-extensions-development

Build secure MV3 Chrome extensions with manifest.json and service workers.

Community
Advanced
aberrantCodeaberrantCode
1

chrome-extension-builder

Scaffold Chrome MV3 extensions with WXT, React, TypeScript, and shadcn-UI.

Community
Advanced
jinwoonghongjinwoonghong

moai-platform-chrome-extension

Develop Chrome extensions using Manifest V3 service workers and content scripts.

Community
Advanced