谷歌扩展基本介绍
chrome扩展在平时能能给我们再来很多的方便之处，比如前端开发的话vue、react对应都有扩展工具，这些工具可以给我们带来了方便
chrome官方并没有给出一个统一的脚手架方案，也没有对目录结构有很多要求，只要符合规范什么技术基本都可以做一个扩展.
manifest.json
这是谷歌浏览器插件的配置文件，要求是必须在文件的根目录.配置文件主要就是设置一些版本，设置一些权限信息，还有一些名称，介绍，图标等信息也在此配置文件中来进行设置,如下面的设置
{
"manifest_version": 3,
"name": "newBook",
"version": "0.1.0",
"description": "一款小工具2",
"icons": {
"84": "./logo.png"
},
"action": {
"default_icon": "./logo.png",
"default_title": "我的插件",
"default_popup": "./index.html"
},
"background": {
"service_worker": "./background.js"
},
"permissions":["storage"]
}
manifest_version:manifest版本，浏览器根据不同的版本加载该版本的功能，不同的版本可能有不同的api调用方法和功能
name:插件名称
version:插件版本
icon:插件管理页面的图标
action:{
default_icon:浏览器右上角图标
default_title:鼠标移到右上角显示什么文字
default_popup:扩展的内容展示，为一个html文件
}
background:后台文件，一个js文件，后续会讲
permissions:权限配置，如果需要某些功能需要加入权限
popup
上面提到过，popup就是点击扩展显示的内容，配置文件配置的html文件就是现实的内容,什么技术都行，不管是原生的还是通过框架和打包工具打包出来的html文件都是可以的
需要注意的是由于谷歌浏览器安全问题，所以此html文件中不能写内联的js，需要通过script标签外部引入js文件的方式
background
manifest提到的background是一个后台常驻文件，在版本号为3种是一个js文件且属性为service_worker,很多教程版本号为2你可能会看到其他写法，它是跟随浏览器的生命周期的,且background的权限很大，基本可以调用所以扩展api
实现一个简单的扩展
现在我们根据manifest.json中的内容来把一些文件补充进来,完整的扩展文件大致如下
然后我们在谷歌浏览器打开扩展程序和开发者模式加载已解压文件选择刚才的文件这样我们的一个扩展就安装好了,如下图
点击service_worker可以在console中看到我们写在background中的输出，点击右上角扩展图标也会发现显示了我们index.html中的内容
content_script
content_script的作用是对指定网页插入需要的js代码或者css样式，js代码中可以使用扩展的api。
manifest.json添加下面内容
"content_scripts": [
{
"matches": ["https://www.baidu.com/"],
"js": ["./content.js"],
"run_at": "document_end"
}
]
改配置的意思是当访问百度的时候加载content.js文件，run at就是执行时间的意思，有三种可能：
"document_start", "document_end", "document_idle",默认为document_idle
document_idle：保证在 DOMContentLoaded 事件之后执行脚本，该事件表示所有静态DOM内容都已解析并可用
document_start:不能获取dom元素
document_end:可以获取dom元素
content.js
const p=document.createElement('h1')
p.innerHTML='hello world'
document.querySelector('#head_wrapper').appendChild(p)
console.log(9999)
这时候我们点击刷新然后访问百度，就可以看到我们新增的hello world了
扩展api
扩展api这边就不做过多赘述，你可以在官网中进行查看，使用部分api的时候别忘了加permission哟 developer.chrome.com/docs/extens…
脚手架制作
如果你想做一个简单的扩展的话其实原生操作dom也是能够轻松完成的，但是如果你对于操作dom很反感，你就想要用框架，那么你就可以自己搭建一个轻量的扩展脚手架，其实很简单，我们这边使用react作为前端开发框架，由于是轻量的脚手架所以我们不用webpack，我们用的是parcel
安装依赖
yarn add parcel-bundler parcel-plugin-clean-dist parcel-plugin-static-files-copy -D
yarn add react react-dom
主要安装parcel的依赖和react的依赖就行了，新建一个index.html，并引入一个外部index.js文件,位置随便放哈，我这边统一放在了src下 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
<script src="./index.js"></script>
</html>
index.js就是普通的React写法就行了
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(<div>hello world</div>,document.querySelector('#root'))
然后我们在package.json下编写如下命令
"start": "parcel ./src/index.html",
"build": "parcel build ./src/index.html --no-source-maps",
执行yarn start如果能够访问页面并且看到了hello world说明就配置正确啦，我们执行玩yarn build命令就会有个dist文件，这个文件其实就是我们扩展加载的文件,但是目前只加入了我们的渲染页面，里面还少了很多的内容比如图标和我们的manifest.json配置文件还有background，所以我们需要在项目根目录下写该内容并且打包的时候把这些文件也原封不动的打包进去就行啦，我们之前装的依赖parcel-plugin-static-files-copy 就是这个作用的啦，我们在package.json下加入以下内容
"staticPath": [
"icon",
"js",
"./manifest.json"
],
意思就是把根目录下的icon、js文件夹manifest.json复制到打包出来的dist下,js文件夹下放的就是我们的background，manifest.json中的各个路径不能写错哟，它是按照dist下的路径来写的，不是你项目根目录哟，我们执行完yarn build后按照之前的步骤加载dist文件就能加载我们基于react的谷歌扩展啦
注意:因为是扩展开发不能够使用yarn start启用开发模式来进行开发，每次开发后都要yarn build然后加载dist即可
