资源描述：
《跨浏览器扩展开发框架的设计与实现.pptx》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、跨浏览器扩展开发框架的设计与实现王军关于我{"name":"王军","company":"阿里巴巴—一淘及搜索事业部","description":"F2E,JavaScriptdeveloper","weibo":"__Meteora__"}提纲浏览器扩展开发基本概念现有扩展开发框架介绍新的扩展开发框架的设计和实现首先讨论对象限于提供了成熟的扩展机制的浏览器，例如：Chrome，Firefox，Opera，Safari等浏览器扩展（extension），而非插件（plugin）扩展开发基本概念–文件构成扩展配置信息文
2、件HTML,CSS,JavaScript图片，资源文件anythingyouneed…扩展开发基本概念–配置信息文件基本信息扩展名称版本号功能定义工具栏Popup后台脚本等…权限声明扩展功能使用声明URL访问扩展开发基本概念–两类脚本backgroundscript(server)独立进程，跟随浏览器生命周期存储持久化数据，发送跨域XHR请求实现扩展主逻辑，完全的API访问权限contentscripts(client)存活于插入页面进程，与页面脚本环境隔离可操作插入页面的DOMTree有限的扩展API访问扩展开发基本
3、概念–可用APIECMAScript5API浏览器扩展APItabswindowsbookmarksbrowserAction…DOMAPI/BOMAPIHTML5/CSS3扩展开发基本概念–总结浏览器扩展是为了增强浏览器的功能，使用Web前端技术，结合扩展API开发的：WebApp现有扩展开发框架–功能实现WORA（writeonce,runanywhere）的半自动化builderUsagebuildchromebuilddistfirefox现有扩展开发框架–实现原理基于Perl开发封装各浏览器扩展API，暴露统
4、一接口定制的build语法根据语法剪裁，合并，复制和打包文件@includeFILE@ifBROWSER1,[BROWSER…]//codeforBROWSER1,…@else//codeforotherbrowsers@endif现有扩展开发框架–现状与业务代码耦合较大，限制较多，不易拿出来单独使用手动管理文件依赖，模糊的模块依赖关系结构上不易扩展更多浏览器支持和API支持新的扩展开发框架–ExtSyncWORA解决上述所有问题尽量少的开发约定，可定制的build配置提供类似NodeJS的模块机制结构上易扩展buil
5、der实现基于NodeJS易上手，减少学习成本提供比浏览器原生扩展更强大的APIExtSync–GettingStartmanifest.json(required)扩展基本信息background,content_scripts,etc.权限声明等likechromebuild_config.json(optional)指定图片等资源目录（默认assets）格式化JavaScript选项JS脚本，HTML，CSS，图片，etc.ExtSync–API基于require()和module.exports的模块组织方式对
6、于contentscript只暴露extsync一个全局对象用于消息通信：extsync.sendMessage()extsync.onMessage()后台脚本强制使用require()引用ExtSync模块和自定义模块extension,tabs,etc.ExtSync-Buildextsyncchromeextsyncfirefox––dist––outputD:/outputExtSync-结构ExtSync–build流程ExtSync–模块化实现虚拟的模块化实现实质：实现require()方法，注册模块，包
7、装作用域，查找依赖关系合并文件ExtSync–代码检查和替换UglifyJS–TreeTransformerAST(AbstractSyntaxTree)code->AST->code节点类型:AST_Call,AST_Assign,AST_Seq,AST_SimpleStatement,etc.原理：查找指定类型节点，并在transformer中返回新节点ExtSync–@if@else实现varifConditionPattern=///[t]*@if((?:chrome
8、firefox
9、opera
10、safa
11、ri)(?:[t]*,[t]*(?:chrome
12、firefox
13、opera
14、safari))*)[t]*[r]+([sS]+?)[r]+//[t]*@endif[t]*/gvarifElseConditionPattern=///[t]*@if((?:chrome
15、firefox
16、opera
17、
