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

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

相关推荐
鱼樱前端1 小时前
uni-app快速入门章法(二)
前端·uni-app
silent_missile1 小时前
vue3父组件和子组件之间传递数据
前端·javascript·vue.js
克里斯蒂亚诺更新2 小时前
微信小程序app.js中每30秒调用一次wx.getLocation
javascript·微信小程序·小程序
IT_陈寒2 小时前
Vue 3.4 实战:这7个Composition API技巧让我的开发效率飙升50%
前端·人工智能·后端
鄃鳕2 小时前
C++坑系列,C++ std::atomic 拷贝构造函数问题分析与解决方案
java·javascript·c++
JIngJaneIL3 小时前
图书馆自习室|基于SSM的图书馆自习室座位预约小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·图书馆自习室
少年阿闯~~3 小时前
HTML——1px问题
前端·html
Never_Satisfied3 小时前
在JavaScript / HTML中,实现`<iframe>` 自适应高度
开发语言·javascript·html
Mike_jia4 小时前
SafeLine:自托管WAF颠覆者!一键部署守护Web安全的雷池防线
前端
brzhang4 小时前
把网页的“好句子”都装进侧边栏:我做了个叫 Markbox 的收藏器,开源!
前端·后端·架构