开发Firefox扩展的最简单方法是什么?

时间:2013-12-05 19:55:13

标签: javascript google-chrome firefox firefox-addon firefox-addon-sdk

我打算开发一个简单的Firefox扩展程序,它会缩短当前活动标签的网址,显示带有缩短网址的弹出窗口,并将其放入剪贴板。

在谷歌浏览器中,这很简单(根据http://developer.chrome.com/extensions/getstarted.html) - 纯JavaScript以及一些与浏览器UI交互的JavaScript API调用。

然而,在搜索了一个很好的Firefox扩展教程之后,我找到的最正式的链接是:

据他们说,看起来我必须学习XUL语言,即使是与浏览器UI最简单的交互。最重要的是,我将不得不设置自定义Firefox配置文件,以便在开发过程中不使用我的默认配置文件,创建复杂的目录结构,用晦涩的XML编写清单,弄清楚如何打包和测试我实现的任何内容等。 / p>

2013年,是否有更简单的方法来构建Firefox扩展?

5 个答案:

答案 0 :(得分:72)

  

2013年,是否有更简单的方法来构建Firefox扩展?

是的!

您在问题中提供的链接令人难以置信地过时了。有一种新的,更好的方法来开发Firefox扩展 - Firefox附加SDK

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

入门步骤(Mac / Linux,但PC应该非常相似):

  • https://addons.mozilla.org/en-US/developers/builder下载SDK,解压缩。
  • 快速浏览一下README文件(总是很有用)。
  • 从SDK目录执行source bin/activate(与README文件所在的目录相同)。
  • 执行cfx docs - 此引导SDK docs的本地副本并在您的浏览器中打开。
  • 保留SDK目录,为您的分机创建一个空目录。
  • 在扩展名dir中执行cfx init - 这将生成所有必需的文件/目录。
  • 按照getting-started-with-cfx页的其余部分进行操作:
    • 只需几行JS即可更新lib/main.js,将自定义小部件放到附加工具栏上。
    • 执行cfx run - 这将打开新的Firefox实例,其中包含新的闪亮扩展程序。

总而言之,我花了几个小时阅读文档,熟悉SDK API,找到SDK module将小部件放到导航栏而不是附加栏,并在大约50行JavaScript中开发全功能扩展。

HTH!

更新

有一个名为WebExtensions

的新标准

来自MDN

  

目前有几种用于开发Firefox附加组件的工具集,但WebExtensions将在2017年底成为标准。

     

如果您要撰写新的插件,我们建议您编写WebExtension

答案 1 :(得分:9)

是的,您可以使用三种不同的技术来构建扩展程序:

  1. Add-on SDK-based extensions
  2. manually bootstrapped restartless extensions
  3. overlay extensions
  4. 您可以阅读here

    之间的比较
      

    如果可以,建议使用Add-on SDK,它使用   无重启的扩展机制,但简化了某些任务和   自己清理干净。如果附加SDK不适合您的   需要,改为实现手动无重启扩展。

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

    1. Installation
    2. Create user interfaces
    3. Interact with the browser

答案 2 :(得分:8)

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 Maone actively support the change to WebExtensions

要开发WebExtension,您需要

  • 可以通过

    安装的web-ext-tool
    npm install --global web-ext
    
  • 或只是使用Firefox的about:debugging或Chromium的chrome:extensions暂时加载webextension。

无论哪种方式,您需要在您创建的目录中使用manifest.json文件,该文件将所有功能粘合在一起。有关第一个示例,请参阅https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Your_first_WebExtension。或Google文档https://developer.chrome.com/getstarted

答案 3 :(得分:4)

two official ways 用于开发附加组件,每个附加组件都有优缺点:

1- WebExtensions (newer method):

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

2- Add-on SDK (older method):

Add-on SDK提供了用于开发Firefox附加组件的API,以及用于开发,测试和打包它们的工具。

答案 4 :(得分:3)

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

How to develop a Firefox extension with the addon SDK