使用 WXT 开发浏览器插件(上手使用篇)

WXT (wxt.dev/), Next-gen Web Extension Framework. 号称下一代浏览器开发框架. 可一套代码 (code base) 开发支持多个浏览器的插件.

上路~

WXT 提供了脚手架可以方便我们快速进行开发,但是我们得先安装好环境依赖,这里我们使用 npm, 所以需要安装下 node,可以参考 nodejs.org/en.

shell 复制代码
# 直接基于脚手架创建项目
npx wxt@latest init yeshan-bowser-extensoin

cd yeshan-bowser-extensoin
# 安装依赖
npm install --registry=https://registry.npmmirror.com

# 开始调试插件
npm run dev

QAQ - WSL2 下开发遇到的问题

使用 WSL2 进行开发的时候,npm run dev 在 wsl 是没办法自动打开浏览器的,会吐出如下问题:

shell 复制代码
WARN  Cannot open browser when using WSL. Load ".output/chrome-mv3" as an unpacked extension manually

大概看了下 wxt 的实现,它是通过 web-ext 跟进指定的浏览器的 bin 文件(默认为 chromium)启动浏览器装载开发好的插件. 曾经通过文章 chromium-in-wsl2 提到的办法直接在 wsl2 安装了 chromium,还是没能解决此问题😂😣. 翻了下官方仓库的 issue,有关联问题 github.com/wxt-dev/wxt..., 本质上是 web-ext 的 BUG issuecomment-1837565780,截至 2024/3/15 还未修复.

解决方法

没办法了,如果还想继续用 wsl 做开发,只能手动加载插件了,在 windows 上打开 chrome 后,地址栏输入 chrome://extensions/ 转到插件管理页 (记得开启开发者模式) -> 加载已解压的扩展程序:

我们要加载的插件目录是在 wsl 中的(即: .output/chrome-mv3/),好在 Window 和 wsl2 的文件文件系统是打通的,可以相互访问,我们可以使用 wslutils 提供的工具获取在 Windows 下可以访问的路径

shell 复制代码
# 获取 windows 文件管理器可以访问的地址
❯ wslpath -w .output/chrome-mv3/
\\wsl.localhost\Ubuntu-20.04\home\yeshan333\workspace\github\yeshan-bowser-extensoin\.output\chrome-mv3

Done , 搞定咯,可以愉快码代码了

本文由博客一文多发平台 OpenWrite 发布!

相关推荐
渡梦酒15 分钟前
软考软件评测师——计算机组成与体系结构(分级存储架构)
架构
水花花花花花2 小时前
Transformer 架构在目标检测中的应用:YOLO 系列模型解析
目标检测·架构·transformer
喵叔哟2 小时前
22.【.NET8 实战--孢子记账--从单体到微服务--转向微服务】--单体转微服务--增加公共代码
微服务·架构·.net
EulerBlind2 小时前
【架构】RUP统一软件过程:企业级软件开发的全面指南
架构
CopyLower4 小时前
Java在微服务架构中的最佳实践:从设计到部署
java·微服务·架构
却道天凉_好个秋6 小时前
系统架构设计(十一):架构风格总结2
架构·系统架构
霸王蟹6 小时前
React Fiber 架构深度解析:时间切片与性能优化的核心引擎
前端·笔记·react.js·性能优化·架构·前端框架
欧先生^_^9 小时前
Node.js 源码架构详解
架构·node.js
星川皆无恙12 小时前
大模型学习:Deepseek+dify零成本部署本地运行实用教程(超级详细!建议收藏)
大数据·人工智能·学习·语言模型·架构
AI_Auto13 小时前
数字化转型- 数字化转型路线和推进
架构·数字化·制造业