作者：… 或者为了好玩或盈利而进行跨浏览器插件开发
浏览器插件显然是一个重要的 Web 浏览器功能，至少在桌面平台上是这样，并且很长一段时间以来，Firefox 都是浏览器插件作者的首选目标。当 Google 推出 Chrome 时，这种在桌面浏览器领域中的趋势非常明显，因此他们的浏览器也提供了一个插件 API。
我们习惯使用的大多数 Web 开发工具现在都直接集成到我们的浏览器中，但它们在不久之前还是插件，所以新的 Web 开发工具作为插件诞生并不奇怪。
Web 开发工具（集成或插件）可以激励 Web 开发人员更改他们的浏览器，然后 Web 开发人员可以推动 Web 用户更改他们的浏览器。所以，长话短说，创建跨浏览器插件会很有趣也很有用，尤其是 Web 开发工具插件（例如，为了维护网络中立）。
带着这个目标，我选择 Ember Inspector 作为我的跨浏览器开发工具插件实验的目标，基于以下原因：
- 它属于一个新兴且有趣的 Web 开发工具家族（Web 框架开发工具）
- 它是一个相当复杂/现实世界的 Chrome 扩展
- 它主要由其自身社区使用相同的 Web 框架编写
- 即使它是一个 Chrome 扩展，它也是使用 Grunt 从应用程序源代码构建的 Web 应用程序
- 它的 JavaScript 代码被组织成模块，并且 Chrome 特定的代码大多隔离在其中几个模块中
- 创建新的 Firefox 插件特定代码（注册一个开发工具面板，控制被检查的标签页）
- 填充ember_debug 模块（注入到被检查的标签页）和开发工具 ember app（在开发工具面板中运行）之间的通信通道
- 填充丢失的非标准inspect 函数，该函数在由定义的 Ember 视图 ID 选择的 DOM 元素上打开 DOM Inspector
- 进行一些细微调整（隔离其余 Chrome 和 Firefox 特定代码，修复 CSS -webkit 前缀规则）
- 模块化的 JavaScript 源代码，有助于将浏览器特定代码封装到可替换的模块中
- 注入到目标标签的开发工具面板和代码通过交换简单的 JSON 消息进行协作，并且该协议（由此插件定义）完全与浏览器无关
- Firefox（来自 AMO）：https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/
- Chrome（来自 Chrome 网上应用店）：https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi
计划和运行移植工作
查看 ember-extension Git 仓库，我们可以看到该插件是使用 Grunt 从其源代码构建的
该扩展通过消息传递在开发人员工具面板、页面和主扩展代码之间进行通信
利用这些知识，规划移植到 Firefox 变得出奇地容易
在我看来，由于两个主要的设计选择，这次移植的计划特别愉快：
构成此扩展的大多数 JavaScript 模块已经与浏览器无关，因此第一步是引导一个简单的 Firefox 插件并注册一个新的开发工具面板。
在 DevTools 中创建一个新的面板非常简单，并且在Tools/DevToolsAPI 页面（正在进行中）中有一些关于该主题的有用文档。
注册/取消注册开发工具面板
来自 https://github.com/tildeio/ember-extension/blob/master/dist_firefox/lib/main.js
开发工具面板定义
来自 https://github.com/tildeio/ember-extension/blob/master/dist_firefox/lib/devtool-panel.js#L26
然后，进入第二步，调整用于在开发工具面板和在目标标签页中运行的注入代码之间创建消息通道的代码，使用内容脚本和来自 Mozilla 插件 SDK 的低级内容工作线程，这些内容脚本和工作线程在官方指南和 API 参考中都有很好的记录
开发工具面板工作线程
来自 https://github.com/tildeio/ember-extension/blob/master/dist_firefox/lib/devtool-panel.js
注入 ember_debug
来自 https://github.com/tildeio/ember-extension/blob/master/dist_firefox/lib/devtool-panel.js
最后挂钩激活在定义的 DOM 元素上打开 DOM Inspector 所需的浏览器特定代码
检查 DOM 元素请求处理程序
来自 https://github.com/tildeio/ember-extension/blob/master/dist_firefox/lib/devtool-panel.js#L178
评估其功能并深入研究交换的消息
此时，人们可能会想知道：像这样的工具到底有多有用？，我真的很需要它吗？等等。
我必须承认，我开始并完成了这个移植工作，但我并没有成为一个经验丰富的 EmberJS 开发人员，但为了能够检查所有原始功能是否在 Firefox 上正常工作，以及真正了解这个浏览器插件如何在应用程序开发/调试阶段帮助 EmberJS 开发人员（其最重要的用例），我开始尝试使用 EmberJS，我不得不说 EmberJS 是一个非常愉快的框架，并且 Ember Inspector 是一个非常重要的工具，可以放入我们的工具箱中。
我非常确定，每个中等或大型 JavaScript 框架都需要这种类型的开发工具；显然，它永远不会成为一个集成的工具，因为它与框架相关，从现在开始，我们会习惯使用这种新的开发工具插件家族。
列出 Ember 视图、模型组件和路由
第一个用例是可以立即可视化我们的 EmberJS 应用程序为我们实例化的路由、视图/组件、模型和控制器，而无需过多使用 Web 控制台的操作。
所以，当我们在当前浏览器标签页中打开一个活跃的 EmberJS 应用程序时，它会立即可用（并且很明显）。
使用这些表格，我们可以检查我们在实际对象层次结构中定义的所有属性（即使是计算属性），或者从 Ember 类继承的属性。
使用与集成开发工具基础设施中的Mozilla 远程调试协议非常类似的方法（例如，即使我们本地使用开发工具，它们也会通过管道交换 JSON 消息），注入到目标标签中的ember_debug 组件会将有关已实例化的 EmberJS 对象的信息发送到开发工具面板组件，每个对象都由内部生成的引用 ID 标识（类似于来自 Mozilla 远程调试协议的“Grips”概念）。
记录交换的消息，我们可以更多地了解该协议。
接收有关 EmberJS 视图树信息的更新（EmberDebug -> 开发工具面板）
请求检查对象（开发工具面板 -> EmberDebug）
接收有关所请求对象信息的更新（开发工具面板 -> EmberDebug）
从 Web 控制台中访问层次结构中的每个 EmberJS 对象
一个不太明显但非常有用的功能是“sendToConsole”，以便能够从上面描述的表格中访问 Web 控制台可以检查的任何对象/属性。
当我们点击>$E 链接时（它在右侧拆分面板中可用）
Ember 开发工具面板会要求 ember_debug 将定义的对象/属性放入一个在目标标签页中全局可访问的变量中，该变量名为$E，然后我们可以切换到 Web 控制台并自由地与之交互
请求将对象发送到控制台（开发工具面板 -> EmberDebug）
更多内容
这些只是Ember Inspector中已经存在的一些功能，其即将发布的版本中将增加更多功能（例如，记录和检查 Ember Promise）。
如果你已经使用 EmberJS，或者你正在考虑尝试使用它，我建议你尝试一下Ember Inspector（如果你愿意，在 Firefox 或 Chrome 上都可以使用它），它将使你检查 EmberJS Web 应用程序成为一项快速而轻松的任务。
将 XPI 构建集成到基于 Grunt 的构建流程中
在将 Firefox 插件完全集成到 ember-extension 构建工作流程的道路上，最后一个挑战是为基于 Mozilla 插件 SDK 的插件构建 XPI，并将其集成到 Grunt 构建流程中
Chrome CRX 扩展实际上就是 ZIP 文件，Firefox XPI 插件也是如此，但是基于 Mozilla 插件 SDK 的 Firefox 插件需要使用来自插件 SDK 包的cfx 工具 进行构建。
如果我们想要更多跨浏览器插件，我们必须帮助开发人员使用 ember-extension 所采用的相同方法来构建跨浏览器扩展：使用 Grunt 构建的 Web 应用程序，该应用程序将在浏览器插件中运行（它提供了特定于各种支持浏览器的粘合代码）。
因此，我决定将我整理好的 Grunt 插件（用于集成插件 SDK 的通用和自定义任务，例如下载定义的插件 SDK 版本、构建 XPI、使用自定义参数运行 cfx）移到一个单独的项目（和 npm 包）中，因为它可以帮助使此任务更简单、更轻松。
使用 Grunt 构建和运行 Ember Inspector Firefox 插件
以下是一些来自 Grunt-mozilla-addon-sdk 集成到 ember-extension（在grunt-mozilla-addon-sdk 仓库的 README 中进行了简要介绍）中的有趣片段：
将 Grunt 插件集成到 npm 依赖项中：package.json
定义和使用 Grunt 快捷任务：Gruntfile.js
配置 Grunt-mozilla-addon-sdk 任务选项
结论
特别是得益于 EmberJS/EmberInspector 社区及其维护人员的帮助，Ember Inspector Firefox 插件已正式合并并集成到自动构建流程中，因此现在我们可以在 Firefox 和 Chrome 上使用它来检查我们的 EmberJS 应用程序！
稳定版
最新版本
在这篇文章中，我们简要地剖析了一种有趣的模式来开发跨浏览器开发者工具插件，并介绍了一个 grunt 插件，它简化了将 Add-on SDK 工具集成到使用 grunt 构建的项目中：https://npmjs.net.cn/package/grunt-mozilla-addon-sdk
感谢 Mozilla 在应用领域推行的相同 以 Web 为先 的方法，创建跨浏览器插件比我们想象的要简单，我们都赢了 :-)
祝您跨浏览器扩展愉快！
Luca
关于 Luca Greco
关于 Robert Nyman [荣誉编辑]
Mozilla Hacks 技术布道师兼编辑。在 HTML5、JavaScript 和开放网络方面进行演讲和博客撰写。Robert 是 HTML5 和开放网络的坚定支持者，自 1999 年以来一直从事 Web 前端开发，曾在瑞典和纽约市工作。他还经常在 http://robertnyman.com 上撰写博客文章，并且喜欢旅行和结识新朋友。
2 条评论