Source profileQuality 93/100Review permissions

tenequm/skills/skills/chrome-extension-wxt/SKILL.md

chrome-extension-wxt

Build Chrome extensions using WXT framework with TypeScript, React, Vue, or Svelte. Use when creating browser extensions, developing cross-browser add-ons, or working with Chrome Web Store projects. Triggers on phrases like "chrome extension", "browser extension", "WXT framework", "manifest v3", or file patterns like wxt.config.ts.

Source repository stars
35
Declared platforms
0
Static risk flags
1
Last source update
2026-08-24
Source checked
2026-08-25
DecisionCompatibilityInstallWorkflowPermissionsEvidenceSourceFAQ

Decision brief

What it does: where it fits

Build modern, cross-browser extensions using WXT - the next-generation framework that supports Chrome, Firefox, Edge, Safari, and all Chromium browsers with a single codebase.

Best for

  • Creating a new Chrome/browser extension
  • Setting up WXT development environment
  • Building extension features (popup, content scripts, background scripts)

Not for

  • Module not found errors: Ensure modules are installed and properly imported
  • CSP violations: Update contentsecuritypolicy in manifest

Compatibility matrix

Platform support, with evidence labels

PlatformStatusEvidenceWhat to check
CodexNot declaredNo explicit evidencePortability before use
Claude CodeNot declaredNo explicit evidencePortability before use
CursorNot declaredNo explicit evidencePortability before use
Gemini CLINot declaredNo explicit evidencePortability before use
Open the compatibility checker

Installation

Inspect first. Install second.

The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.

Source-detected install commandSource
npx skills add https://github.com/tenequm/skills --skill "skills/chrome-extension-wxt"
Safe inspection promptEditorial

Inspect the Agent Skill "chrome-extension-wxt" from https://github.com/tenequm/skills/blob/9b9fb5a29c103ed207dc255d753939e4e2ed29f5/skills/chrome-extension-wxt/SKILL.md at commit 9b9fb5a29c103ed207dc255d753939e4e2ed29f5. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.

Workflow

What the source asks the agent to do

  1. 01

    Quick Start Workflow

    Review the “Quick Start Workflow” section in the pinned source before continuing.

    Review and apply the “Quick Start Workflow” source section.
  2. 02

    When to Use This Skill

    Use this skill when: - Creating a new Chrome/browser extension - Setting up WXT development environment - Building extension features (popup, content scripts, background scripts) - Implementing cross-browser compatibility - Working with Manifest V3 (mandatory standard as of 2025…

    Creating a new Chrome/browser extensionSetting up WXT development environmentBuilding extension features (popup, content scripts, background scripts)
  3. 03

    1. Initialize WXT Project

    Review the “1. Initialize WXT Project” section in the pinned source before continuing.

    Review and apply the “1. Initialize WXT Project” source section.
  4. 04

    Create new project with framework of choice

    Review the “Create new project with framework of choice” section in the pinned source before continuing.

    Review and apply the “Create new project with framework of choice” source section.
  5. 05

    Or with specific template

    project/ ├── entrypoints/ Auto-discovered entry points │ ├── background.ts Service worker │ ├── content.ts Content script │ ├── popup.html Popup UI │ └── options.html Options page ├── components/ Auto-imported UI components ├── utils/ Auto-imported utilities ├── public/ Static a…

    project/ ├── entrypoints/ Auto-discovered entry points │ ├── background.ts Service worker │ ├── content.ts Content script │ ├── popup.html Popup UI │ └── options.html Options page ├── components/ Auto-imported UI compon…main() { // Listen for extension events browser.action.onClicked.addListener((tab) = { console.log('Extension clicked', tab); });// Handle messages browser.runtime.onMessage.addListener((message, sender, sendResponse) = { // Handle message sendResponse({ success: true }); return true; // Keep channel open for async }); }, }); typescript // entryp…

Permission review

Static risk signals and limitations

Runs scripts

medium · line 22

The documentation asks the agent to run terminal commands or scripts.

npm create wxt@latest

Runs scripts

medium · line 25

The documentation asks the agent to run terminal commands or scripts.

npm create wxt@latest -- --template react-ts

Evidence record

Why each signal appears

EvidenceSourceComputedTestedEditorial
SignalValueEvidence typeMeaning
Quality score93/100ComputedDocumentation, specificity, maintenance, and trust rules
Repository stars35SourceRepository attention, not individual Skill quality
Compatibility0 platformsSourceDeclared in the catalog source record
Usage guideautomated source guideEditorialGenerated or reviewed according to the visible evidence level

Pinned source

Provenance and original SKILL.md

Repository
tenequm/skills
Skill path
skills/chrome-extension-wxt/SKILL.md
Commit
9b9fb5a29c103ed207dc255d753939e4e2ed29f5
License
MIT
Collected
2026-08-25
Default branch
main
View the original SKILL.md

Chrome Extension Development with WXT

Build modern, cross-browser extensions using WXT - the next-generation framework that supports Chrome, Firefox, Edge, Safari, and all Chromium browsers with a single codebase.

When to Use This Skill

Use this skill when:

  • Creating a new Chrome/browser extension
  • Setting up WXT development environment
  • Building extension features (popup, content scripts, background scripts)
  • Implementing cross-browser compatibility
  • Working with Manifest V3 (mandatory standard as of 2025, V2 deprecated)
  • Integrating React 19, Vue, Svelte, or Solid with extensions

Quick Start Workflow

1. Initialize WXT Project

# Create new project with framework of choice
npm create wxt@latest

# Or with specific template
npm create wxt@latest -- --template react-ts
npm create wxt@latest -- --template vue-ts
npm create wxt@latest -- --template svelte-ts

2. Project Structure

WXT uses file-based conventions:

project/
├── entrypoints/              # Auto-discovered entry points
│   ├── background.ts         # Service worker
│   ├── content.ts           # Content script
│   ├── popup.html           # Popup UI
│   └── options.html         # Options page
├── components/              # Auto-imported UI components
├── utils/                   # Auto-imported utilities
├── public/                  # Static assets
│   └── icon/               # Extension icons
├── wxt.config.ts           # Configuration
└── package.json

3. Development Commands

npm run dev              # Start dev server with HMR
npm run build           # Production build
npm run zip             # Package for store submission

Core Entry Points

WXT recognizes entry points by filename in entrypoints/ directory:

Background Script (Service Worker)

// entrypoints/background.ts
export default defineBackground({
  type: 'module',
  persistent: false,

  main() {
    // Listen for extension events
    browser.action.onClicked.addListener((tab) => {
      console.log('Extension clicked', tab);
    });

    // Handle messages
    browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
      // Handle message
      sendResponse({ success: true });
      return true; // Keep channel open for async
    });
  },
});

