browser-extension-developer
使用 WXT 建構跨瀏覽器擴充功能
瀏覽器擴充功能專案常常在跨瀏覽器相容性和適當的國際化設定方面遇到困難。此技能提供以 WXT 為基礎的擴充功能開發的明確指導，支援 Chrome、Firefox 和 Edge，並具有適當的 i18n 結構。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「browser-extension-developer」。 How do I structure a WXT browser extension project?
預期結果:
- Create browser/entrypoints/ for background.ts and content.ts files
- Place i18n files in browser/public/_locales/[language]/messages.json
- Configure WXT in browser/wxt.config.ts
- Built extensions output to browser/.output/chrome-mv3 and firefox-mv2
正在使用「browser-extension-developer」。 Add Spanish locale to my extension
預期結果:
- Create folder browser/public/_locales/es/
- Add messages.json with keys: appDescription and openWithRepomix
- Run npm run build-all to regenerate locales
- Test in Chrome and Firefox for compatibility
正在使用「browser-extension-developer」。 What commands do I use for Firefox development?
預期結果:
- Use npm run dev:firefox for live development with hot reload
- Firefox uses MV2 manifest while Chrome uses MV3
- Run npm run build:firefox to build for Firefox store submission
- Polyfills may be needed for Firefox-specific APIs
安全審計
安全This skill contains only documentation files with no executable code, network calls, or filesystem access. The static analysis flagged markdown code fences and JSON content as security issues, but evaluation confirms these are false positives. SKILL.md provides guidance for WXT-based browser extension development.
風險因素
品質評分
你能建構什麼
設定跨瀏覽器工作流程
配置以 WXT 為基礎的擴充功能專案，為 Chrome、Firefox 和 Edge 相容性提供適當的入口點。
管理多語言支援
依照記錄的 i18n 結構和必要的訊息金鑰新增語言地區設定。
標準化建構程序
為瀏覽器擴充功能專案建立團隊間一致的開發和建構指令。
試試這些提示
說明 WXT 擴充功能的 browser/ 目錄結構，以及背景腳本、內容腳本和配置檔案的位置。
向我展示如何將新的語言地區設定新增到擴充功能，包括必要的資料夾結構和所需的訊息金鑰。
哪些指令可以為 Chrome、Firefox 和 Edge 建構擴充功能，以及我應該知道的主要差異是什麼？
列出用於開發、測試和 lint WXT 瀏覽器擴充功能的基本 npm 指令。
最佳實務
- 保持背景腳本和內容腳本的職責明確分離
- 新增訊息金鑰時更新所有地區設定檔
- 在開發過程中同時在 Chrome 和 Firefox 中測試
避免
- 直接修改 .output 目錄中的檔案
- 在沒有相容性檢查的情況下使用特定瀏覽器的 API
- 新增不完整的地区設定檔，缺少必要的金鑰