什么是Chrome插件?
简单来说,Chrome浏览器插件就是一个用Web技术开发、用来增强浏览器功能的软件,它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包。
另外,其实Chrome插件不只是前端技术,Chrome插件还可以配合C++编写的dll动态链接库实现一些更底层的功能(NPAPI),比如全屏幕截图等,开发一个专属于服务自己的插件,为了更好的开发(滑水)。
下面来一点核心介绍:
manifest.json
这是一个Chrome插件最重要也是必不可少的文件,用来配置所有和插件相关的配置,必须放在根目录。
下面是一些简单的配置,完整配置可以参照这里。
{
"manifest_version": 2,
"name": "测试内容",
"version": "1.0.0",
"description": "测试内容描述",
"author": "<[email protected]>",
"content_scripts":[
{
"matches": [""],
"js": ["js/jquery.js", "js/content-script.js"],
"run_at": "document_start"
}
],
"homepage_url": "https://www.jianshu.com/u/215a92cb71b8"
}
background.js
可以理解成后台,是一个常驻的页面,它的生命周期是插件中所有类型页面中最长的,它随着浏览器的打开而打开,随着浏览器的关闭而关闭,所以通常把需要一直运行的、启动就运行的、全局的代码放在background里面。
background的权限非常高,几乎可以调用所有的Chrome扩展API(除了devtools),而且它可以无限制跨域,也就是可以跨域访问任何网站而无需要求对方设置CORS。
在上面的配置中,background可以通过page指定一张网页,也可以通过scripts直接指定一个JS,Chrome会自动为这个JS生成一个默认的网页:
配置:
// manifest.json
{
"background":
{
"page": "background.html"
"scripts": ["js/background.js"]
},
}
popup.js
popup是点击browser_action或者page_action图标时打开的一个小窗口网页,焦点离开网页就立即关闭,一般用来做一些临时性的交互。
popup可以包含任意你想要的HTML内容,并且会自适应大小。可以通过default_popup字段来指定popup页面,也可以调用setPopup()方法。
配置:
// manifest.json
{
"browser_action":
{
"default_icon": "img/icon.png",
"default_title": "Chrome插件实例",
"default_popup": "popup.html"
}
}
需要特别注意的是,由于单击图标打开popup,焦点离开又立即关闭,所以popup页面的生命周期一般很短,需要长时间运行的代码千万不要写在popup里面。
在权限上,它和background非常类似,它们之间最大的不同是生命周期的不同,popup中可以直接通过chrome.extension.getBackgroundPage()获取background的window对象。
右键菜单
Chrome插件可以自定义浏览器的右键菜单,主要是通过chrome.contextMenusAPI实现。
配置:
// manifest.json
{ "permissions": ["contextMenus"] }
// background.js
chrome.contextMenus.create({
title: "右键菜单",
onclick: function () { alert('您点击了右键菜单!'); }
});
omnibox配置
omnibox是向用户提供搜索建议的一种方式。
// manifest.json
{
// 向地址栏注册一个关键字以提供搜索建议,只能设置一个关键字
"omnibox": { "keyword" : "test" },
}
好了,以上就是自己开发Chrome插件的大概流程,具体详细内容请参照这里