谷歌浏览器插件开发简介
最近业务需求需要做一个浏览器插件,于是我立马去查了有关浏览器插件的开发资料,这里整理一下。建议开发中还是直接看开发文档然后再动手写。
谷歌官方开发文档 (opens new window)(需要科学上网)
360 浏览器插件开发文档 (opens new window) (这个文档写的很齐,应该是直接翻译谷歌的开发文档所来的。)
# 浏览器插件介绍
浏览器的插件其实本质就是与 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 文档 (opens new window) (需求科学上网)
# 打包发布
# 结语
以上是大概的谷歌浏览器插件开发流程和大概的了解,其实还是建议大家去通读开发文档和谷歌 API 文档,写的都比较通彻易读,工欲善其事必先利其器。需求定下来之后先花一两天的时间学(mo)习(yu)是我们程序员的日常操作 😏,至于定的发布日期嘛,肯定是熬(shan)夜(ku)加(pao)班(lu)啦。