WXT浏览器插件开发中文教程(5)----WXT配置详解之浏览器启动设置

前言

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

浏览器启动设置

请参阅 API 参考 以获取完整的配置列表。

在开发过程中，WXT 使用 Mozilla 提供的 web-ext 自动打开一个已安装您扩展程序的浏览器窗口。

配置文件

您可以在以下三个位置配置浏览器启动：

1. <rootDir>/web-ext.config.ts：此文件不纳入版本控制，允许您为特定项目配置自己的选项，而不会影响其他开发人员

   import { defineWebExtConfig } from 'wxt';
   export default defineWebExtConfig({
     // ...
   });

2. <rootDir>/wxt.config.ts：通过 runner 配置，包含在版本控制中

3. $HOME/web-ext.config.ts：为计算机上的所有 WXT 项目提供默认值

设置浏览器二进制文件

设置或自定义开发期间打开的浏览器：

export default defineWebExtConfig({
  binaries: {
    chrome: '/path/to/chrome-beta', // 使用 Chrome Beta 而不是常规 Chrome
    firefox: 'firefoxdeveloperedition', // 使用 Firefox Developer Edition 而不是常规 Firefox
    edge: '/path/to/edge', // 在运行 "wxt -b edge" 时打开 MS Edge
  },
});

默认情况下，WXT 会尝试自动发现 Chrome/Firefox 的安装位置。但是，如果您将 chrome 安装在非标准位置，您需要像上面所示手动设置它。

持久化数据

默认情况下，为了避免修改浏览器现有的配置文件，web-ext 每次运行 dev 脚本时都会创建一个全新的配置文件。

目前，基于 Chromium 的浏览器是唯一支持覆盖此行为并在多次运行 dev 脚本时持久化数据的浏览器。

要持久化数据，请设置 --user-data-dir 标志：

Mac/Linux

export default defineWebExtConfig({
  chromiumArgs: ['--user-data-dir=./.wxt/chrome-data'],
});

Windows

import { resolve } from 'node:path';
export default defineWebExtConfig({
  // 在 Windows 上，路径必须是绝对路径
  chromiumProfile: resolve('.wxt/chrome-data'),
  keepProfileChanges: true,
});

现在，下次您运行 dev 脚本时，将在 .wxt/chrome-data/{profile-name} 中创建一个持久化配置文件。使用持久化配置文件，您可以安装开发工具扩展程序以帮助开发，允许浏览器记住登录信息等，而不必担心下次运行 dev 脚本时配置文件会被重置。

提示

您可以使用任何目录作为 --user-data-dir，上面的示例为每个 WXT 项目创建了一个持久化配置文件。要为所有 WXT 项目创建一个配置文件，您可以将 chrome-data 目录放在用户主目录中。

禁用打开浏览器

如果您更愿意手动将扩展程序加载到浏览器中，您可以禁用自动打开行为：

export default defineWebExtConfig({
  disabled: true,
});

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