chrome Extensions翻译过来就是谷歌扩展,但我们更喜欢叫它谷歌浏览器扩展或chrome扩展。
chrome扩展是定制浏览体验的小型软件程序。 它们使用户能够根据个人需求或偏好定制Chrome功能和行为。
对网页进行样式修改,增添功能,人机交互,快速实现等功能。
如果你打算就此进入chrome开发学习中,希望你最好有这几点需求:
1.熟悉HTML、CSS、JavaScript
2.使用chrome浏览器并使用过chrome扩展
3.最好能够会jQuery,它会为你省下不少时间。
关于学习资料:
chrome官方文档(英文版) https://developer.chrome.com/extensions
chrome非官方文档(中文版) https://crxdoc-zh.appspot.com/extensions/
360官方文档(中文版) http://open.chrome.360.cn/extension_dev/overview.html
chrome官方文档都是chrome公司自己出的,所以都是最新版。
非官方文档是根据官方文档翻译过来的,但并不是与官方的排版一样,有缺斤少两的行为且不是最新版。
360同样是翻译官方文档的,但也是缺斤少两,内容跟不上。案例代码有缺失。
注意:对于官方和非官方文档的浏览需要,网上自行搜索。
也可以看看《chrome扩展及应用开发》这本书,但是我推荐也仅限于理论知识。由于书籍太过于老化,书中的案例许多以及不能够正常运行了。
接下来首先了解chrome扩展的应用。我会以结合chrome官方案例和自身的案例讲述每一步。
红白色信封就是一个chrome扩展程序
先说说构成吧,最简单的chrome扩展组成:
manifes.json 前缀不能修改
popup.html 前缀可修改,但是必须和清单中的一样
manifes.json文件是整个扩展的入口,类似于一张零件配置清单,里面包括各种配置零件,就像手机一样,为什么新手机可以用,就因为配置零件都是完好无损的。
popup.html是扩展弹出界面,包含在json文件中,如果名称不对,将无法安装,这一部分就像手机屏幕一样, 当手机屏幕坏了或者与手机类型不匹配,那么手机也是用不了的。
//manifest.json文件代码
{
"manifest_version": 2, //清单文件版本为2 ,必须包含的
"name": "Hello word", //弹出对话窗的标题
"description": "This extension tracks your overall spendings.", //对扩展的描述,非必须
"version": "1.0", //扩展版本,可以用来接收更新
"browser_action": { //弹出窗口行为,包含导出页面,默认图标等
"default_popup": "popup.html" , //默认弹出窗口页面
"default_title":"Hello word" //鼠标在扩展上是显示的文字
}
}
//弹出页面代码,名称必须和清单中默认弹出页面名称一样
Title
hello word
将二者装在一个文件夹中,打开chrome进入扩展程序–点开开发者选项–加载已解压的扩展程序,选中该文件夹就行。