整理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
1
2
3
4
5
6
7
8
9
10

2. 创建manifest.json配置文件

{
    "name": "chrome-plugin-demo",
    "version": "1.0",
    "description": "Build an Extension!",
    "manifest_version": 2 // 注意这个必须写2
}
1
2
3
4
5
6

3. 创建popup.html文件

    
    
    
    


    
chrome-plugin-test
    

    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4. 创建popup.js文件

document.getElementById('content').innerText = 'Hello world!';
1

5. 在 chrome 中安装扩展

• 谷歌浏览器右上角: 更多按钮 -> 更多工具 -> 扩展程序
• 点击加载已解压的扩展程序，选择刚创建的文件夹
• 点开谷歌浏览器右上角的拼图图标即可看到你的插件。

好用的插件推荐

当前浏览的网页链接变成二维码

想在手机上看电脑访问的链接，不需要手动敲或者复制链接通过QQ等工具转发到手机上，仅需这个插件就可以扫二维码访问。

• chrome 网上应用店

ColorZilla（网页颜色吸取器）

可吸取网页的字体、背景、元素等的颜色值

• chrome 网上应用店

Markdown Preview Plus（可视化markdown）

可选主题，支持自定义css主题

• chrome 网上应用店
• 使用介绍

json-viewer（可视化json）

可选主题，支持自定义css主题，可收缩展开，可编辑

• chrome 网上应用店
• github

JavaScript and CSS Code Beautifier（可视化js、css）

可选主题，支持自定义css主题

• chrome 网上应用店

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