DEV Community
·
使用 Vite 和 TypeScript 创建浏览器扩展
💡
原文英文，约800词，阅读约需3分钟。
📝
内容提要
本文介绍了如何创建基本的浏览器扩展，包括清单文件和服务工作者的配置。使用Vite和TypeScript可以提升代码质量和开发效率。通过设置Vite项目并调整配置，最终生成的扩展可在浏览器中加载和测试。
🎯
关键要点
- 本文介绍了创建基本浏览器扩展的结构，包括清单文件和服务工作者。
- 清单文件作为配置文件，定义扩展的权限，服务工作者处理后台任务。
- 使用Vite和TypeScript可以提升代码质量和开发效率。
- Vite提供了树摇和打包压缩等功能，适合与TypeScript一起使用。
- 创建Vite项目时，需删除不必要的文件并保留必要的类型定义文件。
- 安装@types/chrome以解决TypeScript对chrome对象的类型识别问题。
- 需要自定义Vite配置以运行在库模式，并设置输入和输出文件名。
- manifest.json文件应放在public文件夹中，以便在构建时直接复制。
- 通过chrome://extensions页面加载未打包的扩展进行测试。
➡️
