rxliuli blog
·
Browser Extension Dev - 02. 使用 WXT
💡
原文中文，约6100字，阅读约需15分钟。
📝
内容提要
本文介绍了WXT，一个用于浏览器扩展开发的框架，类似于Vite。WXT支持TypeScript、Npm和React等现代工具，简化了跨浏览器扩展的构建过程，提供热更新和标准化的消息通信，提升开发效率。
🎯
关键要点
- WXT 是一个用于浏览器扩展开发的框架，类似于 Vite，基于 Vite 实现。
- WXT 支持 TypeScript、Npm、React 等现代前端开发工具，适合熟悉现代 Web 工具链的开发者。
- WXT 解决了跨浏览器构建的问题，支持 Chrome、Firefox 和 Safari，简化了打包过程。
- WXT 提供热更新功能，开发者不再需要手动刷新浏览器。
- WXT 提供标准化的消息通信和内容脚本 UI 注入方法，解决了复杂 UI 注入的挑战。
- 使用 WXT 初始化项目时，项目结构清晰，配置简化。
- WXT 的 manifest 配置简化，许多部分自动推导，不再需要手动处理。
- WXT 的内容脚本定义直观，将代码和配置结合在一起，提升了开发效率。
- 扩展图标只需放置在指定目录，WXT 会自动识别并使用合适的图标尺寸。
❓
延伸问答
WXT是什么？
WXT是一个用于浏览器扩展开发的框架，类似于Vite，基于Vite实现。
WXT支持哪些现代开发工具？
WXT支持TypeScript、Npm、React等现代前端开发工具。
使用WXT开发扩展有什么优势？
WXT简化了跨浏览器构建，支持热更新和标准化的消息通信，提升开发效率。
如何初始化一个WXT项目？
使用命令 'pnpm dlx wxt@latest init 02-use-wxt --template vanilla --pm pnpm' 来初始化项目。
WXT如何处理扩展的manifest配置？
WXT的manifest配置简化，许多部分自动推导，不再需要手动处理。
如何在WXT中添加扩展图标？
只需将图标放置在./public/icon/目录，WXT会自动识别并使用合适的图标尺寸。
➡️
