计划使用Vite+TypeScript开发一个谷歌插件demo。GitHub
一 初始化项目
mkdir bing-highlighter-extension
cd bing-highlighter-extension
npm init -y
npm install --save-dev typescript vite @types/chrome
二 MVP
- 鼠标hover到setting面板，面板高度可以平滑transition
- 可以拖拽移动位置
- 用户可以输入想要高亮的关键词
- 可以保存关键词
- 支持高亮
- 可以提交到数据库中（首次加载插件，支持从库中查询保存过的关键词）
注：优先考虑实现前三个feature
三 安装CRXJS Vite Plugin
CRXJS Vite Plugin 是一个开源工具，旨在帮助开发者使用 Vite 构建 Chrome 扩展，提供以下核心功能：
- 简化配置：通过解析 manifest.json 自动处理扩展所需的入口文件（如 popup、content scripts、background scripts），无需手动配置多个入口点。
- 支持 HMR：提供热模块替换（Hot Module Replacement），支持 popup 页面和 content scripts 的实时更新，提升开发效率。
- 静态资源管理：自动处理静态资源（如图片、CSS）并更新 manifest.json 的 web_accessible_resources，确保资源在扩展中可访问。
- Manifest V3 支持：完全兼容 Chrome 扩展的 Manifest V3 规范，适应最新的扩展开发要求。
- 框架无关：支持 React、Vue、TypeScript 或纯 JavaScript 等多种技术栈。
CRXJS 的核心理念是减少Chrome 扩展开发的配置负担，让开发者专注于功能实现，而不是构建工具的复杂设置。
npm install --save-dev @crxjs/vite-plugin