Content Script

// entrypoints/content.ts
export default defineContentScript({
  matches: ['*://*.example.com/*'],
  runAt: 'document_end',

  main(ctx) {
    // Content script logic
    console.log('Content script loaded');

    // Create UI
    const ui = createShadowRootUi(ctx, {
      name: 'my-extension-ui',
      position: 'inline',
      anchor: 'body',

      onMount(container) {
        // Mount React/Vue component
        const root = ReactDOM.createRoot(container);
        root.render(<App />);
      },
    });

    ui.mount();
  },
});

Popup UI

// entrypoints/popup/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

<!-- entrypoints/popup/index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Extension Popup</title>
</head>
<body>
  <div id="root"></div>
  <script type="module" src="./main.tsx"></script>
</body>
</html>

Configuration

Basic wxt.config.ts

import { defineConfig } from 'wxt';

export default defineConfig({
  // Framework integration
  modules: ['@wxt-dev/module-react'],

  // Manifest configuration
  manifest: {
    name: 'My Extension',
    description: 'Extension description',
    permissions: ['storage', 'activeTab'],
    host_permissions: ['*://example.com/*'],
  },

  // Browser target
  browser: 'chrome', // or 'firefox', 'edge', 'safari'
});

Common Patterns

Type-Safe Storage

// utils/storage.ts
import { storage } from 'wxt/storage';

export const storageHelper = {
  async get<T>(key: string): Promise<T | null> {
    return await storage.getItem<T>(`local:${key}`);
  },

  async set<T>(key: string, value: T): Promise<void> {
    await storage.setItem(`local:${key}`, value);
  },

  watch<T>(key: string, callback: (newValue: T | null) => void) {
    return storage.watch<T>(`local:${key}`, callback);
  },
};

Type-Safe Messaging

// utils/messaging.ts
interface Messages {
  'get-data': {
    request: { key: string };
    response: { value: any };
  };
}

export async function sendMessage<K extends keyof Messages>(
  type: K,
  payload: Messages[K]['request']
): Promise<Messages[K]['response']> {
  return await browser.runtime.sendMessage({ type, payload });
}

Script Injection

// Inject script into page context
import { injectScript } from 'wxt/client';

await injectScript('/injected.js', {
  keepInDom: false,
});

Building & Deployment

Production Build

# Build for specific browser
npm run build -- --browser=chrome
npm run build -- --browser=firefox

# Create store-ready ZIP
npm run zip
npm run zip -- --browser=firefox

