什么是扩展?

注意:如果您已经熟悉浏览器扩展的基本概念,请跳过本节,了解扩展文件是如何组合在一起的。然后,使用参考文档开始构建您的扩展。访问Firefox 扩展工作坊以了解有关测试、发布和 Firefox 扩展工作流程的更多信息。

扩展为浏览器添加功能和特性。它使用熟悉的基于 Web 的技术(HTML、CSS 和 JavaScript)创建。它可以利用与网页上 JavaScript 相同的 Web API,但扩展还可以访问其自己的 JavaScript API 集。这意味着您可以在扩展中执行比在网页代码中所能执行的更多操作。以下是一些您可以执行的操作示例

增强或补充网站:使用附加组件从您的网站提供额外的浏览器功能或信息。允许用户收集他们访问的页面中的详细信息,以增强您提供的服务。

示例:Firefox 版 GrammarlyYouTube 增强器Twitter 控制面板

The Grammarly extension providing an edit hint in the GitHub editor.

让用户展现个性:浏览器扩展可以操作网页的内容;例如,允许用户添加他们喜欢的徽标或图片作为他们访问的每个页面的背景。扩展还可以使用户更新 Firefox UI 的外观,就像独立的主题附加组件一样。

示例:TablissStylus表情符号

A new tab styled by the Tabliss extension showing a woodland picture with the time and a greeting message.

添加或删除网页内容:您可能希望帮助用户阻止网页上的侵入性广告,在网页中提及国家或城市时提供旅行指南的访问权限,或重新格式化页面内容以提供一致的阅读体验。通过访问和更新页面的 HTML 和 CSS 的能力,扩展可以帮助用户以他们想要的方式查看 Web。

示例:uBlock Origin恢复 YouTube 点赞LeechBlock NG

uBlock origin pop-up showing blocked tracker statistics.

添加工具和新的浏览功能:向任务板添加新功能,或从 URL、超链接或页面文本生成 QR 码图像。借助灵活的 UI 选项和WebExtensions API的功能,您可以轻松地向浏览器添加新功能。而且,您可以增强几乎任何网站的功能或特性,它不必是您的网站。

示例:全球广播Flagfox番茄钟

The Worldwide Radio extension showing a list of radio stations for Canada, with RadioOne selected to play.

游戏:提供具有离线播放功能的传统电脑游戏,或探索新的游戏可能性,例如将游戏玩法融入日常浏览中。

示例:RPG 游戏 - Loycom Games 开发的 Dedalium纸牌游戏2048 Prime

The Dedalium pop-up showing play status and providing options to start a battle or adventure.

添加开发工具:您可以提供 Web 开发工具作为您的业务,或者开发了一种有用的 Web 开发技术或方法,您希望与他人分享。无论哪种方式,您都可以通过向开发者工具栏添加新选项卡来增强内置的 Firefox 开发者工具。

示例:aXe 开发者工具Web 开发者Web React 开发者工具

The Axe accessibility testing extension showing accessibility issues found in a webpage.

Firefox 的扩展使用WebExtensions API构建,这是一个用于开发扩展的跨浏览器系统。在很大程度上,该 API 与 Google Chrome 和 Opera 支持的扩展 API兼容。为这些浏览器编写的扩展在大多数情况下只需进行少量更改即可在 Firefox 或 Microsoft Edge 中运行。

如果您有任何想法或问题,可以通过附加组件讨论区附加组件聊天室(位于Matrix上)与我们联系。

接下来是什么?