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

有以下特点：

基于 webpack + react + TypeScript。
这也是个人觉得最大的特点：支持修改 content script 能自动重载扩展和刷新当前页面。这样当你在开发 content script 的时候不需要去扩展管理页面先重载一下扩展再刷新注入了 content script 的页面。
整个项目都 TypeScript 化，包括 webpack 配置和 devServer，使用 ts 配置 webpack 减少你查阅文档和手残的可能
支持 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"]
    }
]

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

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

YuTengjing

2020-01-07 20:16:35 +08:00

@orzorzorzorz #3 可以的，只有修改了 popup 用到的代码才会且只会触发 popup 弹窗页面热更新。
其实 popup 本质就是渲染一个 html 文件，你可以当成一个普通的 SPA 开发。

补充一点知识细节：在我的认知里，chrome 扩展 yej 就是一个包含 manifest.json 的金泰文件最后会被 chrome 扩展托管为一个静态文件服务器，协议就是 chrome://xxx。然后 popup 也就是点击图标后的弹窗本质上就是访问中国静态服务器上的一个 options.html 文件，我们知道现在前端的 SPA 本质上访问的也就是一个 index.html，所以开发 popup 页面和开发普通的 SPA 是没有很大的区别的。不过还是有一些细节上的问题，例如由于 CSP 的限制 chrome 扩展不能执行 eval，内联 js 代码，这个通过配置 manifest.json 的 content_security_policy 字段即可。还有就是我们知道前端路由一般有 BrowserRouter 和 HashRouter 等 Router，因为 BrowserRouter 需要访问的服务器将所有 HTML 页面定向到 Index.html，但是 chrome 托管扩展的静态服务器是没法编程控制它将所有的页面定向到 popup.html，而且也没意义，使用 HashRouter 则刚刚好，又不会因为 URL 带 hash 值比较丑（因为看不到），又实现了前端路由的功能。

YuTengjing

2020-01-07 21:02:08 +08:00

尴尬，前面的回复好多错别字，重新整理了下知识细节部分：
在我的认知里，chrome 扩展本质上就是一个包含 manifest.json 的文件夹，最后会被 chrome 托管为一个静态文件服务器，协议就是 chrome://。然后 popup 也就是点击图标后的弹窗本质上就是访问静态服务器上的一个 options.html 文件。我们知道现在前端的 SPA 本质上访问的也就是一个 index.html，所以开发 popup 页面和开发普通的 SPA 是没有很大的区别的，都可以充分利用 webpack 模块化和热更新。不过还是有一些细节上的问题，例如由于 CSP 的限制 chrome 扩展不能执行 eval，内联 js 代码，这个通过配置 manifest.json 的 content_security_policy 字段即可。还有就是我们知道前端路由一般有 BrowserRouter 和 HashRouter 等 Router，因为 BrowserRouter 需要访问的服务器将所有 HTML 页面定向到 index.html，但是 chrome 托管扩展的静态服务器是没法编程控制它将所有的页面定向到 popup.html，而且也没意义，因为托管的不止一个页面还有 options 等页面。使用 HashRouter 则刚刚好，又不会因为 URL 带 hash 值比较丑（因为看不到），又实现了前端路由的功能。