子舒的博客
·
使用 wxt 框架开发浏览器扩展时遇到的问题解决方案
💡
原文中文，约1400字，阅读约需4分钟。
📝
内容提要
最近使用wxt框架开发浏览器扩展，记录了一些问题。通过使用Shadow Root，可以避免content-scripts对网站的侵入式影响，并渲染App.vue组件。配置中包括权限设置和内容脚本的注入。
🎯
关键要点
- 使用 wxt 框架开发浏览器扩展时，记录了一些问题。
- 通过使用 Shadow Root，可以避免 content-scripts 对网站的侵入式影响。
- 可以引入并渲染 App.vue 组件。
- 配置中包括权限设置，如存储和插入脚本。
- 在构建过程中生成的清单中，可以注入内容脚本和样式。
❓
延伸问答
如何使用 wxt 框架开发浏览器扩展？
使用 wxt 框架开发浏览器扩展时，可以通过配置权限和内容脚本的注入来实现功能。
什么是 Shadow Root，它有什么作用？
Shadow Root 是一种技术，可以避免 content-scripts 对网站的侵入式影响，确保扩展的样式和功能不干扰页面。
如何在 wxt 框架中渲染 App.vue 组件？
可以通过创建 Shadow Root UI，并在 onMount 回调中使用 Vue 的 createApp 方法来渲染 App.vue 组件。
wxt 框架的配置中需要哪些权限？
wxt 框架的配置中需要包括存储和插入脚本的权限。
如何在构建过程中注入内容脚本和样式？
在构建过程中，可以通过 hooks 中的 'build:manifestGenerated' 来注入内容脚本和样式。
使用 wxt 框架开发扩展时可能遇到哪些问题？
在使用 wxt 框架开发扩展时，可能会遇到与权限设置、内容脚本注入和组件渲染相关的问题。
➡️
