开发 Firefox 扩展最简单的方法是啥？

Posted 2023-02-22

【中文标题】开发 Firefox 扩展最简单的方法是啥？

【英文标题】：What is the easiest way to develop Firefox extension?开发 Firefox 扩展最简单的方法是什么？

【发布时间】：2013-12-22 22:41:28

【问题描述】：

我正计划开发一个简单的 Firefox 扩展程序，它将缩短当前活动选项卡的 URL，显示带有缩短的 URL 的弹出窗口，并将其放入剪贴板。

在 Google Chrome 中，这将非常简单（根据http://developer.chrome.com/extensions/getstarted.html）——纯 javascript 加上一些对 JavaScript API 的调用以与浏览器的 UI 交互。

但是，在搜索了一个好的 Firefox 扩展教程之后，我发现最官方的链接是：

https://developer.mozilla.org/en-US/docs/Extensions https://developer.mozilla.org/en-US/docs/Building_an_Extension How do I write a Firefox Addon?

根据他们的说法，看起来我必须学习 XUL 语言才能与浏览器的 UI 进行最简单的交互。最重要的是，我必须设置自定义 Firefox 配置文件，以免在开发过程中占用我的默认配置文件，创建复杂的目录结构，用模糊的 XML 编写清单，弄清楚如何打包和测试我实现的任何东西等等。

现在是 2013 年，难道没有更简单的方法来构建 Firefox 扩展吗？

【参考方案1】：

现在是 2013 年，难道没有更简单的构建 Firefox 扩展的方法吗？

是的！

您在问题中提供的链接已经过时了，令人难以置信。有一种新的、更好的方式来开发 Firefox 扩展——Firefox Add-on SDK。

但是，仅通过谷歌搜索“firefox 插件教程”很难偶然发现它。我很惊讶 Mozilla 没有更积极地宣传它，或者至少在你找到的那些页面上提及它。

开始步骤（Mac/Linux，但对于 PC 应该非常相似）：

从https://addons.mozilla.org/en-US/developers/builder下载SDK，解压。 快速浏览自述文件​​（总是有用的）。 从 SDK 目录（与 README 文件所在的目录相同）执行 source bin/activate。 执行cfx docs -- 这会引导SDK docs 的本地副本并在浏览器中打开它。 保留 SDK 目录，为您的扩展创建一个空目录。 在扩展目录中执行cfx init -- 这会生成所有必要的文件/目录。 关注getting-started-with-cfx 页面的其余部分： 用几行 JS 更新 lib/main.js，将自定义小部件放置到附加栏上。 执行cfx run——这会打开一个新的Firefox实例，其中包含你新的闪亮扩展。

总而言之，我花了几个小时阅读文档，熟悉 SDK API-s，找到 SDK module 将小部件放置在导航栏而不是附加栏上，并开发只需大约 50 行 JavaScript 即可实现全功能扩展。

HTH！

更新

有一个新标准，称为WebExtensions

来自MDN

目前有多种工具集可用于开发 Firefox 插件，但 WebExtensions 将在 2017 年底成为标准。

如果您正在编写新的插件，我们建议您编写 WebExtension。

【讨论】：

在.bashrc 中创建一个方便的快捷方式，这样您就不必再手动 cd 到附加目录：alias addon-sdk="cd /opt/addon-sdk && source bin/activate; cd -"。既然您提到了“Chrome 扩展”，我想补充一点，我还创建了一个名为 browser-action 模块的模块，它使得移植使用 Chrome 的 chrome.browserAction API 的扩展非常容易。

当我在我的新文件夹中启动 bash cfx init 时，我收到此错误：/opt/addon-sdk-1.16/bin/cfx: line 12: syntax error near unexpected token '(' /opt/addon-sdk-1.16/bin/cfx: line 12: 'cuddlefish_root = os.path.dirname(os.path.dirname(os.path.realpath(sys.argv[0])))'

你必须通过phyton启动cfx，所以我创建了alias cfx="python /opt/addon-sdk-1.16/bin/cfx"

addons.mozilla.org/en-US/developers/builder此链接的内容已被删除=(

@ArslArsl：您应该通过npm 安装该工具。但是 SDK 不能再用于开发新的扩展了。见***.com/a/41107443/1587329

【参考方案2】：

从https://blog.mozilla.org/addons/2016/11/23/add-ons-in-2017/ 开始，唯一的方法就是使用WebExtensions。 Firefox 52 将接受最后一个 SDK 扩展，而 Firefox 57 将结束所有其他扩展支持，仅支持 WebExtensions。

Firefox 复制了 Google Chrome 的扩展 API。因此，您可以只使用您的 Chrome 扩展程序，然后查看 Firefox 是否已经支持所有 API（它们现在应该已经支持）。 程序员如NoScript的Giorgio Maoneactively support the change to WebExtensions。

要开发 WebExtension，您需要

可以通过安装的web-ext-tool

npm install --global web-ext

或者干脆使用 Firefox 的 about:debugging 或 Chromium 的 chrome:extensions 来临时加载网络扩展。

无论哪种方式，您都需要在您创建的目录中有一个manifest.json 文件，它将所有功能粘合在一起。第一个例子见https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Your_first_WebExtension。或https://developer.chrome.com/getstarted 上的 Google 文档。

【参考方案3】：

是的，您可以使用三种不同的技术来构建扩展：

Add-on SDK-based extensions manually bootstrapped restartless extensions overlay extensions

您可以阅读here之间的比较

如果可以，建议使用附加 SDK，它使用 无重启扩展机制，但简化了某些任务和 自行清理。如果附加 SDK 不足以满足您的需求 需要，改为实现手动无重启扩展。

步骤开始使用基于 SDK 的附加扩展

Installation Installation on OS X, FreeBSD, Linux Installation on OS X using Homebrew Installation on Windows Create user interfaces Interact with the browser

【讨论】：

Program Files (x86) 中安装 Python 时，Windows 中的 bin\activate 部分损坏。

【参考方案4】：

开发插件有two official ways，各有利弊：

1- WebExtensions (newer method):

WebExtensions 是 Firefox 附加组件的未来。如果您可以使用 WebExtensions API，那是最好的选择。您现在可以开发和发布 WebExtensions，但它们仍处于早期状态。

2- Add-on SDK (older method):

插件 SDK 提供用于开发 Firefox 插件的 API，以及用于开发、测试和打包它们的工具。

【参考方案5】：

我制作了一个关于使用 Firefox 插件 SDK 开发扩展的教程：

How to develop a Firefox extension with the addon SDK