整理chrome插件有哪些能力，插件开发入门，整理文档。
chrome谷歌浏览器插件开发，听上去很高大上，其实只要熟悉HTML、CSS、JS即可开发，插件也是将html页面渲染出来并执行js脚本而已。
插件能做哪些事？
- 书签控制；
- 下载控制；
- 窗口控制；
- 标签控制；
- 网络请求控制，
- 各类事件监听；
- 自定义原生菜单；
- 完善的通信机制；
简介
扩展程序主要名词
- Manifest （清单文件）
- Background Script （后台脚本）
- UI Elements （页面元素）
- Content Script （内容脚本）
- Options Page（配置页面）
开发入门
1. 新建一个文件夹，目录结构如下：
- chrome-plugin-demo
- ├── background.js
- ├── images
- │ ├── 128.png
- │ ├── 16.png
- │ ├── 32.png
- │ └── 48.png
- ├── manifest.json
- ├── popup.html
- └── popup.js
2. 创建 manifest.json 配置文件
- {
- "name": "chrome-plugin-demo",
- "version": "1.0",
- "description": "Build an Extension!",
- "manifest_version": 2 // 注意这个必须写2
- }
3. 创建 popup.html 文件
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <style>
- #content{color: red;}
- </style>
- </head>
- <body>
- <h1>chrome-plugin-test</h1>
- <p id="content"></p>
- <script src="popup.js"></script>
- </body>
- </html>
4. 创建 popup.js 文件
document.getElementById('content').innerText = 'Hello world!';5. 在 chrome 中安装扩展
- 谷歌浏览器右上角: 更多按钮 -> 更多工具 -> 扩展程序
- 点击
加载已解压的扩展程序，选择刚创建的文件夹 - 点开谷歌浏览器右上角的拼图图标即可看到你的插件。
好用的插件推荐
当前浏览的网页链接变成二维码
想在手机上看电脑访问的链接，不需要手动敲或者复制链接通过QQ等工具转发到手机上，仅需这个插件就可以扫二维码访问。
ColorZilla（网页颜色吸取器）
可吸取网页的字体、背景、元素等的颜色值
Markdown Preview Plus（可视化markdown）
可选主题，支持自定义css主题
json-viewer（可视化json）
可选主题，支持自定义css主题，可收缩展开，可编辑
JavaScript and CSS Code Beautifier（可视化js、css）
可选主题，支持自定义css主题
