请选择 进入手机版 | 继续访问电脑版
Mozilla

火狐社区

登录    注册

用新浪微博连接 QQ互联

经典扩展重生:树状标签页管理 Tree Style Tab

yingliu Mozilla员工 发表于 2018-1-26 17:26:21 | 显示全部楼层 [复制链接]
3 1999
本帖最后由 yingliu 于 2018-1-26 17:30 编辑

TST.png

Yuki Hiroshi (外号 Piro) 是货真价实的技术先驱和 DIY 专家,现居日本东京。只要发现浏览器体验有需要改善的地方,他就会自己动手打造改善方案并分享出来。在累积了将近 100 款浏览器扩展的辉煌战果后,Piro 不久前迎战了至今最大的挑战:将经典的树状标签页管理 (Tree Style Tab, 简写为 TST) 扩展移植到新的 WebExtensions API 与 Firefox Quantum 上。

Yuki.png

TST 是在传统的 XUL 平台上开发的,是相当复杂的扩展,所以,把它变成新的 WebExtensions API 格式会碰到很多棘手的问题。Piro 在过程中确实碰上一些难题,其中包括程序缺陷和未记录的行为。他又是如何克服挑战的呢?他秉持着乐观的心态和对于新 API 功能的信念,在新平台上完成了扩展,并成功将它带入了有史以来最快的 Firefox 上。本文将针对他的挑战帮大家解决心中所惑。

如果您想深入了解其中过程的技术细节,欢迎阅读 Piro 发表在个人博客的文章 —— WebExtensions Migration Story of Tree Style Tab (状标签页管理扩展的转移之旅),文中分享了他的开发策略、原代码片段 (snippets),以及 XUL 与WebExtensions 平台的架构图。

背景

Q: 你(Yuki Hiroshi)最开始是针对哪个浏览器开发扩展?
我写的第一个扩展是针对 Mozilla Application Suite 开发的,那时 Firefox 还没推出。

Q: 你开发过哪些 Firefox 扩展?
很多,包括:Tree Style TabMultiple Tab HandlerText Link 等等。我做的扩展多半是改变 Firefox 的默认行为,而不是增加全新的功能。

Q: 目前为止,你开发的Firefox 扩展有多少?
我已经开发了快 100个 Firefox 和 Thunderbird 的扩展,其中有一半只是为了自己方便而做的。但我也发布了大概 40 款,其中大部分是旧的 XUL 扩展,还没全部转成 WebExtensions 格式。

Q: 在哪里可以找到你开发的扩展?
我公开发布的扩展都已发布在 addons.mozilla.org 上。如果想看我开发的其他旧扩展(包括未公开发布的),则可到我的个人网站

6H6gpsesqjlM19T.gif
通过拖放的方式把相关的标签放入同一组

有关 Yuki Hiroshi 的开发工作

Q: 为什么要开发扩展? 你想要解决什么问题?
我的出发点是想让在线浏览变得更轻松简单。每当碰到小问题或不方便的地方,我就会创建新扩展来做改变。

Q: 你开发扩展有几年的时间了?
16 年了。第一个扩展是在 2001 年 11 月发布的。

Q: 这些年间科技有何改变?
Firefox 本身技术有一些改变,如 Gecko 渲染引擎和 JavaScript 引擎的改进。此外,还多了包括 CSS3 和 ES6 等新 Web 标准技术。最近,我又学了async-await 语法,以及开始开发 WebExtensions。这些新技术帮我清理过旧的和质量不好的程序代码,简化管理和维护的工作。

Q: 你把扩展从 XUL 转移到 WebExtensions,这过程难吗?
我把 Tree StyleTab 改成了 WebExtension。TST 原是大型的 XUL 扩展。老实说,我在过程中吃了不少苦头。其中最麻烦的是评估功能去留的部分。由于WebExtensions APIs 的限制,部分功能无法转移。决定哪些该保留、哪些该舍弃很不容易。

还有,要适时判断扩展何时会取消或覆盖 Firefox 的默认行为,这也不简单。因为像我提过的,我的扩展大多只是要改变Firefox 的行为,而不是消除它。但 WebExtensions API 仅提供有限的接口,所以我常要根据事件发生的顺序来猜测 Firefox 在某一时间点上产生的改变。

Q: 在你开发 Firefox 扩展时,哪些资源最有用?
在研究如何在 XUL 导入扩展时,我用过 DXR,那是一个 Mozilla 产品原代码的在线搜索系统。针对 WebExtensions,我参考了其余现有 WebExtensions 和 Google Chrome 扩展的原代码。

Q: 你通过哪些网站或工具学 WebExtensions API?
MDN Web Docs 当然是我第一个切入点。除此以外,我觉得对于新手来说,现有一些扩展原代码的链接也很好用,就像反向字典的功能一样。

