chrome扩展概述.pptVIP

浏览器扩展开发下(Chrome);一、Chrome扩展 1.1、我们能在Chrome上开发些什么？ 1.2、 Chrome扩展的用户界面 1.3、 Chrome扩展的工作原理 1.4、Chrome扩展的结构 1.5、manifest.json详解 1.6、NPAPI 1.7、实战Chrome扩展开发 1.8、扩展实例剖析-IcafeHelper 1.9、Chrome扩展开发学习资源 1.10、Chrome扩展开发总结 附：关于Chrome浏览器 ;1.1、我们能在Chrome上开发什么？ a）、扩展（Extension） b）、插件（Plugin） c）、主题（Theme） d）、应用（APP） ;1.2、Chrome扩展的用户界面 1）、BrowserAction 2）、PageAction 3）、Extensions Page 4）、Options Page 5）、Override Page  ;1.3、Chrome扩展的工作原理 1）、扩展进程 2）、页面渲染进程 ;Chrome扩展;1.4、Chrome扩展的结构 1）、最简化的结构 2）、较完整的结构 ;1.5、manifest.json详解  ;1.6、NPAPI 1）、全称 Netscape Plugin Application Programming Interface 2）、语言及功能 使用C++编写，能完成非常复杂的C++能实现的功能。 3）、使用场景 推荐只在没有别的解决办法的时候才使用，因为NPAPI能访问本地文件，存在安全隐患。  ; 4）、一个普通的NPAPI目录结构  ; 5）、plugin.h要点剖析 这些都是必须显示声明，并待实现的接口！其中最需要我们关注的是Invoke接口，它负责Javascript调用时的指令分发。;6）、plugin.cc中核心接口的实现 ; 7）、PluginTemplate.h中定义NPAPI的接口 这里我只定义了三个接口，需要注意的是，每个接口的参数列表都需要采用这样的既定格式，便于在Invoke接口中进行指令分发。; 8）、PluginTemplate.cc 这个文件作为NPAPI插件的入口，需要对PluginTemplate.h中的每一个接口进行具体实现。 9）、MimeType 最后千万别忘了在np_entry.cc的这个方法中设定MimeType。 10）、编译 将整个NPAPI项目编译后，会生成一个PluginTemplate.dll文件，该文件就是我们开发完成的NPAPI插件。 ; 11）、引入PluginTemplate.dll 要在扩展中引入这个插件，需要在manifest.json中进行如下配置： 12）、应用插件 在background.html中，进行如下引用即可： ;1.7、实战Chrome扩展开发 1）、准备 扩展开发：Chrome浏览器、常用前端开发工具 插件NPAPI开发：VS 2）、开发 采用HTML+Javascript+CSS进行开发，开发之前可以先从/chrome/extensions/devguide.html 了解各API的使用方法 ; 3）、测试打包 代码编写完毕后，用Chrome浏览器自带的工具进行载入并测试 测试没问题以后，可以直接打包成*.crx文件 4）、发布 发布方式一：Google WebStore（收费） /intl/zh-CN/chrome/webstore/docs/publish.html 发布方式二：任意 ;1.8、扩展实例剖析-IcafeHelper 1）、下载并安装IcafeHelper /space/doc/tech/article/browserextension/chrome/0-icafe-helper.text 2）、扩展中的重要配置 仅对icafe页面注入相关js，而且all_frames必须设为true，设置操作tab和contextMenu的权限; 3）、右键菜单的创建过程 a）、icafe页面打开以后，页面会被注入icafe-helper.js，同时会向后台进程发送一个消息： b）、后台进程接受消息，并创建菜单： ; 4）、右键菜单的行为 a）、点击菜单后，后台进程向icafe页面发送一个消息： b）、icafe页面的icafe-helper.js接受该消息，触发相应操作，填写上线步骤： ; 5）、如何控制右键菜单只在icafe页面显示 需要对tab的选择状况进行监听，当选中的tab有变