今天我介绍一下如何开发一个google插件，这篇文章主要是介绍一下整体的框架，具体细节不会过多讲解。

一、什么是google插件

google插件是安装在google浏览器中的扩展程序，这个扩展程序也是基于html、css、js开发而来的，并且浏览器提供了额外的API供扩展程序使用。



目前最新插件API版本是v3，v2版本会逐步被淘汰（网络上大部分插件api教程都是基于v2版本的，v3版本有很多不兼容变化，此次分享为v3版本）

开发的google插件可以应用到以Chromium为内核的浏览器中，如360浏览器、qq浏览器等

二、google插件可以做什么

google插件可以做什么主要是看google插件提供什么样功能的API：google api
● tabs：浏览器窗口操作功能：增删改查截图等
● cookie：cookie操作功能
● network：网络拦截功能
…
● 书签控制；
● 下载控制；
● 窗口控制；
● 标签控制；
● 网络请求控制，
● 各类事件监听；

三、如何开发google插件

插件本身是使用html、js、css构成

1.插件组成结构
  1. 配置文件manifest.json
  2. 后台脚本background.js
  3. 交互弹框popup.html、popup.js、popup.css
  4. content_script.js

1.配置文件主要是配置关于插件的信息，比如版本、icon、权限配置等。
2.后台脚本background.js主要是一个全局的js逻辑，如果你的插件不需要全局的js逻辑，这个文件可不需要
3.交互弹框是插件和用户交互的逻辑，本质就是一个弹窗html
4.content_script是操作网页的js，如果插件没有对网页的操作逻辑也可不需要

2.生命周期和环境

后台脚本在浏览器打开时一直存在，在浏览器关闭后卸载。注意background虽然是js但是它并不存在window、document、XHR、DOM等对象，可以理解为background是浏览器环境（background可访问Chrome对象、fetch）
交互弹框popup.js是在用户点击打开弹框后存在，弹框关闭后卸载。它有dom环境，但是它只能访问popup.html的DOM
content_script.js是插入到网页中的js，所以它能访问和操作网页中的DOM元素，content_script使用分为两种方式：静态插入和动态插入

3.如何结合框架使用（react/vue）

一个基本插件只包含上述的html、js、css。若用原始的方式去开发插件是非常影响效率，我们需要自己去操作很多的dom，并且npm包也不能直接使用
我们可以用npm、ts、react开发插件，然后使用webpack去打包。
这里注意一点：webpack一般只有一个入口文件，但是background.js和content_script.js并不会在popup.js中引入，所以webpack的配置也是多入口配置

const path = require("path");

module.exports = {
   
   
  entry: {
   
   
    main: "./src/main.tsx",
    content_script: "./src/content_script.ts",
    background: "./src/background.ts",
  },
  output: {
   
   
    filename: "[name].js",
    path: path.resolve(__dirname, "dist"),
    clean: true,
  },
  mode: "production",
  resolve: {
   
   
    e