chrome 扩展插件
25 Jun 2017chrome作为目前最流行的浏览器，备受前端推崇，原因除了其对于前端标准的支持这一大核心原因之外，还有就是其强大的扩展性，可以说chrome是这世上最好用的浏览器没有之一。
一个 Chrome 扩展其实就是一个配置文件 manifest.json 和一系列 HTML、CSS、JS、图片文件的集合，所以只要有前端基础，写一个简单的 Chrome 扩展不算是件太困难的事情。
一个简单的 chrome 扩展插件基本目录结构如下：
├─ manifest.json //扩展的配置项
├─ Custom.js //自定义js脚本
├─ Custom.css //自定义css样式
├─ icon.png //扩展程序的icon
└─ popup.html //扩展的展示弹窗
Manifest 文件
Manifest 是每个chrome扩展有且只有一个的清单文件，它指明了该扩展的基本信息，如名称、版本、需要的权限等等，格式是json。
一个 manifest.json 文件常见的配置项如下：
{
"manifest_version": 2, //固定的
"name": "Cissy's First Extension", //插件名称
"version": "1.0", //插件使用的版本
"description": "The first extension that CC made.", //插件的描述
"browser_action": { //插件加载后生成图标
"default_icon": "cc.gif", //图标的图片
"default_title": "Hello CC", //鼠标移到图标显示的文字
"default_popup": "popup.html" //单击图标执行的文件
},
"permissions": [ //允许插件访问的url
"http://*/",
"bookmarks",
"tabs",
"history"
],
"background":{ //background script即插件运行的环境
"page":"background.html"
"scripts": ["js/jquery-1.9.1.min.js","js/background.js"]//数组.chrome会在扩展启动时自动创建一个包含所有指定脚本的页面
},
"content_scripts": [{ //对页面内容进行操作的脚本
"matches": ["http://*/*","https://*/*"], //满足什么条件执行该插件
"js": ["js/jquery-1.9.1.min.js", "js/js.js"],
"run_at": "document_start", //在document加载时执行该脚本
}]
}
“page_action”: 与之平级的还有另一个字段”browser_action”，你的manifest中最多出现二者之一。直观地来说，这俩属性分别指明你的扩展在特定网页中才能用，还是打开浏览器后一直能用。更直观的就是，你的扩展的图标出现的位置不同，如下图。
“content_scripts”: 这个属性的内容是一个对象数组，数组内每个对象都指明一系列js脚本及其将要注入的页面（支持通配符*），以及注入时机（可以为”document_start”、”document_end” 或 “document_idle”，默认为 “document_idle”）。
说明一下，这里的脚本是注入到你要操作DOM的页面的，但这个注入，并不同于在页面中直接写一条引入外部脚本语句。直接在页面中引入的多个js之间是共享命名空间的，但content_script与它们之间是独立的，content_script和页面原有js仅共享页面的DOM元素。