跨浏览器扩展开发框架的设计与实现.pptx

跨浏览器扩展开发框架的设计与实现,王 军,关于我, “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/ 下定义浏览器文件夹，bui