在之前的章节中，已经把 chrome extension 的基本概念学习了一遍。那在我们实际上手开发时，莫非也要像最初的前端一样，使用index.html 和 index.js 组织代码？
2024年了，前端工程化早已不是新鲜事，我们可以使用框架来进行扩展的开发，引入 vue / react 来写界面，使用 webpack / vite 来进行代码打包与开发，这都不是事。
在 Vite 发展如此迅速的当下，我推荐使用 Vite 作为 bundler。在 Awesome Vite 中，我们可以找到一些现成的框架，例如：
- chrome-extension-boilerplate-react-vite - React + TypeScript + SASS + Prettier + ESLint + GitHub Actions + Chrome Extension Manifest v3.（1.5k star）
- chrome-ext-template-preact-windi-vite - Preact, Windi CSS, TypeScript, Prettier, ESLint, GitHub Actions and Chrome Extension Manifest v3.（66 star）
- vite-vue3-chrome-extension-v3 - Web extension starter template for Chrome, Firefox and Edge.（279 star）
这些框架都提供了开箱即用的开发热更新、打包等功能，我们可以按需选用。
我自己在开发过程中，选取了最高 star 数的 chrome-extension-boilerplate-react-vite 作为框架，使用起来体验十分良好。它的项目结构也十分地明确，我们只需要在对应的文件夹下进行代码开发即可：
.
├── pages
│ ├── background # 后台环境
│ ├── content # 内容脚本
│ ├── devtools # 开发者工具
│ ├── newtab # 新标签页
│ ├── options # 扩展选项页
│ ├── panel # 开发者工具页面
│ ├── popup # popup弹窗页面
│ └── sidepanel # 侧边栏页面
