Extension Popup

{"id":"ba864daa-1786-49c7-9a7f-39692c64dcc9","shortId":"8bfW49","kind":"skill","title":"chrome-extension-wxt","tagline":"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\"","description":"# Chrome Extension Development with WXT\n\nBuild modern, cross-browser extensions using WXT - the next-generation framework that supports Chrome, Firefox, Edge, Safari, and all Chromium browsers with a single codebase.\n\n## When to Use This Skill\n\nUse this skill when:\n- Creating a new Chrome/browser extension\n- Setting up WXT development environment\n- Building extension features (popup, content scripts, background scripts)\n- Implementing cross-browser compatibility\n- Working with Manifest V3 (mandatory standard as of 2025, V2 deprecated)\n- Integrating React 19, Vue, Svelte, or Solid with extensions\n\n## Quick Start Workflow\n\n### 1. Initialize WXT Project\n\n```bash\n# Create new project with framework of choice\nnpm create wxt@latest\n\n# Or with specific template\nnpm create wxt@latest -- --template react-ts\nnpm create wxt@latest -- --template vue-ts\nnpm create wxt@latest -- --template svelte-ts\n```\n\n### 2. Project Structure\n\nWXT uses file-based conventions:\n\n```\nproject/\n├── entrypoints/ # Auto-discovered entry points\n│ ├── background.ts # Service worker\n│ ├── content.ts # Content script\n│ ├── popup.html # Popup UI\n│ └── options.html # Options page\n├── components/ # Auto-imported UI components\n├── utils/ # Auto-imported utilities\n├── public/ # Static assets\n│ └── icon/ # Extension icons\n├── wxt.config.ts # Configuration\n└── package.json\n```\n\n### 3. Development Commands\n\n```bash\nnpm run dev # Start dev server with HMR\nnpm run build # Production build\nnpm run zip # Package for store submission\n```\n\n## Core Entry Points\n\nWXT recognizes entry points by filename in `entrypoints/` directory:\n\n### Background Script (Service Worker)\n\n```typescript\n// entrypoints/background.ts\nexport default defineBackground({\n type: 'module',\n persistent: false,\n\n main() {\n // Listen for extension events\n browser.action.onClicked.addListener((tab) => {\n console.log('Extension clicked', tab);\n });\n\n // Handle messages\n browser.runtime.onMessage.addListener((message, sender, sendResponse) => {\n // Handle message\n sendResponse({ success: true });\n return true; // Keep channel open for async\n });\n },\n});\n```\n\n### Content Script\n\n```typescript\n// entrypoints/content.ts\nexport default defineContentScript({\n matches: ['*://*.example.com/*'],\n runAt: 'document_end',\n\n main(ctx) {\n // Content script logic\n console.log('Content script loaded');\n\n // Create UI\n const ui = createShadowRootUi(ctx, {\n name: 'my-extension-ui',\n position: 'inline',\n anchor: 'body',\n\n onMount(container) {\n // Mount React/Vue component\n const root = ReactDOM.createRoot(container);\n root.render();\n },\n });\n\n ui.mount();\n },\n});\n```\n\n### Popup UI\n\n```typescript\n// entrypoints/popup/main.tsx\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport App from './App';\n\nReactDOM.createRoot(document.getElementById('root')!).render(\n \n \n \n);\n```\n\n```html\n\n\n\n\n \n Extension Popup\n\n\n

\n \n\n\n```\n\n## Configuration\n\n### Basic wxt.config.ts\n\n```typescript\nimport { defineConfig } from 'wxt';\n\nexport default defineConfig({\n // Framework integration\n modules: ['@wxt-dev/module-react'],\n\n // Manifest configuration\n manifest: {\n name: 'My Extension',\n description: 'Extension description',\n permissions: ['storage', 'activeTab'],\n host_permissions: ['*://example.com/*'],\n },\n\n // Browser target\n browser: 'chrome', // or 'firefox', 'edge', 'safari'\n});\n```\n\n## Common Patterns\n\n### Type-Safe Storage\n\n```typescript\n// utils/storage.ts\nimport { storage } from 'wxt/storage';\n\nexport const storageHelper = {\n async get(key: string): Promise {\n return await storage.getItem(`local:${key}`);\n },\n\n async set(key: string, value: T): Promise {\n await storage.setItem(`local:${key}`, value);\n },\n\n watch(key: string, callback: (newValue: T | null) => void) {\n return storage.watch(`local:${key}`, callback);\n },\n};\n```\n\n### Type-Safe Messaging\n\n```typescript\n// utils/messaging.ts\ninterface Messages {\n 'get-data': {\n request: { key: string };\n response: { value: any };\n };\n}\n\nexport async function sendMessage(\n type: K,\n payload: Messages[K]['request']\n): Promise {\n return await browser.runtime.sendMessage({ type, payload });\n}\n```\n\n### Script Injection\n\n```typescript\n// Inject script into page context\nimport { injectScript } from 'wxt/client';\n\nawait injectScript('/injected.js', {\n keepInDom: false,\n});\n```\n\n## Building & Deployment\n\n### Production Build\n\n```bash\n# Build for specific browser\nnpm run build -- --browser=chrome\nnpm run build -- --browser=firefox\n\n# Create store-ready ZIP\nnpm run zip\nnpm run zip -- --browser=firefox\n```\n\n### Multi-Browser Build\n\n```bash\n# Build for all browsers\nnpm run zip:all\n```\n\nOutput: `.output/my-extension-{version}-{browser}.zip`\n\n## Modern Stacks (2025)\n\nPopular technology combinations for building Chrome extensions:\n\n### WXT + React + Tailwind + shadcn/ui\nMost popular stack in 2025. Combines utility-first styling with pre-built accessible components.\n\n```bash\nnpm create wxt@latest -- --template react-ts\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\nnpx shadcn@latest init\n```\n\n**Best for:** Modern UIs with consistent design system\n**Example:** https://github.com/imtiger/wxt-react-shadcn-tailwindcss-chrome-extension\n\n### WXT + React + Mantine UI\nComplete component library with 100+ components and built-in dark mode.\n\n```bash\nnpm create wxt@latest -- --template react-ts\nnpm install @mantine/core @mantine/hooks\n```\n\n**Best for:** Feature-rich extensions needing complex components\n**Example:** https://github.com/ongkay/WXT-Mantine-Tailwind-Browser-Extension\n\n### WXT + React + TypeScript (Minimal)\nClean setup for custom designs without UI library dependencies.\n\n```bash\nnpm create wxt@latest -- --template react-ts\n```\n\n**Best for:** Simple extensions or highly custom designs\n\n## Advanced Topics\n\nFor detailed information on advanced topics, see the reference files:\n\n- **React Integration**: See `references/react-integration.md` for complete React setup, hooks, state management, and popular UI libraries\n- **Chrome APIs**: See `references/chrome-api.md` for comprehensive Chrome Extension API reference with examples\n- **Chrome 140+ Features**: See `references/chrome-140-features.md` for latest Chrome Extension APIs (sidePanel.getLayout(), etc.)\n- **WXT API**: See `references/wxt-api.md` for complete WXT framework API documentation\n- **Best Practices**: See `references/best-practices.md` for security, performance, and architecture patterns\n\n## Troubleshooting\n\nCommon issues and solutions:\n\n1. **Module not found errors**: Ensure modules are installed and properly imported\n2. **CSP violations**: Update `content_security_policy` in manifest\n3. **Hot reload not working**: Check browser console for errors\n4. **Storage not persisting**: Use `storage.local` or `storage.sync` correctly\n\nFor detailed troubleshooting, see `references/troubleshooting.md`\n\n## Resources\n\n### Official Documentation\n- WXT Docs: https://wxt.dev\n- Chrome Extension Docs: https://developer.chrome.com/docs/extensions\n- Firefox Extension Docs: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons\n\n### Bundled Resources\n\n- **scripts/**: Helper utilities for common extension tasks\n- **references/**: Detailed documentation for advanced features\n- **assets/**: Starter templates and example components\n\nUse these resources as needed when building your extension.","tags":["chrome","extension","wxt","skills","tenequm","agent-skills","ai-agents","claude-code","claude-skills","clawhub","erc-8004","mpp"],"capabilities":["skill","source-tenequm","skill-chrome-extension-wxt","topic-agent-skills","topic-ai-agents","topic-claude-code","topic-claude-skills","topic-clawhub","topic-erc-8004","topic-mpp","topic-openclaw","topic-skills","topic-solana","topic-x402"],"categories":["skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/tenequm/skills/chrome-extension-wxt","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add tenequm/skills","source_repo":"https://github.com/tenequm/skills","install_from":"skills.sh"}},"qualityScore":"0.461","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 23 github stars · SKILL.md body (7,979 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T01:01:39.060Z","embedding":null,"createdAt":"2026-04-18T23:05:10.969Z","updatedAt":"2026-04-22T01:01:39.060Z","lastSeenAt":"2026-04-22T01:01:39.060Z","tsv":"'/*''],':313 '/app':370 '/client':366 '/docs/extensions':843 '/en-us/docs/mozilla/add-ons':849 '/example.com':410 '/imtiger/wxt-react-shadcn-tailwindcss-chrome-extension':638 '/injected.js':521 '/module-react':395 '/ongkay/wxt-mantine-tailwind-browser-extension':680 '1':133,787 '100':647 '140':751 '19':123 '2':177,799 '2025':118,576,592 '3':225,808 '4':818 'access':602 'activetab':407 'add':27 'add-on':26 'advanc':711,717,863 'anchor':339 'api':739,746,759,763,770 'app':368 'architectur':780 'asset':218,865 'async':302,434,446,489 'auto':189,207,213 'auto-discov':188 'auto-import':206,212 'autoprefix':618 'await':442,453,503,519 'background':103,261 'background.ts':193 'base':184 'bash':137,228,528,560,604,655,694 'basic':379 'best':627,668,703,772 'bodi':340 'browser':20,25,42,55,73,108,411,413,532,536,541,554,558,564,572,814 'browser.action.onclicked.addlistener':279 'browser.runtime.onmessage.addlistener':287 'browser.runtime.sendmessage':504 'build':5,51,97,239,241,524,527,529,535,540,559,561,581,877 'built':601,651 'built-in':650 'bundl':850 'callback':461,470 'channel':299 'check':813 'choic':144 'chrome':2,6,32,40,46,66,414,537,582,738,744,750,757,838 'chrome-extension-wxt':1 'chrome/browser':90 'chromium':72 'clean':685 'click':283 'codebas':77 'combin':579,593 'command':227 'common':419,783,856 'compat':109 'complet':643,728,767 'complex':675 'compon':205,210,345,603,644,648,676,870 'comprehens':743 'configur':223,378,397 'consist':632 'consol':815 'console.log':281,322 'const':328,346,432 'contain':342,349 'content':101,197,303,319,323,803 'content.ts':196 'context':514 'convent':185 'core':249 'correct':826 'creat':19,87,138,146,154,162,170,326,543,606,657,696 'createshadowrootui':330 'cross':24,54,107 'cross-brows':23,53,106 'csp':800 'ctx':318,331 'custom':688,709 'd':615 'dark':653 'data':481 'default':268,308,387 'definebackground':269 'defineconfig':383,388 'definecontentscript':309 'depend':693 'deploy':525 'deprec':120 'descript':402,404 'design':633,689,710 'detail':714,828,860 'dev':231,233,394 'develop':22,48,95,226 'developer.chrome.com':842 'developer.chrome.com/docs/extensions':841 'developer.mozilla.org':848 'developer.mozilla.org/en-us/docs/mozilla/add-ons':847 'directori':260 'discov':190 'doc':836,840,846 'document':315,771,834,861 'document.getelementbyid':372 'dom':365 'edg':68,417 'end':316 'ensur':792 'entri':191,250,254 'entrypoint':187,259 'entrypoints/background.ts':266 'entrypoints/content.ts':306 'entrypoints/popup/main.tsx':355 'environ':96 'error':791,817 'etc':761 'event':278 'exampl':635,677,749,869 'example.com':312 'example.com/*''],':311 'export':267,307,386,431,488 'extens':3,7,21,41,43,47,56,91,98,129,220,277,282,335,376,401,403,583,673,706,745,758,839,845,857,879 'fals':273,523 'featur':99,671,752,864 'feature-rich':670 'file':183,722 'file-bas':182 'filenam':257 'firefox':67,416,542,555,844 'first':596 'found':790 'framework':10,45,63,142,389,769 'function':490 'generat':62 'get':435,480 'get-data':479 'github.com':637,679 'github.com/imtiger/wxt-react-shadcn-tailwindcss-chrome-extension':636 'github.com/ongkay/wxt-mantine-tailwind-browser-extension':678 'handl':285,291 'helper':853 'high':708 'hmr':236 'hook':731 'host':408 'hot':809 'html':375 'icon':219,221 'implement':105 'import':208,214,356,360,367,382,427,515,798 'inform':715 'init':621,626 'initi':134 'inject':508,510 'injectscript':516,520 'inlin':338 'instal':614,665,795 'integr':121,390,724 'interfac':477 'issu':784 'k':493,496,500 'keep':298 'keepindom':522 'key':436,445,448,456,459,469,483 'latest':148,156,164,172,608,625,659,698,756 'librari':645,692,737 'like':39 'listen':275 'load':325 'local':444,455,468 'logic':321 'main':274,317 'manag':733 'mandatori':114 'manifest':112,396,398,807 'mantin':641 'mantine/core':666 'mantine/hooks':667 'match':310 'messag':286,288,292,474,478,495,499 'minim':684 'mode':654 'modern':52,574,629 'modul':271,391,788,793 'mount':343 'multi':557 'multi-brows':556 'my-extension-ui':333 'name':332,399 'need':674,875 'new':89,139 'newvalu':462 'next':61 'next-gener':60 'npm':145,153,161,169,229,237,242,533,538,548,551,565,605,613,656,664,695 'npx':619,623 'null':440,464 'offici':833 'on':28 'onmount':341 'open':300 'option':203 'options.html':202 'output':569 'output/my-extension-':570 'p':622 'packag':245 'package.json':224 'page':204,513 'pattern':420,781 'payload':494,506 'perform':778 'permiss':405,409 'persist':272,821 'phrase':38 'point':192,251,255 'polici':805 'popular':577,589,735 'popup':100,200,352,377 'popup.html':199 'posit':337 'postcss':617 'practic':773 'pre':600 'pre-built':599 'product':240,526 'project':35,136,140,178,186 'promis':438,452,498 'proper':797 'public':216 'quick':130 'react':13,122,159,357,359,364,585,611,640,662,682,701,723,729 'react-dom':363 'react-t':158,610,661,700 'react/vue':344 'reactdom':361 'reactdom.createroot':348,371 'readi':546 'recogn':253 'refer':721,747,859 'references/best-practices.md':775 'references/chrome-140-features.md':754 'references/chrome-api.md':741 'references/react-integration.md':726 'references/troubleshooting.md':831 'references/wxt-api.md':765 'reload':810 'render':374 'request':482,497 'resourc':832,851,873 'respons':485,501 'return':296,441,466,502 'rich':672 'root':347,373 'root.render':350 'run':230,238,243,534,539,549,552,566 'runat':314 'safari':69,418 'safe':423,473 'script':102,104,198,262,304,320,324,507,511,852 'secur':777,804 'see':719,725,740,753,764,774,830 'sender':289 'sendmessag':491 'sendrespons':290,293 'server':234 'servic':194,263 'set':92,447 'setup':686,730 'shadcn':624 'shadcn/ui':587 'sidepanel.getlayout':760 'simpl':705 'singl':76 'skill':82,85 'skill-chrome-extension-wxt' 'solid':127 'solut':786 'source-tenequm' 'specif':151,531 'stack':575,590 'standard':115 'start':131,232 'starter':866 'state':732 'static':217 'storag':406,424,428,819 'storage.getitem':443 'storage.local':823 'storage.setitem':454 'storage.sync':825 'storage.watch':467 'storagehelp':433 'store':34,247,545 'store-readi':544 'string':437,449,460,484 'structur':179 'style':597 'submiss':248 'success':294 'support':65 'svelt':16,125,175 'svelte-t':174 'system':634 'tab':280,284 'tailwind':586 'tailwindcss':616,620 'target':412 'task':858 'technolog':578 'templat':152,157,165,173,609,660,699,867 'topic':712,718 'topic-agent-skills' 'topic-ai-agents' 'topic-claude-code' 'topic-claude-skills' 'topic-clawhub' 'topic-erc-8004' 'topic-mpp' 'topic-openclaw' 'topic-skills' 'topic-solana' 'topic-x402' 'trigger':36 'troubleshoot':782,829 'true':295,297 'ts':160,168,176,612,663,702 'type':270,422,472,492,505 'type-saf':421,471 'typescript':12,265,305,354,381,425,475,509,683 'ui':201,209,327,329,336,353,630,642,691,736 'ui.mount':351 'updat':802 'use':8,17,57,80,83,181,822,871 'util':211,215,595,854 'utility-first':594 'utils/messaging.ts':476 'utils/storage.ts':426 'v2':119 'v3':113 'valu':450,457,486 'version':571 'violat':801 'void':465 'vue':14,124,167 'vue-t':166 'watch':458 'web':33 'without':690 'work':30,110,812 'worker':195,264 'workflow':132 'wxt':4,9,44,50,58,94,135,147,155,163,171,180,252,385,393,584,607,639,658,681,697,762,768,835 'wxt-dev':392 'wxt.config.ts':222,380 'wxt.dev':837 'wxt/client':518 'wxt/storage':430 'zip':244,547,550,553,567,573","prices":[{"id":"63ed6a4c-b1a1-4702-a08b-e22588b3a4e1","listingId":"ba864daa-1786-49c7-9a7f-39692c64dcc9","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"tenequm","category":"skills","install_from":"skills.sh"},"createdAt":"2026-04-18T23:05:10.969Z"}],"sources":[{"listingId":"ba864daa-1786-49c7-9a7f-39692c64dcc9","source":"github","sourceId":"tenequm/skills/chrome-extension-wxt","sourceUrl":"https://github.com/tenequm/skills/tree/main/skills/chrome-extension-wxt","isPrimary":false,"firstSeenAt":"2026-04-18T23:05:10.969Z","lastSeenAt":"2026-04-22T01:01:39.060Z"}],"details":{"listingId":"ba864daa-1786-49c7-9a7f-39692c64dcc9","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"tenequm","slug":"chrome-extension-wxt","github":{"repo":"tenequm/skills","stars":23,"topics":["agent-skills","ai-agents","claude-code","claude-skills","clawhub","erc-8004","mpp","openclaw","skills","solana","x402"],"license":"mit","html_url":"https://github.com/tenequm/skills","pushed_at":"2026-04-14T16:24:57Z","description":"Agent skills for building, shipping, and growing software products","skill_md_sha":"870492f4b9d157e0fe1d7540eadac4b0d3d409d7","skill_md_path":"skills/chrome-extension-wxt/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/tenequm/skills/tree/main/skills/chrome-extension-wxt"},"layout":"multi","source":"github","category":"skills","frontmatter":{"name":"chrome-extension-wxt","description":"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."},"skills_sh_url":"https://skills.sh/tenequm/skills/chrome-extension-wxt"},"updatedAt":"2026-04-22T01:01:39.060Z"}}