Firefox和Chrome扩展开发.ppt

Firefox和Chrome扩展开发 邓以克 msn phinecos Blog 主要内容 Firefox扩展定义 Firefox扩展是什么 官方定义 它是用于给Firefox增加一些实用新功能的附加组件 使用的技术 XUL 一种基于XML的用户界面语言CSS DOM JavaScriptXPCOM 跨平台的COM技术 基本原理与微软的COM类似XPConnect 将JavaScript和XPCOM连接起来 即可以让XPCOM组件被脚本化 在js代码中调用 也允许使用js来开发XPCOM组件开发 相当于 胶水 RDF 资源定义框架 用于保存扩展的注册信息和描述信息 常用扩展 前端开发利器 Firebug广告拦截 AdblockPlus伟大的 油猴子 GreaseMonkey在火狐用户中有相当一部分人属于 油猴控 油猴子究竟能做什么呢 它能够通过最简单的脚本来更改一个网站或者网页的布局 外观 操作 兼容性测试 IETab火狐魔镜支持全新的视频单放功能 在独立的窗口播放网页视频DownThemAll 批量下载工具Gladder foxyproxy 翻墙必备 一个扩展 通常是一个XPI Cross PlatformInstaller 包 其实是一个zip类型的压缩包 里边包括必须的文件 在下图中 显示了一个标准的扩展包括的文件和文件的目录结构 扩展安装和运行的简单图示 扩展的安装由install rdf负责 里面会描述此扩展的id 名称 目标载体 firefox或其他Mozilla程序 名称和版本号等信息 Firefox根据这些描述信息将扩展注册到其扩展管理器中扩展的运行主要由chrome manifest文件来负责 由于Firefox的用户界面是 内核 Firefox主界面容器 扩展XUL界面 Chrome manifest 融合 XULRunnder XUL 最简单的HelloWorld 扩展的功能就是在Firefox的 工具 菜单项中加入一个 helloworld 菜单 点击后弹出一个新的窗口 项目目录结构 项目的结构如下 helloworld chrome manifestinstall rdfchrome helloworld content contents rdfoverlay jsoverlay xulhello xullocale en USskin overlay css 扩展安装描述信息 install rdf dengyike HelloWorld1 0Classicfirstextensiondengyike ec8030f7 c20a 464f 9b0e 13a3a9e97384 1 53 9 扩展运行清单 chrome manifest contenthelloworldjar chrome helloworld jar content overlaychrome browser content browser xulchrome helloworld content overlay xullocalehelloworlden USjar chrome helloworld jar locale en US skinhelloworldclassic 1 0jar chrome helloworld jar skin stylechrome global content customizeToolbar xulchrome helloworld skin overlay css 融合 这里最重要的就是content和overlay这两项content指明了xul和js脚本所在的目录overlay用于扩展运行时UI界面与Firefox主容器的XUL界面融合 扩展的XUL界面 融合点 JS脚本 varHelloWorld onLoad function initializationcodethis initialized true onMenuItemCommand function window open chrome helloworld content hello xul chrome window addEventListener load function e HelloWorld onLoad e false XPCOM COM技术的几个要点 接口查询 面向接口的编程 引用计数类工厂组件的自注册Mozilla的XPCOM和微软的COM技术原理基本类似 官方定义 TheCrossPlatformComponentObjectModule XPCOM isaframeworkwhichallowsdeveloperstobreakupmonolithicsoftwareprojectsintosmallermodularizedpieces Thesepieces knownascomponents arethenassembledbacktogetheratruntime Xpcom组件在windows平台一般是dll文件 Linux下一般是动态共享链接库 so 实例二 图片批量下载扩展 仅使用系统组件 弹出图片下载窗口 图片数据的获取 varimageNodes doc getElementsByTagName img 选择图片保存路径 单张图片的下载 实例3 迅雷下载扩展 使用自行开发的组件 项目结构 和以前的最大不同是新增了一个componets目录 用于存放用户自行编写的XPCOM组件 一般使用C 编写 一般是由描述接口定义的xpt文件及组件接口实现的dll两部分组成 下图所示是迅雷开发的XPCOM组件 迅雷下载组件提供的接口 CallThunder 呼叫迅雷进行下载WhetherDynamicLink 是否是隐藏真实地址的链接LoadProfile 加载配置文件ShowFloatBar 显示漂浮工具条HideFloatBar 隐藏漂浮工具条 基本流程 获取页面上要下载的URL地址创建迅雷下载组件读取迅雷配置文件下载varn g thunderComponent CallThunder strUrls strAsync bMonitor bAll Chrome扩展快速入门 一个Chrome扩展是由HTML CSS JavaScript 图片等文件压缩而成 扩展实际上就是一个web页面 可以用任何浏览器提供给web页面的接口 从XMLHttpRequest到JSON 再到HTML本地缓存都可以使用 Chrome扩展能做什么呢 我们会发现有些扩展在Chrome地址栏右侧区域增加一个图标 还有些扩展能够和浏览器的一些元素 如书签 tab导航标签 交互 扩展还可以和web页面交互 甚至是从web服务器获取数据 每个扩展是一个 crx文件 类似zip的压缩文件 由下列文件组成一个manifest文件 主文件 json格式 至少一个HTML文件 主题可以没有HTML文件 JavaScript文件 可选 非必须 任何其他你需要的文件 比如图片 Chrome扩展快速入门 开发技术HTML CSS和JavaScriptchrome APIHTML5localStorageWebDatabaseXMLHttpRequestWebKitAPI和V8API Chrome扩展的UI形式 Browseraction Chrome扩展的UI形式 Pageaction Chrome扩展的UI形式 ContentScript 工作原理 两种页面的区别 Backgroundpage和PopUppagepopup html中定义的Javascript变量会在popup html页面关闭时被释放 background html可以保存一些一直需要使用的变量的作用 这里定义的javascript变量会在Chrome浏览器生命期中一直存在 可以把要一直存在的数据保存在这里 先在background html中定义好变量 varglobal email 然后在popup html中用以下方式来引用这些变量varbgpg chrome extension getBackgroundPage bgpg global email somebody 实例4 最简单的HelloWorld Manifest json name HelloWorld插件 version 1 0 description 第一个Chrome插件 browser action default icon icon png popup popup html popup htmlHello World welcome 项目结构Helloworld manifest jsonpopup html 实例5 EmailThisPage 组成部分 options html选项页面background html后台页面content script js内容脚本 它可以和页面进行进行交互 还可以与父扩展进行消息通信 基本思路 Step1 background页面给browserAction增加 单击 事件的监听器若是以 http 或 https 开头的页面 则执行content script js这个内容脚本中的js代码 同时为连接通信注册监听器 Step2 content script js这个内容脚本可以与当前页面进行交互 首先获取当前页面标题和高亮选中的文字内容 然后与background页面进行消息通信 将数据打包传送给后者Step3 background页面监听到来自内容脚本传送来的数据 就通过本地默认邮件客户端或gmail发送 运行效果 NPAPI插件 类似于XPCOM组件 Chrome扩展可以包含NPAPI插件这样的二进制组件 如果你想在扩展中使用一个NPAPI插件 首先在扩展中为其创建一个目录 名为 plugins 然后在清单文件中为其注册如下 format version 1 id 00123456789ABCDEF0123456789ABCDEF0123456 version 1 0 name MyFirstExtension description ThefirstextensionthatImade plugins dir plugins 实例 Google官方的ScreenCapture扩展 扩展大战 Firefox截止到2010 10 7 AMO上共有受托管的扩展9442个Chrome截止到2010 10 15 Chrome扩展数量已经超过8000大关 扩展性的简单比较 扩展安装时 Firefox需要重启 而Chrome直接启用 无须重启扩展的数量两者已经十分接近 但从扩展的质量来看 Chrome仍旧落后于Firefox 例如Chrome上还没有与FF上firebug相媲美的Firefox的扩展是融合到浏览器主进程中的 安全性不够 Chrome扩展运行在隔离的进程中 某个扩展的安全问题不会影响到整个浏览器FF的扩展在启动时升级 需要用户确认 而Chrome扩展自动升级 扩展性的简单比较 对浏览器的性能影响 1 在数量较少的扩展情况下 两者体验无区别 Chrome可能稍占优势 因为独立进程在单个扩展崩溃时不会影响整个浏览器 2 在数量中等 如10 15个扩展 Chrome明显占有优势3 在数量较多的情况下 如20个扩展或更多 我们会发现火狐的资源占用和速度和中等数量的情况下没有太大区别 但是Chrome的内存占用节节攀升 翻身速度和扩展的增加数成正比 Q A 2020年2月23日星期日