Multi-Browser Build

# Build for all browsers
npm run zip:all

Output: .output/my-extension-{version}-{browser}.zip

Modern Stacks (2025)

Popular technology combinations for building Chrome extensions:

WXT + React + Tailwind + shadcn/ui

Most popular stack in 2025. Combines utility-first styling with pre-built accessible components.

npm create wxt@latest -- --template react-ts
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npx shadcn@latest init

Best for: Modern UIs with consistent design system Example: https://github.com/imtiger/wxt-react-shadcn-tailwindcss-chrome-extension

WXT + React + Mantine UI

Complete component library with 100+ components and built-in dark mode.

npm create wxt@latest -- --template react-ts
npm install @mantine/core @mantine/hooks

Best for: Feature-rich extensions needing complex components Example: https://github.com/ongkay/WXT-Mantine-Tailwind-Browser-Extension

WXT + React + TypeScript (Minimal)

Clean setup for custom designs without UI library dependencies.

npm create wxt@latest -- --template react-ts

Best for: Simple extensions or highly custom designs

Advanced Topics

For detailed information on advanced topics, see the reference files:

  • React Integration: See references/react-integration.md for complete React setup, hooks, state management, and popular UI libraries
  • Chrome APIs: See references/chrome-api.md for comprehensive Chrome Extension API reference with examples
  • Chrome 140+ Features: See references/chrome-140-features.md for latest Chrome Extension APIs (sidePanel.getLayout(), etc.)
  • WXT API: See references/wxt-api.md for complete WXT framework API documentation
  • Best Practices: See references/best-practices.md for security, performance, and architecture patterns

Troubleshooting

Common issues and solutions:

  1. Module not found errors: Ensure modules are installed and properly imported
  2. CSP violations: Update content_security_policy in manifest
  3. Hot reload not working: Check browser console for errors
  4. Storage not persisting: Use storage.local or storage.sync correctly

For deeper guidance on avoiding these issues, see references/best-practices.md.

Resources

Official Documentation

Bundled Resources

  • references/: Detailed documentation for advanced features

Use these resources as needed when building your extension.

Frequently asked questions

What to verify before installation and use

What does the chrome-extension-wxt source document cover?

Build modern, cross-browser extensions using WXT - the next-generation framework that supports Chrome, Firefox, Edge, Safari, and all Chromium browsers with a single codebase.

How do I install chrome-extension-wxt?

The source record exposes this install command: npx skills add https://github.com/tenequm/skills --skill "skills/chrome-extension-wxt". Inspect the command and pinned source before running it.

Which permission-related actions were detected?

Static rules flagged exec-script in the source; the page lists the matching lines and excerpts.

Alternatives

Compare before choosing

Computed 9610,956

huggingface/skills

huggingface-lora-space-builder

Build and publish a Gradio demo on Hugging Face Spaces for a user-provided LoRA. Use when someone asks to create, generate, ship, or publish a Space, demo, Gradio app, or playground for a LoRA — including LoRAs for Qwen-Image, Qwen-Image-Edit, LTX-Video, Wan, FLUX, SDXL, or other diffusion base models. Also triggers when someone describes a LoRA they trained or hosts on the Hub and wants to share it. Covers picking the right base pipeline and `diffusers` inference recipe, designing a UI tailored

2026-08-180 platforms
Computed 96156

open-edge-platform/edge-ai-libraries

chatqna-helm-deploy

Deploy Chat Question-and-Answer Core to Kubernetes using Helm (OpenVINO CPU, OpenVINO GPU, or Ollama), including values.yaml configuration, helm install/upgrade, deployment verification, uninstall, and translation from Docker Compose setup_env.sh variables into Helm override values. Use this skill when the user says "deploy chatqna core to kubernetes", "helm install chatqna-core", "configure values.yaml", "convert compose config to helm", or "translate setup_env.sh to chart values".

2026-08-240 platforms
Computed 9439,098

wshobson/agents

brand-landingpage

Brand-first landing page designer — runs a brand-identity interview (colors, typography, shape language), then generates and iterates on a polished landing page via Stitch with deployment-ready HTML. Use when the user asks to create, design, or build a landing page, homepage, or marketing page and has no established visual direction. Skip when they have a design mockup, need a dashboard or app UI, are working at component level, building a multi-page app, or restyling with known design tokens —

2026-08-240 platforms
Computed 943,337

synthetic-sciences/openscience

latchbio-integration

Latch platform for bioinformatics workflows. Build pipelines with Latch SDK, @workflow/@task decorators, deploy serverless workflows, LatchFile/LatchDir, Nextflow/Snakemake integration.

2026-08-250 platforms