自荐一下我写的 chrome 扩展开发模板

有以下特点：

1. 基于 webpack + react + TypeScript。
2. 这也是个人觉得最大的特点：支持修改 content script 能自动重载扩展和刷新当前页面。这样当你在开发 content script 的时候不需要去扩展管理页面先重载一下扩展再刷新注入了 content script 的页面。
3. 整个项目都 TypeScript 化，包括 webpack 配置和 devServer，使用 ts 配置 webpack 减少你查阅文档和手残的可能
4. 支持 sass/less CSS 扩展语言，使用 mini-css-extract-plugin 插件将 CSS 分离成 content CSS Script。也就是说你只需要你编写的 content js script，然后导入对应 style 文件，就可以像下面这样配置 manifest.json:

"content_scripts": [ { "matches": ["https://github.com/pulls"], "css": ["css/pulls.css"], "js": ["js/pulls.js"] } ] 

1. 使用 eslint 和相关插件 lint TypeScript，babel 编译 TypeScript，fork-ts-checker-webpack-plugin 检查 TypeScript 类型。

   eslint 取代 tslint 已经是必然的趋势，相关插件也比较成熟了。

   使用 babel 编译 ts 的好处是可以使用各种现有的 babel 插件，例如你用了 antd 作为 UI 组件库的化可以使用 babel-plugin-import 配置按需导入，使用 babel-plugin-lodash 配置 lodash 的按需导入，但是如果用 ts-loader 就没法用了。

2. 由于 chrome 的限制，官方的 chrome 扩展 react devtools 并不能审查 chrome-extension:// 协议的页面如 options，popup 页面。所以需要使用独立的 react devtools，模板也对这一点进行了支持，并且配置了 react/react hooks 的 hot reload。

项目地址: awesome-chrome-extension-boilerplate