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,
});

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

相关推荐
两个西柚呀3 小时前
未在props中声明的属性
前端·javascript·vue.js
子伟-H55 小时前
App开发框架调研对比
前端
桃子不吃李子5 小时前
axios的二次封装
前端·学习·axios
SteveJrong5 小时前
面试题 - JavaScript
前端·javascript·面试·ecmascript·基础·找工作·红宝书
阿金要当大魔王~~6 小时前
uniapp 页面标签 传值 ————— uniapp 定义 接口
前端·javascript·uni-app·1024程序员节
全栈软件开发6 小时前
uniapp三端影视源码苹果cms自动采集电影视频网站源码前端源码带VIP
前端·uni-app·影视源码
chxii6 小时前
10.4FormData :前端文件上传与表单数据处理的核心工具
前端
AntBlack7 小时前
不当韭菜 : 好像真有点效果 ,想藏起来自己用了
前端·后端·python
楊无好7 小时前
react中props的使用
前端·react.js·前端框架
一个处女座的程序猿O(∩_∩)O7 小时前
Vue-Loader 深度解析:原理、使用与最佳实践
前端·javascript·vue.js