skills.rest
aberrantCode
aberrantCodeCOMMUNITY
Explore all skills by this author →
GitHub

chrome-extension-builder

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

1|Updated Feb 26, 2026
Search Tags:#typescript#react#extension#chrome#mv3#native-messaging#wxt
One-click install
npx skills add https://github.com/aberrantCode/llm_skills --skill chrome-extension-builder-aberrantcode
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-extension-builder
Source: https://github.com/aberrantCode/llm_skills/tree/main/gemini/skills/chrome-extension-builder
Command: npx skills add https://github.com/aberrantCode/llm_skills --skill chrome-extension-builder-aberrantcode

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Building modern Chrome MV3 extensions requires wiring multiple contexts, crafting a correct manifest, handling cross-context messaging, and providing UI and native adapters; this Skill removes boilerplate and prescribes patterns so developers can focus on features instead of infrastructure.

Core Features & Use Cases

  • Project scaffolding: WXT + React + TypeScript starter setup with Tailwind and shadcn-UI templates to get a production-ready extension structure.
  • Cross-context architecture: Background service worker messaging hubs, content scripts, shadow DOM UI injection, side panels, popups, and options pages with shared types and utilities.
  • Integrations & extraction: Site-specific content scripts for Google Docs and Overleaf to extract document text and cursor context, plus optional native messaging adapters for local integration.
  • Testing & distribution: Vitest unit tests, Playwright E2E scenarios, build and zip targets for Chrome MV3 and optional Firefox builds.

Quick Start

Initialize a WXT React TypeScript extension template and run the development server to preview the extension locally.

Frequently Asked Questions about chrome-extension-builder

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

FAQPage Schema
How do I scaffold a Chrome MV3 extension with WXT and React?▼

To scaffold a Chrome MV3 extension, this project uses WXT with React and TypeScript to generate a production-ready structure, including Tailwind and shadcn-UI templates for popups and background service workers.

What is the best way to set up content scripts and shadow DOM UI in a Chrome extension?▼

Setting up content scripts and shadow DOM UI injection is handled through cross-context architecture patterns, allowing your extension to securely isolate injected React components from the host page's styles.

Can I build a Chrome extension that extracts text from Google Docs or Overleaf?▼

Yes, you can build site-specific content scripts for Google Docs and Overleaf to extract document text and cursor context, enabling targeted integrations within your Chrome MV3 extension.

How do I configure native messaging adapters for local integration in a Chrome extension?▼

Configuring native messaging adapters involves setting up local integration channels within your WXT extension project, allowing your Chrome MV3 background service worker to communicate with native applications.

Does this Chrome extension scaffolding workflow include testing with Vitest and Playwright?▼

Yes, the workflow includes testing and distribution configurations for Vitest unit tests and Playwright E2E scenarios, alongside build and zip targets for Chrome MV3 and optional Firefox builds.

What are the limitations of using WXT for Chrome MV3 extension development?▼

While WXT streamlines manifest MV3 configuration and cross-context messaging, developers must still manage specific host_permissions and adapt site-specific extractors for complex platforms like Google Docs and Overleaf.

Related Skills

Explore More Software Engineering Skills→
kjgarzakjgarza
3

chrome-extension-builder

Scaffold Chrome MV3 extensions with React, TypeScript, WXT, and Tailwind.

Community
Advanced
goldeneggggoldeneggg
1

browser-ext-creator

Generate MV3 Chrome and Firefox extension scaffolds with component templates.

Community
Advanced
TNHoang2708TNHoang2708
1

ck:ui-styling

Integrate shadcn/ui components and Tailwind CSS for accessible responsive interfaces.

Community
Advanced
xenitV1xenitV1
230

browser-extension

Build Manifest V3 browser extensions with persistent storage and service workers.

Community
Advanced