1.基础知识

说简单点就是一个mainfest配置文件，然后一个html,一个js就完事了一个插件

mainfest.json主要配置文件 插件名称，版本号，图标，权限等信息

*.html 用于想用户展示信息于用户交互的界面，如插件的设置界面等

*.js 用于实现插件的逻辑功能，并不要求必须放在js文件夹下

剩下不太重要的文件：css,png图片等

2.mainfest.json主要配置文件

"manifest version": 2,
"name":"budgetManager",            //浏览器插件名字
"version": “1.0",
"description": "hello world 插件"  //插件内容介绍

"icons":{                          //图片
  "128":"img/logo.png",
  “48":"img/logo.png",
  "16":"img/logo.png"

"browser_action":{
  "default icon":"img/logo.png",     //默认图片
  "default_popup":"popup.html"       //默认执行文件
}，

"content_scripts":      //内容脚本，进入匹配的网页matches，自动注入js
  [
    {
	"matches": ["https://web.XXXX.com"],//设置匹配的网址
	"js": ["js/XXX.js"],      //设置注入的js
	"run_at": "document_start"           //设置注入的时机
    }
 ],
"permissions":[                    //配置 ，主要选择一些功能
  "storage"
  "options_page": Ioptions.html"     //选项页面

3.background里面设置一些功能

chrome.webNavigation.onCompleted可以设置网页，在进入网页的时候自动触发插件

4.在electron中使用插件

在浏览器中使用插件就不细说了，大家肯定都知道，直接引入或者本地crx.

这里说一下自己的electron项目中怎么引入自己开发的插件

这里就不得不说到electron的session模块了，可以用来引入插件和设置useragent,还有很多功能大家可以看官方文档。

const { app, session } = require('electron')  
const path = require('path')  
  
app.on('ready', async () => {  
  await session.defaultSession.loadExtension(//这里注意是异步的哈
    path.join(__dirname, 'react-devtools'),  //插件的地址
    {id:'xxx_extension_id'},                 //设置id,浏览器插件会默认生成很长那个字符串id
    { allowFileAccess: true }                //开启本地文档是否可用
  )  
})

5.开发插件的话，谷歌有很多API

谷歌官方文档

注意有些要声明一下

  "permissions":["notifications"],