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

相关推荐
是店小二呀3 小时前
如何提升后端开发效率:从Spring Boot到微服务架构
spring boot·微服务·架构
爱的叹息18 小时前
MongoDB 的详细解析,涵盖其核心概念、架构、功能、操作及应用场景
数据库·mongodb·架构
AWS官方合作商18 小时前
实战解析:基于AWS Serverless架构的高并发微服务设计与优化
架构·serverless·aws
网络安全指导员19 小时前
如何在JMeter中配置断言,将非200状态码视为测试成功
网络·学习·jmeter·安全·web安全·架构
Java技术小馆1 天前
如何设计一个本地缓存
java·面试·架构
数据智能老司机1 天前
CockroachDB权威指南——SQL调优
数据库·分布式·架构
数据智能老司机1 天前
CockroachDB权威指南——应用设计与实现
数据库·分布式·架构
数据智能老司机1 天前
CockroachDB权威指南——CockroachDB 模式设计
数据库·分布式·架构
uhakadotcom2 天前
视频直播与视频点播:基础知识与应用场景
后端·面试·架构
沉登c2 天前
第 3 章 事务处理
架构