热更新：Chrome 插件开发提效

热更新：Chrome 插件开发提效

原文

Chrome Manifest V3 + Webpack5 + React18 热更新提升开发效率。

解决的问题

开发 Chrome 插件的同学想必都会遇到一个问题：
每次更新代码需要在 chrome://extensions 扩展程序中

1. 找到对应的插件点击刷新按钮
2. 重新点击唤起插件查看效果

特别的繁琐，严重影响开发效率。

本文借助 create-react-app reject 后的工程，改造实现：

1. 支持现代 Web 开发一样的体验，React、TS、热更新（react-refresh）等
2. 支持修改 popup 时，实时局部热更新
3. 支持修改 content、background 时，无需手动刷新
4. 支持静态资源 public 目录文件变动自动更新

实现过程

npx create-react-app crx-app --template typescript
1

进入工程目录

npm run eject
1

打包多文件

可能需要输出以下打包文件：

1. main：主入口，create-react-app 项目主文件，可以用来本地网页开发时预览 popup、tab、panel、devtools 等
2. popup、tab、panel、devtools 等输出 html，供 Chrome 插件展示页面
3. content、background 输出 js，用来 Chrome 插件通信

一、 新增 config/pageConf.js，开发只需按需配置需要打包的输出的文件，内部自动会处理。

module.exports = {
   
  main: {
    // 必须需要 main 入口
    entry: 'src/pages/index',
    template: 'public/index.html',
    filename: 'index', // 输出为 index.html，默认主入口
  },
  background: {
   
    entry: 'src/pages/background/index',
  },
  content: {
   
    entry: 'src/pages/content/index',
  },
  devtools: {
   
    entry: 'src/pages/devtools/index',
    template: 'public/index.html',
  },
  newtab: {
   
    entry: 'src/pages/newtab/index',
    template: 'src/pages/newtab/index.html',
  },
  options: {
   
    entry: 'src/pages/options/index',
    template: 'src/pages/options/index.html',
  },
  panel: {
   
    entry: 'src/pages/panel/index',
    template: 'public/index.html',
  },
  popup: {
   
    entry: 'src/pages/popup/index',
    template: 'public/index.html',
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

对应说明

type PageConfType = {
    
  [key: string]
1
2