WXT浏览器插件开发中文教程(16)----针对不同浏览器进行构建

前言

大家好，我是倔强青铜三 。是一名热情的软件工程师，我热衷于分享和传播IT技术，致力于通过我的知识和技能推动技术交流与创新，欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！

针对不同浏览器进行构建 ​

使用 WXT 构建扩展程序时，您可以创建多个构建版本，针对不同的浏览器和清单版本。

针对特定浏览器 ​

使用 -b 命令行标志为特定浏览器创建独立的扩展构建。默认情况下，目标浏览器是 chrome。

wxt            # 等同于：wxt -b chrome
wxt -b firefox
wxt -b custom

在开发过程中，如果您针对 Firefox，Firefox 将会打开。其他字符串默认会打开 Chrome。要自定义打开的浏览器，请参阅 设置浏览器二进制文件。

此外，WXT 定义了一些您可以在运行时使用的常量，以检测正在使用的浏览器：

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

更多详情请参阅 内置环境变量。

针对特定清单版本 ​

要针对特定的清单版本，请使用 --mv2 或 --mv3 命令行标志。

默认清单版本

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

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

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

过滤入口点 ​

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

以下是一些示例：

• 仅在针对 firefox 时构建的内容脚本：

  export default defineContentScript({
    include: ['firefox'],
    main(ctx) {
      // ...
    },
  });

• 仅在非 chrome 目标中构建的 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 配置来列出您想要构建的所有入口点。

最后感谢阅读！欢迎关注我，微信公众号 ：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！