什么是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": "<1196778674@qq.com>",
"content_scripts":[
{
"matches": ["<all_urls>"],
"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插件的大概流程，具体详细内容请参照这里
网友评论