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

1、跨浏览器扩展开发框架的设计与实现王 军跨浏览器扩展开发框架的设计与实现 关于我 name: 王军王军, company: 阿里巴巴阿里巴巴 一淘及搜索事业部一淘及搜索事业部, description: F2E, JavaScript developer, weibo: _Meteora_跨浏览器扩展开发框架的设计与实现 提纲浏览器扩展开发基本概念现有扩展开发框架介绍新的扩展开发框架的设计和实现跨浏览器扩展开发框架的设计与实现 首先 讨论对象限于提供了成熟的扩展机制的浏览器，例如：Chrome，Firefox，Opera，Safari 等 浏览器 扩展（extension），而非 插件（plug

2、in）跨浏览器扩展开发框架的设计与实现 扩展开发基本概念 文件构成 扩展配置信息文件 HTML, CSS, JavaScript 图片，资源文件 anything you need跨浏览器扩展开发框架的设计与实现 扩展开发基本概念 配置信息文件 基本信息 扩展名称 版本号 功能定义 工具栏 Popup 后台脚本等 权限声明 扩展功能使用声明 URL 访问跨浏览器扩展开发框架的设计与实现 扩展开发基本概念 两类脚本 background script (server) 独立进程，跟随浏览器生命周期 存储持久化数据，发送跨域 XHR 请求 实现扩展主逻辑，完全的 API 访问权限 content

3、scripts (client) 存活于插入页面进程，与页面脚本环境隔离 可操作插入页面的 DOM Tree 有限的扩展 API 访问跨浏览器扩展开发框架的设计与实现 扩展开发基本概念 可用 API ECMAScript 5 API 浏览器扩展 API tabs windows bookmarks browserAction DOM API / BOM API HTML5 / CSS3跨浏览器扩展开发框架的设计与实现 扩展开发基本概念 总结 浏览器扩展是为了增强浏览器的功能，使用 Web 前端技术，结合扩展 API 开发的：Web App跨浏览器扩展开发框架的设计与实现 现有扩展开发框架 功能

4、 实现 WORA（write once, run anywhere） 的半自动化 builder Usage build chrome build dist firefox跨浏览器扩展开发框架的设计与实现现有扩展开发框架 实现原理 基于 Perl 开发 封装各浏览器扩展 API，暴露统一接口 定制的 build 语法 根据语法剪裁，合并，复制和打包文件include FILEif BROWSER1, BROWSER/ code for BROWSER1, else/ code for other browsersendif跨浏览器扩展开发框架的设计与实现现有扩展开发框架 现状 与业务代码耦合较

5、大，限制较多，不易拿出来单独使用 手动管理文件依赖，模糊的模块依赖关系 结构上不易扩展更多浏览器支持和 API 支持跨浏览器扩展开发框架的设计与实现 新的扩展开发框架 ExtSync WORA 解决上述所有问题 尽量少的开发约定，可定制的 build 配置 提供类似 NodeJS 的模块机制 结构上易扩展 builder 实现基于 NodeJS 易上手，减少学习成本 提供比浏览器原生扩展更强大的 API跨浏览器扩展开发框架的设计与实现 ExtSync Getting Start manifest.json (required) 扩展基本信息 background, content_script

6、s, 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 模块

7、和自定义模块 extension , tabs, etc.跨浏览器扩展开发框架的设计与实现 ExtSync - Buildextsync chromeextsync firefox dist output D:/output 跨浏览器扩展开发框架的设计与实现 ExtSync - 结构跨浏览器扩展开发框架的设计与实现 ExtSync build 流程跨浏览器扩展开发框架的设计与实现 ExtSync 模块化实现 虚拟的模块化实现 实质：实现 require() 方法，注册模块，包装作用域，查找依赖关系合并文件跨浏览器扩展开发框架的设计与实现 ExtSync 代码检查和替换 UglifyJS Tre

8、eTransformer 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*n

9、r+(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 模板文件跨浏览器