扩展弹出窗口

# 使用 WXT 进行 Chrome 扩展开发使用 WXT 构建现代的跨浏览器扩展 - 下一代框架，通过单一代码库支持 Chrome、Firefox、Edge、Safari 和所有 Chromium 浏览器。 ## 何时使用此技能在以下情况下使用此技能： * 创建新的 Chrome/浏览器扩展 * 设置WXT开发环境 * 构建扩展功能（弹出窗口、内容脚本、后台脚本） * 实现跨浏览器兼容性 * 使用 Manifest V3（自 2025 年起强制标准，V2 已弃用） * 将 React 19、Vue、Svelte 或 Solid 与扩展集成 ## 快速启动工作流程 ### 1\.初始化WXT项目 # 使用选择的框架创建新项目 npm 创建 wxt@latest # 或使用特定模板 npm create wxt@latest ---template react-ts npm create wxt@latest ---template vue-ts npm create wxt@latest ---template svelte-ts ### 2\.项目结构 WXT 使用基于文件的约定：项目/ ├──entrypoints/ # 自动发现的入口点 │ ├── background.ts # Service Worker │ ├── content.ts # 内容脚本 │ ├── popup.html # 弹出UI │ └── options.html # 选项页面 ├── Components/ # 自动导入的UI组件 ├── utils/ # 自动导入的实用程序 ├── public/ # 静态资产 │ └── icon/ # 扩展图标 ├── wxt.config.ts # 配置 └── package.json ### 3\.开发命令 npm run dev # 使用 HMR 启动开发服务器 npm run build # 生产版本 npm run zip # 商店提交的包 ## 核心入口点 WXT 通过 `entrypoints/` 目录中的文件名识别入口点： ### 后台脚本（服务工作者） // 入口点/background.ts 导出默认定义背景（{ 类型：'模块'，持久：假，主要（）{ // 监听扩展事件 browser.action.onClicked.addListener((tab) => { console.log('点击扩展', tab); }); // 处理消息 browser.runtime.onMessage.addListener((消息，发送者，sendResponse) => { // 处理消息 sendResponse({ 成功: true }); 返回真； // 保持通道为异步打开 }); }, }); ### 内容脚本 // 入口点/content.ts 导出默认的defineContentScript({ 匹配：['*://*.example.com/*'], runAt: '文档结束', 主要（ctx）{ // 内容脚本逻辑 console.log('内容脚本已加载'); // 创建用户界面 const ui = createShadowRootUi(ctx, { 名称：'我的扩展-ui'，位置：'内联'，锚：“身体”， onMount（容器）{ // 挂载 React/Vue 组件 const root = ReactDOM.createRoot(container); root.render(); }, }); ui.mount(); }, }); ### 弹出用户界面 // 入口点/popup/main.tsx 从“反应”导入反应；从'react-dom/client'导入ReactDOM；从“./App”导入应用程序； ReactDOM.createRoot(document.getElementById('root')!).render( <应用程序/> ）； <头> <元字符集=“UTF-8”> 扩展弹出窗口 <正文>

<脚本类型=“模块”src=“./main.tsx”> ## 配置 ### 基本 wxt.config.ts 从'wxt'导入{defineConfig}；导出默认的defineConfig({ // 框架集成模块：['@wxt-dev/module-react']， // 清单配置清单：{ name: '我的扩展', 描述：'扩展描述'，权限：['存储'，'activeTab']， host_permissions: ['*://example.com/*'], }, // 浏览器目标 browser: 'chrome', // 或 'firefox', 'edge', 'safari' }); ## 常见模式 ### 类型安全存储 // 实用程序/storage.ts 从'wxt/storage'导入{存储}；导出 const storageHelper = { async get(key: string): Promise { 返回等待 storage.getItem(`local:${key}`); }, async set(key: string, value: T): Promise { 等待 storage.setItem(`本地:${key}`, value); }, watch(key: string, 回调: (newValue: T | null) => void) { return storage.watch(`local:${key}`, 回调); }, }; ### 类型安全消息传递 // utils/messaging.ts 界面消息{ '获取数据': { 请求：{键：字符串}；响应：{值：任意}； }; } 导出异步函数 sendMessage( 类型：K，有效负载：消息[K]['请求'] ): Promise<消息[K]['响应']> { 返回等待 browser.runtime.sendMessage({ 类型, 负载 }); } ### 脚本注入 // 将脚本注入到页面上下文中从'wxt/client'导入{injectScript}；等待注入脚本（'/injected.js'，{ keepInDom：假， }); ## 构建和部署 ### 生产构建 # 针对特定浏览器构建 npm run build ---browser=chrome npm run build ---browser=firefox # 创建商店就绪的 ZIP npm 运行 zip npm run zip -- --browser=firefox ### 多浏览器构建 # 为所有浏览器构建 npm 运行 zip:all 输出：`.output/my-extension-{版本}-{浏览器}.zip` ## 现代堆栈 (2025) 用于构建 Chrome 扩展程序的流行技术组合： ### WXT + React + Tailwind + shadcn/ui 2025 年最受欢迎的堆栈。将实用优先的样式与预构建的可访问组件相结合。 npm create wxt@latest ---template react-ts npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p npx shadcn@最新 init **最适合：**具有一致设计系统的现代 UI **示例：** ### WXT + React + Mantine UI 完整的组件库，包含 100 多个组件，内置深色模式。 npm create wxt@latest ---template react-ts npm install @mantine/core @mantine/hooks **最适合：**需要复杂组件的功能丰富的扩展 **示例：** ### WXT + React + TypeScript（最小）自定义设计的干净设置，无需 UI 库依赖。 npm create wxt@latest ---template react-ts **最适合：** 简单的扩展或高度定制的设计 ## 高级主题有关高级主题的详细信息，请参阅参考文件： * **React Integration** ：请参阅 `references/react-integration.md` 了解完整的 React 设置、挂钩、状态管理和流行的 UI 库 * **Chrome API** ：请参阅 `references/chrome-api.md` 以获取全面的 Chrome 扩展 API 参考和示例 * **Chrome 140+ 功能** ：请参阅 `references/chrome-140-features.md` 了解最新的 Chrome 扩展 API（sidePanel.getLayout() 等） * **WXT API** ：请参阅 `references/wxt-api.md` 以获取完整的 WXT 框架 API 文档 * **最佳实践**：有关安全性、性能和架构模式，请参阅“references/best-practices.md” ## 故障排除常见问题及解决方案： 1. **模块未找到错误**：确保模块已安装并正确导入 2. **CSP 违规**：更新清单中的 `content_security_policy` 3. **热重载不起作用**：检查浏览器控制台是否有错误 4. **存储不持久**：正确使用`storage.local`或`storage.sync` 有关详细的故障排除，请参阅“references/troubleshooting.md” ## 资源 ### 官方文档 * WXT 文档： * Chrome 扩展文档： * Firefox 扩展文档： ### 捆绑资源 * **scripts/** ：用于常见扩展任务的帮助实用程序 * **references/** ：高级功能的详细文档 * **assets/** ：入门模板和示例组件构建扩展时根据需要使用这些资源。

Chrome 扩展 Wxt

包含技能