Firefox和Chrome扩展开发

Firefox和Chrome扩展开发邓以克2010年11月8日Firefox扩展快速入门实例1：简单的HelloWorldXPCOM—跨平台的COM技术实例2:图片批量下载实例3：迅雷下载扩展Chrome扩展快速入门实例4：HelloWorld实例5:Emailthispage扩展性：FirefoxvsChrome主要内容Firefox扩展定义Firefox扩展是什么？官方定义：它是用于给Firefox增加一些实用新功能的附加组件。使用的技术：○XUL:一种基于XML的用户界面语言○CSS,DOM,JavaScript○XPCOM:跨平台的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融合XULRunnderXUL最简单的HelloWorld扩展的功能就是在Firefox的”工具“菜单项中加入一个”helloworld”菜单，点击后弹出一个新的窗口项目目录结构项目的结构如下：helloworld/chrome.manifestinstall.rdfchrome/helloworld/content/contents.rdfoverlay.jsoverlay.xulhello.xullocale/en-USskin/overlay.css扩展安装描述信息---install.rdfDescriptionabout=urn:mozilla:install-manifestem:[e-mail]/em:idem:nameHelloWorld/em:nameem:version1.0/em:versionem:descriptionClassicfirstextension/em:descriptionem:creatordengyike/em:creator!--Firefox--em:targetApplicationDescriptionem:id{ec8030f7-c20a-464f-9b0e-13a3a9e97384}/em:idem:minVersion1.5/em:minVersionem:maxVersion3.9/em:maxVersion/Description/em:targetApplication/Description扩展运行清单---chrome.manifestcontenthelloworldjar: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界面overlayid=helloworld-overlayxmlns=scriptsrc=overlay.js/menupopupid=menu_ToolsPopupmenuitemid=helloworld-hellolabel=&helloworld;oncommand=HelloWorld.onMenuItemCommand(event);//menupopup/overlay融合点JS脚本varHelloWorld={onLoad:function(){//initializationcodethis.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扩展快速入门与Firefox扩展相比几点进步安装后立即使用，无须重启浏览器自动更新到最新版本在独立进程中运行，稳定安全，即使崩溃也不会影响其他开发技术HTML,CSS和JavaScriptchrome.*APIHTML5○canvas○audio○localStorage○WebDatabaseXMLHttpRequestWebKitAPI和V8API。。。。。。Chrome扩展的UI形式BrowseractionChrome扩展的UI形式PageactionChrome扩展的UI形式ContentScript两种页面的区别Backgroundpage和PopUppagepopup.html中定义的Javascript变量会在popup.html页面关闭时被释放，background.html可以保存一些一直需要使用的变量的作用，这里定义的javascript变量会在Chrome浏览器生命期中一直存在，可以把要一直存在的数据保存在这里。先在background.html中定义好变量，varglobal_email=;然后在popup.html中用以下方式来引用这些变量varbgpg=chrome.extension.getBackgroundPage();bgpg.global_email=[e-mail];工作原理实例4：最简单的HelloWorldManifest.json{name:HelloWorld插件,version:1.0,description:第一个Chrome插件,browser_action:{default_icon:icon.png,popup:popup.html}}popup.htmlpHello,World!/ppahref==_blankwelcome/a项目结构Helloworld/○manifest.json○popup.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:backgrou