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

前言

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

浏览器启动设置

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

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

配置文件

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

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

    ts 复制代码
    import { defineWebExtConfig } from 'wxt';
    export default defineWebExtConfig({
      // ...
    });
  2. <rootDir>/wxt.config.ts:通过 runner 配置,包含在版本控制中

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

设置浏览器二进制文件

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

ts 复制代码
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

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

Windows

ts 复制代码
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 目录放在用户主目录中。

禁用打开浏览器

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

ts 复制代码
export default defineWebExtConfig({
  disabled: true,
});

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

相关推荐
lee5762 小时前
老是忘记package.json,备忘一下 webpack 环境下 Vue Cli 和 Vite 命令行工具对比
vue.js
喝拿铁写前端3 小时前
前端与 AI 结合的 10 个可能路径图谱
前端·人工智能
codingandsleeping3 小时前
浏览器的缓存机制
前端·后端
-代号95274 小时前
【JavaScript】十二、定时器
开发语言·javascript·ecmascript
灵感__idea5 小时前
JavaScript高级程序设计(第5版):扎实的基本功是唯一捷径
前端·javascript·程序员
摇滚侠5 小时前
Vue3 其它API toRow和markRow
前端·javascript
難釋懷5 小时前
JavaScript基础-history 对象
开发语言·前端·javascript
beibeibeiooo5 小时前
【CSS3】04-标准流 + 浮动 + flex布局
前端·html·css3
拉不动的猪5 小时前
刷刷题47(react常规面试题2)
前端·javascript·面试
浪遏5 小时前
场景题:大文件上传 ?| 过总字节一面😱
前端·javascript·面试