《chrome扩展及应用开发》走进chrome插件开发 - wilson's blog
读书笔记介绍
寒假想自己做一个chrome扩展，便从图书馆借了这本书。同时，为了培养自己的好习惯，做沉淀，便读一章写一篇总结，全书总共10章，将会分为10篇博文。欢迎大家多多指正，也希望大家多多支持，谢谢。
chrome扩展及应用介绍与区别
介绍
chrome支持开发者为其编写各种各样的扩展与应用来扩充其功能。chrome扩展与应用是一系列文件的集合，这些文件包括HTML，CSS，Javascript，images以及一个manifest.json文等。
区别
两者具有很多相似之初，并且两者采用了相同的文件结构。
总的来说，扩展与浏览器结合的更紧密些，更加强调扩展浏览器功能。而应用无法像扩展一样轻易获取用户在浏览器中浏览的内容并进行更改，实际上应用有更加严格的权限限制，所以应用更像是一个独立的与chrome浏览器关联不大的程序。
除此之外，chrome应用还分为Hosted App(托管应用)和PackagedApp(打包应用)。
前者更像是一个高级的书签，这种应用只提供一个图标和manifest.json文件。
后者，顾名思义，就是将所有的文件打包在一起的应用，这类应用通常可以离线使用，因为他们所需要的文件都在本地。
文件结构
+chromApp -index.HTML -manifest.json +images +CSS +js与正常开发的结构类似，唯一多了的一个是manifest.json这个文件。
manifest.json用处
安装扩展之后，chrome就会读取扩展中的manifest.json文件。这个文件的文件名固定为manifest.json。内容是按照一定格式描述的扩展相关信息，如扩展名称，版本，更新地址，请求的权限，扩展的UI界面入口。等等，这样chrome才能知道如何在浏览器中呈现这个扩展，以及这个扩展如何与用户进行交互。
manifest.json规范说明
manifest.json必须包含name，version和manifest_version属性，目前来说来manifest_version属性值只能为数字2，对于应用来说，还必须包含app属性。其他常用的可选属性还有browser_action,page-action,background,permissions,options_page,
content_scripts,content_scripts。
当有需要时，请自行到官网查看文档说明。
Manifest File Format
制作第一个扩展
目录结构
+ my_clock + images - icon128.png - icon48.png - icon16.png - icon38.png - icon16.png + js - my_clock.js - manifest.json - popup.html manifest.json
{ "manifest_version": 2, "name": "我的时钟", "version": "1.0", "description": "我的第一个Chrome扩展", "icons": { "16": "images/icon16.png", "48": "images/icon48.png", "128": "images/icon128.png" }, "browser_action": { "default_icon": { "19": "images/icon19.png", "38": "images/icon38.png" }, "default_title": "我的时钟", "default_popup": "popup.html" } }popoup.html
<html> <head> <style> *{ margin: 0; padding: 0; } body { width: 200px; height: 100px; } div { line-height: 100px; font-size: 42px; text-align: center; } </style> </head> <body> <div id="clock_div"></div> <script src="js/my_clock.js"></script> </body> </html>my_clock.js
function my_clock(el){ var today=new Date(); var h=today.getHours(); var m=today.getMinutes(); var s=today.getSeconds(); m=m>=10?m:('0'+m); s=s>=10?s:('0'+s); el.innerHTML = h+":"+m+":"+s; setTimeout(function(){my_clock(el)}, 1000); } var clock_div = document.getElementById('clock_div'); my_clock(clock_div);使用说明
将上述代码的文件包拖动至chrome扩展页面，也就是 chrome://extensions/ 即可发现，扩展栏多了一个图标，点击既可显示。
源码下载
调试方法
同样，我们想调试插件的时候，也可以直接右键点击该扩展，审查元素，即会弹出一个开发者工具框，在此便可以开始调试。
结语
以上就是第一章的总结，接下来的笔记，敬请期待～
原书项目代码下载
《chrome扩展及其应用开发》