chrome-extension-builder_skill

Overview

This skill scaffolds and configures production-ready Chrome MV3 extensions using the WXT framework with React, TypeScript, and shadcn-ui. It provides opinionated project structure, common cross-context messaging and storage utilities, and patterns for content scripts, side panels, popups, and native messaging. Use it to accelerate building extensions that integrate with Google Docs, Overleaf, or any DOM-driven site.

How this skill works

It generates a WXT-based project layout and config files, wires up entrypoints for background service workers, content scripts, side panels, popups, and options pages, and installs Tailwind + shadcn-ui UI components. The skill includes shared utilities for storage, message protocols, native messaging adapters, and shadow-DOM UI mounting so cross-context communication and DOM extraction work reliably. Examples and test scaffolding (Vitest and Playwright) are provided to validate content script injection and UI flows.

When to use it

• Starting a new Chrome MV3 extension with React and TypeScript
• Building extensions that need content extraction from pages like Google Docs or Overleaf
• Implementing cross-context messaging between content scripts, background service worker, and UI panels
• Adding a side panel or popup with shadcn-ui components and Tailwind styling
• Integrating optional native messaging with a local helper app

Best practices

• Define required components up front (background, content scripts, UI entrypoints) to shape manifest and permissions
• Use the provided storage wrapper and message protocol to keep state and communication consistent across contexts
• Prefer shadow-root mounted UI in content scripts to avoid CSS and DOM collisions
• Use the mock native adapter and environment flags during development to avoid depending on a native host
• Add host_permissions narrowly for sites you will extract data from and test injection with Playwright

Example use cases

• A side-panel assistant that extracts Google Docs content, streams chunks through the background worker, and shows suggestions in a React UI
• A popup for quick document actions and an options page for user preferences stored via the storage wrapper
• A content script that injects a shadow DOM overlay for inline suggestions on any matching host
• An Overleaf integration that reads the CodeMirror editor content and sends project text to the background processor
• A native-messaging flow that connects to a local process for heavyweight processing (use mock adapter in dev)