web-dev-qa-db-ja.com

Firefox拡張機能を開発する最も簡単な方法は何ですか?

現在アクティブなタブのURLを短縮し、短縮URLを含むポップアップを表示して、クリップボードに配置する簡単なFirefox拡張機能を開発する予定です。

Google Chromeでは、これは非常に簡単です( http://developer.chrome.com/extensions/getstarted.html による)-純粋なJavaScriptと対話するJavaScript APIへのいくつかの呼び出しブラウザのUIを使用します。

しかし、Firefoxの優れた拡張機能のチュートリアルを探した後、私が見つけた最も公式に見えるリンクは次のとおりです。

彼らによると、ブラウザのUIとの最も単純なやり取りでもXUL言語を習得しなければならないようです。それに加えて、開発中にデフォルトのプロファイルを使い果たしたり、複雑なディレクトリ構造を作成したり、不明瞭なXMLでマニフェストを書いたり、実装したものをパッケージ化してテストしたりする方法を見つけ出さないように、カスタムFirefoxプロファイルを設定する必要があります.

2013年ですが、Firefox拡張機能を構築する簡単な方法はありませんか?

60
dorserg

2013年ですが、Firefox拡張機能を構築する簡単な方法はありませんか?

はい!

質問で提供したリンクは信じられないほど古くなっています。 Firefox拡張機能を開発するための新しい、はるかに優れた方法があります-FirefoxアドオンSDK

ただし、「firefoxアドオンチュートリアル」の行に沿ってグーグルで検索するのは難しいです。 Mozillaがもっと積極的に宣伝していないことや、少なくともあなたが見つけたページで言及していることに驚いています。

開始する手順(Mac/Linux、ただしPCでもかなり似ているはずです):

  • https://addons.mozilla.org/en-US/developers/builder からSDKをダウンロードし、展開します。
  • READMEファイル(常に便利です)をざっと見てください。
  • 実行source bin/activate SDKディレクトリから(READMEファイルがある同じディレクトリ)。
  • 実行cfx docs-これは SDK docs のローカルコピーをブートストラップし、ブラウザで開きます。
  • SDKディレクトリをそのままにして、拡張用の空のディレクトリを作成します。
  • 実行cfx init拡張機能ディレクトリ内-これにより、必要なすべてのファイル/ディレクトリが生成されます。
  • getting-started-with-cfx page:の残りの部分に従います。
    • 更新lib/main.js数行のJSで、カスタムウィジェットをアドオンバーに配置します。
    • 実行cfx run-新しい光沢のある拡張機能を含む新しいFirefoxインスタンスを開きます。

全体として、ドキュメントを読み、SDK APIに精通し、SDK モジュール を見つけてアドオンバーの代わりにナビゲーションバーにウィジェットを配置するのに数時間しかかかりませんでした。約50行のJavaScriptで完全に機能する拡張機能を開発します。

HTH!

更新

WebExtensions と呼ばれる新しい標準があります

[〜#〜] mdn [〜#〜] から

現在、Firefoxアドオンを開発するためのいくつかのツールセットがありますが、WebExtensionsは2017年末までに標準になります。

新しいアドオンを作成している場合、WebExtensionを作成することをお勧めします。

72
dorserg

はい、拡張機能を構築するために使用できる3つの異なる手法があります。

  1. アドオンSDKベースの拡張機能
  2. 手動でブートストラップされたリスタートレス拡張機能
  3. オーバーレイ拡張機能

here の比較を読むことができます

可能な場合は、アドオンSDKを使用することをお勧めします。アドオンSDKは、再起動不要の拡張メカニズムを使用しますが、特定のタスクを簡素化し、自動的にクリーンアップします。アドオンSDKがニーズに十分でない場合は、代わりに手動の再起動不要の拡張機能を実装してください。

手順で始めるアドオンSDKベースの拡張機能

  1. インストール
  2. ユーザーインターフェイスの作成
  3. ブラウザと対話する
9
Subodh Ghulaxe

https://blog.mozilla.org/addons/2016/11/23/add-ons-in-2017/ の時点で、今後の唯一の方法は WebExtensions を使用することです。 Firefox 52では最後のSDK拡張機能が受け入れられますが、Firefox 57は他のすべての拡張機能サポートを終了し、WebExtensionsのみをサポートします。

FirefoxはGoogle Chromeの拡張APIをコピーしました。したがって、Chrome extensionを使用して、すべてのAPIがFirefoxで既にサポートされているかどうかを確認することができます(現時点ではそうです)。 NoScriptなどのプログラマ のGiorgio Maone 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 を参照してください。または、 https://developer.chrome.com/getstarted のGoogleドキュメント。

8
serv-inc

アドオンの開発には2つの公式な方法があり、それぞれに長所と短所があります。

1- WebExtensions(新しいメソッド):

WebExtensionsは、Firefoxアドオンの未来です。 WebExtensions APIを使用できる場合、これが最良の選択です。 WebExtensionsを今すぐ開発および公開できますが、まだ初期段階です。

2-アドオンSDK(以前の方法):

アドオンSDKは、Firefoxアドオンを開発するためのAPIと、それらを開発、テスト、およびパッケージ化するためのツールを提供します。

4
iraj jelodari

FirefoxアドオンSDKを使用した拡張機能の開発に関するチュートリアルを作成しました。

アドオンSDKを使用してFirefox拡張機能を開発する方法

3
ejectamenta