迁移到 WXT

如果在迁移到 WXT 上遇到问题，请通过 GitHub 开始讨论或在 Discord 中寻求帮助！

概览

始终从生成一个新空白项目开始，并逐步将其合并到您的项目中。

cd path/to/your/project
pnpm dlx wxt@latest init example-wxt --template vanilla

通常需要：

  安装 wxt
  在项目 tsconfig.json 中扩展 .wxt/tsconfig.json
  更新或创建 package.json 脚本以使用 wxt（不要忘记 postinstall）
  将入口点移动到 entrypoints/ 目录
  将资产移动到 assets/ 或 public/ 目录
  将 manifest.json 内容移动到 wxt.config.ts
  将自定义导入语法转换为兼容 Vite 的格式
  在 JS 入口点脚本中添加默认导出（defineBackground、defineContentScript 或 defineUnlistedScript）
  使用全局变量 browser 而不是 chrome
  比较最终的 manifest.json 文件，确保权限和主机权限未更改

WARNING

如果您在 Chrome Web Store 上已有 live 扩展，请使用 Google 的更新测试工具 确保没有请求新的权限。

每个项目都不同，因此没有万能的迁移方案。请确保 wxt dev 运行正常，wxt build 生成功能正常的扩展，并且 manifest.json 中的权限未更改。如果一切看起来正常，您就完成了迁移到 WXT 的过程！

常见工具/框架

以下是其他流行框架/工具的具体步骤。

Plasmo

1. 安装 wxt
2. 将入口点移动到 entrypoints/ 目录
   • 对于 JS 入口点，将用于配置您的 JS 入口点的命名导出合并到 WXT 的默认导出中
   • 对于 HTML 入口点，您不能直接使用 JSX/Vue/Svelte 文件，您需要创建一个 HTML 文件并手动创建和挂载您的应用。请参考 React，Vue 和 Svelte 的模板作为示例。
3. 将公共 assets/* 移动到 public/ 目录
4. 如果您使用 CSUI，迁移到 WXT 的 createContentScriptUi
5. 将 Plasmo 的自定义导入分辨率转换为 Vite 的格式
6. 如果通过 URL 引入远程代码，请在前缀中添加 url: 使其与 WXT 相兼容
7. 替换您的 Plasmo 标签（--tag）为 WXT 建模模式（--mode）
8. 比较 migrate 之前和之后的输出 manifest.json 文件。它们的内容应该相同。如果不同，请调整入口点和配置，使其尽可能接近