WXT 中文文档

Appearance

针对不同浏览器构建 ​

使用 WXT 构建扩展时，你可以为不同的浏览器和清单版本创建多个构建版本。

指定目标浏览器 ​

使用 -b CLI 标志为特定浏览器创建单独的扩展构建。默认目标浏览器为 chrome。

sh
wxt            # 等同于: wxt -b chrome
wxt -b firefox
wxt -b custom

在开发过程中，如果你指定 Firefox 作为目标，Firefox 将会打开。其他所有字符串默认打开 Chrome。要自定义打开哪些浏览器，请参阅设置浏览器路径。

此外，WXT 定义了几个常量，你可以在运行时使用它们来检测当前使用的浏览器：

ts
if (import.meta.env.BROWSER === 'firefox') {
  console.log('仅在 Firefox 构建中执行某些操作');
}
if (import.meta.env.FIREFOX) {
  // 简写形式，等同于上面的 if 语句
}

阅读内置环境变量了解更多详情。

指定目标清单版本 ​

要指定特定的清单版本，使用 --mv2 或 --mv3 CLI 标志。

默认清单版本

默认情况下，WXT 会为 Safari 和 Firefox 使用 MV2，为其他所有浏览器使用 MV3。

与浏览器类似，你可以使用内置环境变量在运行时获取目标清单版本：

ts
if (import.meta.env.MANIFEST_VERSION === 2) {
  console.log('仅在 MV2 构建中执行某些操作');
}

过滤入口点 ​

每个入口点都可以通过 include 和 exclude 选项，在指定特定浏览器时被包含或排除。

以下是一些示例：

  • 仅在目标为 firefox 时构建的内容脚本：

    ts
    export default defineContentScript({
  include: ['firefox'],

  main(ctx) {
    // ...
  },
});

  • 为除 chrome 之外的所有目标构建的 HTML 文件：

    html
    <!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="manifest.exclude" content="['chrome', ...]" />
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

或者，你可以使用 filterEntrypoints 配置来列出所有你想要构建的入口点。