如何开发一个google插件(二)

前言

在上一篇文章如何开发一个google插件(一)里主要介绍了google插件的基本结构。
在这篇文章中主要结合react+webpack进行一个代码演示，源码地址：源码地址

下载源码后打开浏览器的扩展程序管理->加载已解压的扩展程序，即可调试插件

此插件主要作为一个学习插件开发的例子：

1. 学习如何结合react、webpack、ts开发插件
2. 学习如何使用google api
3. 学习如何用插件操作网页
4. 学习插件通信方法

开发流程

1. 安装依赖npm install
2. 执行npm run dev(此时webpack会监听代码改动并自动构建)

目录结构

├── dist                               
│   ├── background.js                        # 打包后的backgroundjs
│   ├── content_script.js                    # 打包后的content_scriptjs
│   └── main.js                    	         # 打包后的popupjs
├── src
│   ├── App.less                             # popup的css
│   ├── App.tsx           					 # popup的根组件
│   ├── main.tsx                             # popup的入口js文件
│   ├── background.ts                        # backgroundjs逻辑
│   └── content_script.ts                    # content_scriptjs逻辑
├── index.html                               # popup.html
├── manifest.json                            # 插件配置文件
├── package.json                            
├── README.md                          
├── tsconfig.json                            # ts配置文件
└── webpack.config.