扩展是什么?

备注: 如果你对浏览器扩展的基础概念已经熟悉,跳过这个部分去学习扩展文件是如何组织在一起的。然后,利用参考文档去构建你的扩展。访问扩展工作坊学习关于浏览器扩展工作流,测试,发布的更多内容。

扩展为浏览器添加了特性与功能。它通过我们所熟悉的 Web 技术-HTML,CSS 还有 JavaScript 来创建。扩展可以利用与 JavaScript 相同的网页 API,但是扩展也可以访问它自己专有的 JavaScript API。这意味着,和在网页里编码相比,在扩展中你可以做到更多的事情。以下是其中你可以做到的一些事情:

提升或者补充网站功能: 利用扩展来实现额外的浏览器内特性或者来自你网站的信息。允许用户搜集他们访问过的页面细节来提升你所提供的服务。

Amazon 附加组件示例提供比价功能

示例:亚马逊助手OneNote Web ClipperGrammarly for Firefox

让用户展现他们的个性: 浏览器扩展可以操控网页的内容;例如,让用户在每个他们访问的页面上添加最喜欢的 logo 或者图片作为背景。扩展也可以让用户更新 Firefox 的界面,就像独立的主题扩展一样。

My Web New Tab 附加组件展现蝙蝠侠主题

示例:MyWeb New Tab, Tabliss, 和 VivaldiFox

从网页中添加或者删除内容: 你可能想要帮助用户从网页中阻止一些侵扰的广告,当网页中提到一个国家或者城市的时候提供旅游指南,或者重组页面的内容来提供一个连续的阅读体验。利用可以访问和更新一个页面里的 HTML 和 CSS 的能力,扩展可以帮助用户以他们想要的形式来查看网页。

uBlock origin 附加组件示例和拦截跟踪器统计

示例:uBlock Origin, Reader, 和 Toolbox for Google Play Store™

添加工具和新的浏览特性: 给任务面板添加新特性,或者从 URL 地址,超链接,或者页面文字生成二维码。有了灵活的界面选项和 WebExtensions APIs 的能力,你可以很容易的向浏览器添加新的特性。并且,你可以改善几乎任何网站的特性和功能,而不必是你自己的网站。

二维码生成器附加组件示例

示例:Swimlanes for Trello and Tomato Clock

游戏: 通过离线游玩的特性或者探索新游戏的可能性来提供传统计算机游戏的功能;例如,把游戏性融入到每天的网页浏览中。

示例:Asteroids in Popup, Solitaire Card Game New Tab, 和 2048 Prime.

添加开发工具: 你可以为你的业务提供网站开发工具或者开发一个有用的技术或者你想分享的网站开发方法。无论如何,你可以通过在开发者工具栏上添加一个新的标签来增强内置的 Firefox 开发者工具。

axe 无障碍功能测试附加组件示例

示例:Web Developer, Web React Developer Tools, 和 aXe Developer Tools

Firefox 扩展使用 WebExtensions APIs来构建,这是一种用以开发扩展的跨浏览器系统。在很大程度上,它与 Google Chrome 和 Opera 所支持的扩展 API 兼容。在大多数情况下,为这些浏览器所写的扩展只需要少量修改就可以在 Firefox 和 Microsoft Edge 上运行。这些 API 也完全兼容多进程 Firefox

如果你有想法或者问题,或者在迁移旧的附加组件到 WebExtensions API时需要帮助,可以在 dev-addons 讨论版块或者 Matrix 上的 Add-ones room 与我们联系。

接下来呢?