使用 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 发布!

相关推荐
程序员不迷路6 小时前
湖仓一体学习-数据架构演进路线
架构
stormsha7 小时前
飞算JavaAI炫技赛电商系统商品管理模块的架构设计与实现
java·架构·鸿蒙系统
minh_coo7 小时前
Spring框架事件驱动架构核心注解之@EventListener
java·后端·spring·架构·intellij-idea
海上生明月丿10 小时前
微服务02
微服务·架构
RestCloud10 小时前
iPaaS 与传统 ESB 的区别,企业该如何选择?
前端·架构
百度智能云11 小时前
MySQL内核革新:智能拦截全表扫描,百度智能云守护数据库性能与安全
架构
LQ深蹲不写BUG11 小时前
微服务事务管理利器:Seata 核心原理与实践指南
微服务·云原生·架构
失散1311 小时前
分布式专题——5 大厂Redis高并发缓存架构实战与性能优化
java·redis·分布式·缓存·架构
kida_yuan12 小时前
【从零开始】12. 一切回归原点
python·架构·nlp
正在起飞的蜗牛13 小时前
【C语言】函数指针的使用分析:回调、代码逻辑优化、代码架构分层
c语言·架构