开门见山：一个chrome插件会包含哪些文件及文件夹
D:.
│ manifest.json
│
├─html
│ index.html
│
├─images
│ icon-128.png
│ icon-16.png
│
├─scripts
│ background.js
│
├─styles
│ main.css
│
└─_locales
├─en
│ messages.json
│
└─zh_CN
messages.json
简单说明一下：
- html：存放html页面
- images：存放插件图标
- scripts：存放js文件
- styles: 存放样式
- _locales: 存放多语言文件
- manifest.json：一些关于插件的元数据，作为chrome入口文件
看目录结构，像不像一个网站？Bingo! Chrome插件就是一个网站类的应用，它是用html、javascript、css组成的一个webapp; 相比于通常的webapp, Chrome插件还可以调用更多浏览器层面的api,包括书签、历史记录、网络请求拦截、截获用户输入等等。（PS：插件不要随便乱装哦，很危险滴！）
重点说一说这个文件：manifest.json
如前所述，它包含了一些插件的元数据，作为chrome的入口文件，可以理解为插件的程序清单，那么它到底做了什么事情呢？
结合示例，我们细细来看：
{
"manifest_version": 2, // 清单版本号，建议使用 版本 2，版本 1 是旧的，已弃用，不建议使用
"name": "chome-plugin", // 插件名称
"version": "1.8.6", // 插件版本
"description": "This is an extension for your chrome", // 这里写些废话，举个栗子，‘应产品要求，杀个程序祭天’
"icons": {
"16": "images/custom/16x16.png",
"48": "images/custom/48x48.png",
"128": "images/custom/128x128.png"
},
//browser_action和page_action只能添加一个
"browser_action": { //浏览器级别行为，所有页面均生效
"default_icon": "images/custom/16x16.png",//图标的图片
"default_title": "Hello ELSE", //鼠标移到图标显示的文字
"default_popup": "html/popup.html" //单击图标后弹窗页面
},
"page_action":{ //页面级别的行为，只在特定页面下生效
"default_icon":{
"24":"images/custom/24x24.png",
"38":"images/custom/38x38.png"
},
"default_popup": "html/popup.html",
"default_title":"Hello ELSE"
},
// 可选
"author": "ELSE TEAM",
"automation": "...",
"background": {
"scripts": [
"scripts/background.js",
"scripts/devtools-page.js"
]
},
"devtools_page": "html/devtools-page.html",
// 定义对页面内容进行操作的脚本
"content_scripts": [
{
"js":["js/else-insert.js"],
"css": ["css/else-insert.css"],
"matches":["<all_urls>"] // 只在这些站点下 content_scripts会运行
}
],
// 数组，声明插件所需要的权限，这里就是很危险的存在了，想干坏事的你是不是很激动！
"permissions": [
"cookies",
"http://*/*",
"management",
"tabs",
"contextMenus"
]
}
开发示例
代码来了：https://github.com/StevenX911/share/tree/master/source-read/chrome-plugin/no-socializing
加载并运行插件
在您的浏览器中访问 chrome://extensions（或者单击多功能框最右边的按钮：打开 Chrome 浏览器菜单，并选择工具(L)菜单下的扩展程序(E)，进入相同的页面）。
确保右上角开发者模式复选框已选中。 Ensure that the Developer mode checkbox in the top right-hand corner is checked.
单击加载正在开发的扩展程序…，弹出文件选择对话框。
浏览至您的扩展程序文件所在的目录，并选定。
您也可以将扩展程序文件所在的目录拖放到浏览器中的 chrome://extensions 上加载它。
如果扩展程序有效的话，它将被加载并且立刻处于活动状态！如果无效的话，页面顶部将显示错误消息，请纠正错误再重试。
打包发布
开发插件的目的是为了贡献自己的一点技术力量，为人类的永恒与和平略尽绵力，当然这都是胡扯！大部分的开发者都想赚些个零花，不过首先你得向google上交五美金！
注册开发者账户自不必说，墙都翻不出去的程序员当不了好厨子。
点击链接https://chrome.google.com/webstore/developer/dashboard/进入google开发者控制台，你会看到下图，提示交5美元注册开发者。
在输入信用卡信息环节，注意选香港，然后再地址中加上“转大陆”字样就可以。
注册开发者身份成功后，将webpp文件打包提交
发布成功后效果如下图
常用插件推荐
更多
- Chrome插件开发文档：https://developer.chrome.com/extensions
