谷歌浏览器插件开发简介
最近业务需求需要做一个浏览器插件，于是我立马去查了有关浏览器插件的开发资料，这里整理一下。建议开发中还是直接看开发文档然后再动手写。
谷歌官方开发文档（需要科学上网）
360 浏览器插件开发文档 （这个文档写的很齐，应该是直接翻译谷歌的开发文档所来的。）
# 浏览器插件介绍
浏览器的插件其实本质就是与 web 页面的交互，所以大家就知道其实插件就是 js 脚本，当然可以加载 css 静态文件和 HTML 文件，但是主角还是 js。至于为什么开发谷歌浏览器插件，当然是因为国内的浏览器基本都是基于谷歌的内核开发的，所以受众面最广，毕竟 Firefox 和 Opera 以及苹果的 Safari 浏览器还是比较小众
# 配置文件
{
"name": "插件名字",
"manifest_version": 2,
"version": "版本名称",
"homepage_url": "插件的url地址",
"description": "插件描述",
"permissions": [
"cookies",
"activeTab",
"contextMenus",
"tabs",
"storage",
"webRequest",
"management",
"webRequestBlocking",
"*://*/*"
],
"icons": {
"48": "图片绝对路径",
"128": "图片绝对路径"
},
"background": {
"page": "background.html" # 常驻后台的HTML文件
// "scripts": ["js/background.js"] # 也可以选择直接加载js文件
// "persistent": false # 在需要的时候才挂起background服务
},
"browser_action": {
"default_icon": "浏览器的默认图标文件",
"default_title": "插件的默认title",
"default_popup": "popup.html" #默认的popup文件，后面会讲
},
"content_scripts": [
{
"matches": [
"插件作用的url地址" #可以写正则来匹配url
],
"js": [
"js/jquery-3.3.1.min.js", #加载的js文件
"js/contentscript.js"
],
"css": [
"css/style.css" #加载的css文件
],
"run_at": "document_end"
}
]
}
以上就是 manifest.json 的大概内容，一般的插件开发所需要的配置基本这些就够了。这边需要注意的是一些必填项。"name", "manifest_version", "version" 这三个字段是必须的。其中"manifest_version"的值必须是 2，"permissions"为插件所需要用到的权限。
# background.html
这个文件是常驻文件，就是一旦开启插件使用的时候，就会生效，也会随着插件关闭或者浏览器关闭而失效。一般来说可以用来写一些监听事件，因为它是常驻的。如下图，我们可以把交互代码写到 background.js 里面，background.html 负责加载 js 文件。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/background.js"></script>
</head>
<body></body>
</html>
# popup.html
popup.html 为弹出菜单窗口，什么是弹出菜单窗口呢？
# welcome.html
看名字大概就知道什么意思了，这个文件就是用户成功添加插件的时候弹出的页面文件。也是可以加载 js 文件。不过要监听插件安装成功或者更新的事件来调用。可以在 background.js 监听：
// background.js
chrome.runtime.onInstalled.addListener(function(details) {
if (details.reason == "install") {
// 插件安装成功
chrome.tabs.create({ url: "welcome.html" }); // 插件安装成功后添加欢迎页面
} else if (details.reason == "update") {
// 插件升级成功
chrome.tabs.create({ url: "welcome.html" }); // 插件更新成功后添加欢迎页面
}
});
# contentscript.js
这个 js 文件就是整个插件的灵魂，几乎所有的开发精力都会花在此文件中，主要的页面交互都是写在这里，当然你也可以分拆引入到这个文件。可以调用谷歌提供的 api 完成一系列的交互。建议大家看英文原版的谷歌官方 API 文档。还有如果需要在页面增加 HTML 内容的话，只能用 js 生成渲染，这点比较蛋疼。
谷歌 API 文档 （需求科学上网）
# 打包发布
# 结语
以上是大概的谷歌浏览器插件开发流程和大概的了解，其实还是建议大家去通读开发文档和谷歌 API 文档，写的都比较通彻易读，工欲善其事必先利其器。需求定下来之后先花一两天的时间学(mo)习(yu)是我们程序员的日常操作 😏，至于定的发布日期嘛，肯定是熬(shan)夜(ku)加(pao)班(lu)啦。