WebExtension 体验

Q: Firefox Quantum 有哪些新功能帮你更顺利完成移转?
Mozilla 为 Firefox 57(Quantum) 推出许多新的 WebExtensions APIs,如:标签页的 openerTabId 属性。opener 的信息和 Tree Style Tab 息息相关。如果那些 APIs 不存在的话,Tree Style Tab 也无法顺利转换过来。

Q: 以难度从 1 到 10 来说 ( 1 是最简单的),写 WebExtensions APIs 的难度有多高?
差不多是 2 或 3。对于只需在 Firefox 中增加一个键、侧边栏或其他特有功能的扩展来说,WebExtensions APIs 还算简单明了的。然而,有些特殊情况会有未记录的行为,而这些行为可能与你手中项目的某一版本 Firefox 相关。假如你在写的扩展会改变 Firefox 的行为,你就必须深入了解那些未记录的行为。

Q: 完成 WebExtensions 的转换后,你还满意吗?
我喜欢这些 APIs 的稳定性。基本上,WebExtensions APIs 无论现在或未来都保证能与 Firefox 兼容,所以我能开发长期使用的扩展,而不必担心会在新版本推出后失效。

Q: 你花了多久写好这个扩展?
我是在 2017 年 8 月底开始开发 Tree Style Tab 的 WebExtension,后来在 2017 年 11 月发布。有部分的树状管理功能是从旧的 XUL 版本汇入,而旧的版本则是在 2007 到 2017 年间开发。

Q: 帮 Firefox 扩展修 bug 难不难?
现在不难。扩展作者就算不太精通 Firefox 的专属技术 (尤其是XUL 和 XPCOM) 也没关系。不过,Firefox 的 about:debugging 功能是扩展修 bug 的好帮手。还有一个名为 web-ext 的命令行工具在修bug和发布上也很好用。

Q: Tree Style Tab 扩展推出后反响如何?
大多数人好像都满喜欢新的 WebExtension 版本。有人甚至说他们是为了 Tree Style Tab 才使用 Firefox 的,所以很高兴可以在 Firefox Quantum 和未来新版本的 Firefox 中使用 TST。

Q: 你在开发扩展时曾经碰过什么难题呢?后来又是如何解决的?
因为 WebExtensions API 仍在积极开发的阶段,开发新的 TST 扩展时,我确实在处理边界情况 (edge case) 上发现一些程序缺陷,并且也把那些缺陷提交给Bugzilla。以 WebExtensions 来说,因为 API 局限而产生的问题基本上是无法解决的,也只有少数情况有变通方案,所以作者唯一能做的事,就是通报给 Bugzilla 并等候问题修复。

不过,从另一个角度来说,那也是好事。过去,在 XUL 扩展上,作者能做的事不受限,甚至还能换掉 Firefox 内部的 XPCOM 组件。因此,扩展的界线和作者的责任可以无限延伸,而作者得对用户提出的功能要求频繁地响应。过去,那让我感到很苦恼。但是,WebExtensions 的作者却只要说「因为 API 的限制,所以办不到」就好。我认为这一点很方便,这也是 WebExtensions 带来的重要改变。

Q: 对于其他也想转到 WebExtensions 的人来说,有什么建议?
尽可能简化开发任务。如果你要移转的是多功能的扩展,最好不要把所有功能都打包起来,而应该把每个功能各自独立为一个扩展。然后,再利用隐式 (基于如 tabs.Tab 和 openerTabId 的属性等共享信息) 或显式 (基于 runtime.sendMessage() 的自定义信息) 的 API 方法,让这些不同套件之间彼此交互。

把眼光放在预期结果上,而不要花时间操心自己做不做得到。你可能无法把 XUL 扩展的行为完全复制到新的 WebExtensions 版本上。举例来说,以方法为基础 (method-based) 的旧型同步 (blocking) API 已无法取得,而 Firefox UI 上的原始 DOM 事件也无法再监听 (listenable),所以,你必须忘记这些手法,改而学习在 WebExtensions 世界里该怎么做才是正常的。之后,或许你能找到事半功倍的做法,那时你就能自在地探索这个新世界,好好享受其中的乐趣!


相关参考文章



FlamingFox 老狐狸
发表于 2018-1-26 19:31:53 | 显示全部楼层
学习了,顶礼膜拜中……
隐元 老狐狸
发表于 2018-1-27 07:56:02 | 显示全部楼层
mozilla需要这样的创新者!
WYSISYG 社区新人
发表于 2018-2-2 17:56:23 | 显示全部楼层
啦啦啦 初吻留给你了
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发新帖
论坛更多 »
火狐微信
快速回复 返回顶部 返回列表