chrome-extension

Develop Chrome Extensions with Manifest V3, Vite, and React.

3|1|Updated Feb 27, 2026
One-click install
npx skills add https://github.com/orchestra-mcp/framework --skill chrome-extension-orchestra-mcp
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: chrome-extension
Source: https://github.com/orchestra-mcp/framework/tree/main/.claude/skills/chrome-extension
Command: npx skills add https://github.com/orchestra-mcp/framework --skill chrome-extension-orchestra-mcp

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the development of Chrome Extensions using Manifest V3, providing a structured approach to building browser-integrated applications.

Core Features & Use Cases

  • Manifest V3 Development: Guides you through creating manifest.json, service workers, and content scripts.
  • UI Development: Provides patterns for building side panels, editors, and explorers within the extension.
  • Inter-Context Communication: Demonstrates how to manage messaging between service workers, content scripts, and the side panel.
  • Use Case: Develop a new productivity extension that injects custom UI into GitHub pages to enhance code review workflows.

Quick Start

Use the chrome-extension skill to create a new Chrome extension project structure.

Frequently Asked Questions about chrome-extension

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

FAQPage Schema
How do I develop a Chrome Extension with Manifest V3 using React?

To develop a Chrome Extension with Manifest V3, this Skill provides a structured project setup using Vite for build configuration and React for UI components like side panels. It guides creation of the manifest.json, service workers, and content scripts.

How does inter-context communication work between service workers and content scripts?

Inter-context communication between service workers and content scripts is managed through messaging patterns. This Skill demonstrates how to route messages across the service worker, content scripts, and the side panel to synchronize extension state.

What is the best way to build a side panel UI for a browser extension?

The best way to build a side panel UI is using React components bundled with Vite. This Skill provides development patterns for creating side panels, editors, and explorers that inject custom interfaces directly into browser pages.

Can I use Vite to configure a Manifest V3 service worker and content scripts?

Yes, you can use Vite to build and configure Manifest V3 service workers and content scripts. This Skill streamlines the Vite build configuration to properly bundle background workers and content scripts alongside your React UI components.

How do I inject custom UI into web pages for code review workflows?

To inject custom UI into web pages like GitHub for code review workflows, this Skill uses content scripts to manipulate page DOM. It provides patterns for building productivity extensions that enhance page functionality directly.

What are the limitations of using Manifest V3 for browser extension development?

Manifest V3 browser extension development requires adapting to service workers replacing background pages, which introduces lifecycle constraints. This Skill addresses these limitations by providing structured messaging patterns and Vite build configurations for service worker management.