Chrome扩展及应用开发 pdf
内容简介
《Chrome扩展及应用开发》简述了Chrome平台开发的概念、扩展与应用的区别及其常用功能，并结合具体场景给出了实例。主要介绍了Chrome扩展基础、Chrome扩展的UI界面、管理浏览器和部分API划分，讲解了文件、网络通信、操作USB设备和串口通信等多个与操作紧密相关的内容，还介绍了Chrome主题开发、支持化的程序开发，以及如何使用Angular框架进行开发。
《Chrome扩展及应用开发》以直观生动的实例帮助读者理解知识要点，以自顶向下的方式进行讲解，让读者先接触 直观的内容，然后慢慢深挖究其本质，非常适合开发者自学。
作者简介
李喆 网名Sneezry，Chrome扩展及应用开发者，吉林大学电子科学与工程学院在读硕士，现研究方向为计算机视觉的硬件实现。喜欢小动物，养有一只智利狼蛛作为宠物。
目录
第1章 初步接触chrome扩展及应用开发
1.1 认识chrome扩展及应用
1.2 应用与扩展的区别
1.3 我的个chrome扩展
1.4 manifest文件格式
1.5 dom简述
1.6 调试方法与代码质量
第2章 chrome扩展基础
2.1 操作用户正在浏览的页面
2.2 跨域请求
2.3 常驻后台
2.4 带选项页面的扩展
2.5 扩展页面间的通信
2.6 存储数据
2.7 i18n
第3章 chrome扩展的ui界面
3.1 css简述
3.1.1 默认样式及box模型
3.1.2 元素定位
3.1.3 字体及背景颜色
3.2 browser actions
3.2.1 图标
3.2.2 popup页面
3.2.3 标题和badge
3.3 右键菜单
3.4 桌面提醒
3.5 omnibox
3.6 page actions
第4章 管理你的浏览器
4.1 书签
4.1.1 创建书签
4.1.2 创建书签分类
4.1.3 调整书签位置
4.1.4 更新书签
4.1.5 移除书签
4.1.6 获取书签内容
4.1.7 书签事件
4.2 cookies
4.2.1 管理cookie
4.2.2 读取cookie
4.2.3 设置cookie
4.2.4 删除cookie
4.2.5 获取的cookie store
4.2.6 监控操作cookie的行为
4.3 历史
4.3.1 读取历史
4.3.2 添加历史
4.3.3 删除历史
4.3.4 对历史操作的
4.4 管理扩展与应用
4.4.1 读取用户已安装的扩展和应用的信息
4.4.2 获取权限警告
4.4.3 启用、禁用、卸载扩展和启动应用
4.4.4 对管理操作的
4.5 标签
4.5.1 获取标签信息
4.5.2 创建标签
4.5.3 更新标签
4.5.4 移动标签
4.5.5 重载标签
4.5.6 移除标签
4.5.7 获取当前标签页面的显示语言
4.5.8 获取指定窗动标签可见部分的截图
4.5.9 注入和css
4.5.10 与指定标签中的内容脚本（content script）通信
4.5.11 监视标签行为
4.6 override pages
第5章 部分api
5.1 下载
5.2 网络请求
5.3 代理
5.4信息
第6章 chrome应用基础
6.1 更加严格的内容安全策略
6.2 图标设计规范
6.3 应用的生命周期
6.4 应用窗口
6.4.1 创建窗口
6.4.2 样式更加自由的窗口
6.4.3 获取窗口
6.4.4 窗口事件
6.5 编写个chrome应用
第7章 文件
7.1 目录及文件操作对象
7.2 获取目录及文件操作对象
7.3 读取文件
7.4 遍历目录
7.5 创建及删除目录和文件
7.6 写入文件
7.6.1 typed array
7.6.2 blob对象
7.6.3 filewriter对象
7.7 复制及移动目录和文件
第8章 媒体库
8.1 获取媒体库
8.2 添加及移除媒体库
8.3 更新媒体库
8.4 获取媒体文件信息
第9章 网络通信
9.1 udp协议
9.1.1 建立与关闭连接
9.1.2 发送与接收数据
9.1.3 多播
9.1.4 获取socket和组
9.1.5 局域网聊天应用
9.2 tcp协议
9.2.1 建立与关闭连接
9.2.2 发送与接收数据
9.2.3 获取socket
9.3 tcp server
9.3.1 建立与关闭连接
9.3.2数据
9.3.3 获取socket
9.3.4 server
9.4 websocket
0章 其他接口
10.1 操作usb设备
10.1.1 发现设备
10.1.2 接口操作
10.1.3 传输操作
10.2 串口通信
10.2.1 建立连接
10.2.2 发送和接收数据
10.2.3 获取连接及状态
10.3 文字转语音
10.3.1 朗读文字
10.3.2 获取声音
10.3.3 获取朗读状态并事件
10.4信息
附录a 制作chrome主题
a.1 背景图片
a.2 颜色
a.3 颜色叠加
a.4 ui属性
a.5 使用my chrome theme制作主题
附录b css选择器
b.1 基本选择器
b.2选择器
b.3 伪类
附录c 初识angularjs
c.1 视图
c.2 $scope
c.3 module与路由
附录d chrome扩展及应用的完整api列表
d.1 chrome扩展的api
d.2 chrome应用的api
感悟与笔记
扩展简介
Chrome扩展是一系列文件的集合： HTML文件、CSS样式文件、JavaScript脚本文件、图片等静态文件以及manifest.json。 个别扩展还会包含二进制文件，如DLL动态库和so动态库等，但这需要调用NPAPI，而Google出于安全性考虑已经决定逐渐淘汰NPAPI 扩展被安装后，Chrome就会读取扩展中的manifest.json文件。这个文件的文件名固定为manifest.json， 内容是按照一定格式描述的扩展相关信息，如扩展名称、版本、更新地址、请求的权限、扩展的UI界面入口等等。 这样Chrome就可以知道在浏览器中如何呈现这个扩展，以及这个扩展如何同用户进行交互。
由于Chrome扩展是基于Chrome平台的，说得直白些，是基于WebKit浏览器的——所以Chrome扩展在处理逻辑运算和实现程序功能时所采用的编程语言必然只能是JavaScript
注：Chrome扩展---利用Chrome平台提供的丰富的接口，获得更加全面的信息，进行更加复杂的操作界面：使用HTML和CSS进行描述，这样的好处是可以用很短的时间构建出赏心悦目的UI
扩展的形式：
Chrome扩展的启动入口可以在浏览器的工具栏和地址栏中，用户单击后激活扩展进行下一步的操作，也可以干脆没有图标，在后台静默地运行。
特别注意
由于Chrome不允许将JavaScript内嵌在HTML文件中，所以我们单独编写一个.js脚本文件，并在HTML文件中引用它
第一个扩展例子：
编写一款显示用户计算机当前时间的扩展(浏览器的工具栏中显示一个时钟的图标)
重要的代码:
{ "manifest_version": 2, "name": "我的时钟", "version": "1.0",//<code>version</code>的值最多可以是由三个圆点分为四段的版本号，每段只能是数字，每段数字不能大于65535且不能以0开头（可以是0，但不可以是0123）， //版本号段左侧为高位，比如1.0.2.0版本比1.0.0.1版本更高。每次更新扩展时，新的版本号必须比之前的版本号高。 "description": "我的第一个Chrome扩展", "icons": {//<code>icons</code>定义了扩展相关图标文件的位置 "16": "images/icon16.png", "48": "images/icon48.png", "128": "images/icon128.png" }, "browser_action": {//<code>browser_action</code>指定扩展的图标放在Chrome的工具栏中 "default_icon": {//<code>browser_action</code>中的<code>default_icon</code>属性定义了相应图标文件的位置 "19": "images/icon19.png", "38": "images/icon38.png" }, "default_title": "我的时钟",//<code>default_title</code>定义了当用户鼠标悬停于扩展图标上所显示的文字 "default_popup": "popup.html"//<code>default_popup</code>则定义了当用户单击扩展图标时所显示页面的文件位置 } }
popup.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>
js文件夹中的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);//my_clock函数1000毫秒之后又会再次调用自身，这样clock_div中显示的时间就会被更新 } var clock_div = document.getElementById('clock_div');
会员免费下载
链接：https://pan.baidu.com/s/15eYLOo5zV8zUkN55D768nQ
提取码： ****** 查看
成为本站VIP会员即可无限下载。 请先点击百度网盘，看资源是否还在，不在请点击链接通知站长补资源。
资源标签点击标签可查看对应分类的资源
