资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2013/7/12,#,跨浏览器扩展开发框架的设计与实现,王 军,关于我,name:,王军,company:,阿里巴巴,一淘及搜索事业部,description:F2E,JavaScript developer,weibo:_Meteora_,提纲,浏览器扩展开发基本概念,现有扩展开发框架介绍,新的扩展开发框架的设计和实现,首先,讨论对象限于提供了成熟的扩展机制的浏览器，例如：,Chrome,，,Firefox,，,Opera,，,Safari,等,浏览器,扩展,（,extension,），而非,插件,（,plugin,）,扩展开发基本概念,文件构成,扩展配置信息文件,HTML,CSS,JavaScript,图片，资源文件,anything you need,扩展开发基本概念,配置信息文件,基本信息,扩展名称,版本号,功能定义,工具栏,Popup,后台脚本等,权限声明,扩展功能使用声明,URL,访问,扩展开发基本概念,两类脚本,background script,(server),独立进程，跟随浏览器生命周期,存储持久化数据，发送跨域,XHR,请求,实现扩展主逻辑，完全的,API,访问权限,content scripts,(client),存活于插入页面进程，与页面脚本环境隔离,可操作插入页面的,DOM Tree,有限的扩展,API,访问,扩展开发基本概念,可用,API,ECMAScript 5 API,浏览器扩展,API,tabs,windows,bookmarks,browserAction,DOM API/BOM API,HTML5/CSS3,扩展开发基本概念,总结,浏览器扩展是为了增强浏览器的功能，使用,Web,前端技术，结合扩展,API,开发的：,Web App,现有扩展开发框架,功能,实现,WORA,（,write once,run anywhere,）,的半自动化,builder,Usage,build chrome,build dist firefox,现有扩展开发框架,实现原理,基于,Perl,开发,封装各浏览器扩展,API,，暴露统一接口,定制的,build,语法,根据语法剪裁，合并，复制和打包文件,include,FILE,if,BROWSER1,BROWSER,/code for,BROWSER1,else,/code for other browsers,endif,现有扩展开发框架,现状,与业务代码耦合较大，限制较多，不易拿出来单独使用,手动管理文件依赖，模糊的模块依赖关系,结构上不易扩展更多浏览器支持和,API,支持,新的扩展开发框架,ExtSync,WORA,解决上述所有问题,尽量少的开发约定，可定制的,build,配置,提供类似,NodeJS,的模块机制,结构上易扩展,builder,实现基于,NodeJS,易上手，减少学习成本,提供比浏览器原生扩展更强大的,API,ExtSync Getting Start,manifest.json,(,required,),扩展基本信息,background,content_scripts,etc.,权限声明等,like chrome,build_config.json(optional),指定图片等资源目录（默认,assets,）,格式化,JavaScript,选项,JS,脚本，,HTML,，,CSS,，图片，,etc.,ExtSync API,基于,require(),和,module.exports,的模块组织方式,对于,content script,只暴露,extsync,一个全局对象用于消息通信：,extsync.sendMessage(),extsync.onMessage(),后台脚本强制使用,require(),引用,ExtSync,模块和自定义模块,extension,tabs,etc.,ExtSync-Build,extsync chrome,extsync firefox dist output D:/output,ExtSync-,结构,ExtSync build,流程,ExtSync,模块化实现,虚拟的模块化实现,实质：实现,require(),方法，注册模块，包装作用域，查找依赖关系合并文件,ExtSync,代码检查和替换,UglifyJS TreeTransformer,AST(Abstract Syntax Tree),code-AST-code,节点类型,:AST_Call,AST_Assign,AST_Seq,AST_ SimpleStatement,etc.,原理：查找指定类型节点，并在,transformer,中返回新节点,ExtSync if else,实现,var,ifConditionPattern,=/,/,t,*if(?:chrome|firefox|opera|safari)(?:,t,*,t,*(?:chrome|firefox|opera|safari)*),t,*,nr,+(,sS,+,?,),nr,+,/,t,*endif,t,*/g,var,ifElseConditionPattern,=,/,t,*if(?:chrome|firefox|opera|safari)(?:,t,*,t,*(?:chrome|firefox|opera|safari)*),t,*,nr,+(,sS,+,?,),nr,+,/,t,*else,t,*,nr,+(,sS,+,?,),nr,+,/,t,*endif,t,*/g,ExtSync,扩展的扩展,扩展浏览器支持，扩展,API,/config.json,定义了支持哪些浏览器,base/,下面定义了,API,实现接口,browsers/,下定义浏览器文件夹，,build.js,实现构建过程，提供,manifest,模板文件,ExtSync,未来,逐步增加更多浏览器支持和,API,支持,提供更强大的,build,语法,更智能的，严谨的检测，更宽松的限制,Thanks,Q,&,A,&,3Q:),_Meteora_,
展开阅读全文