1. React+Antd 项目初始化
这里项目初始化不做过多介绍，直接通过脚手架初始化一个基础的react项目
2. Chrome Extension基础
2.1 Chrome Extension的组成
简单来说，开发Chrome Extension主要涉及以下四个部分：
manifest.json （插件配置文件）
popup (点击插件图标弹出的页面)
content script (插入到目标页面中执行的js)
background script (在chrome后台中运行的程序)
【manifest.json】
manifest.json必须放在插件项目根目录，里面包含了插件的各种配置信息，其中也包括了popup、content script、background script等路径。
【popup】
作为一个独立的弹出页面，有自己的html、css、js，可以按照常规项目来开发。
【content script】
content script是驻入到目标页面中执行的js脚本，可以获取目标页面的Dom并进行修改。但是，content script的JavaScript与目标页面是互相隔离的。也就是说，content script与目标页面不会出现互相污染的问题，同时，也不能调用对方的方法。以上只是js作用域的隔离，通过content script向目标页面加入的DOM会是可以使用目标页面的css，从而造成css互相污染。
【background script】
background script 常驻在浏览器后台运行，没有实际页面（当然也可以通过manifest.json指定一个页面，如果不设置，chrome会自动生成一个），它的生命周期随着浏览器打开而开始，随着浏览器关闭而结束。一般把全局的、需要一直运行的代码放在这里。重要的是，background script的权限非常高，除了可以调用几乎所有Chrome Extension API外，还可以跨域发请求。
2.2 配置manifest.json
在开发Chrome Extension之前，要先配置好manifest.json。
public/manifest.json
manifest的配置项还有很多，可前往官网查阅：
manifest：
<https://developer.chrome.com/extensions/manifest>
manifest_version：
<https://developer.chrome.com/extensions/manifest/manifest>
background script：
<https://developer.chrome.com/extensions/background_pages>
content script：
<https://developer.chrome.com/extensions/content_scripts>
permissions：
<https://developer.chrome.com/extensions/declare_permissions>
3. 开发结构设计
本文按照以下目录结构进行开发，后续章节的webpack配置也是基于此目录结构。
这种目录结构设计，将background script、content script、popup分别建立独立的目录，并且设置了api、common等公用目录，方便多人协作开发，便于后续维护。
为了让 src/background/index.js、src/content/index.js、scr/popup/index.js 按照预期分别编出对应的文件，需要设置多入口。
设置 config/webpack.config.js：
以上修改就是将原来的entry换成了对象，每个对象的key对应一个入口。
对config/webpack.config.js做如下修改，设置index.html只引入main.js，否则popup页面会把background/index.js和content/index.js也引入。如下图红框内，除了main.bundle.js，其他都不应该被加载。：
到此为止，基于react开发Chrome Extension的工程构建基本配置完成了。下面开始就是基本项目开发环节。
