Firefox Extension Schoolで彼らが決してあなたに言うことのない10のこと

これは私の最近の電子ブックのフォローアップ記事であり、独自のFirefox拡張機能を構築します。これは、CodeBurner、The SitePoint参照拡張機能を含むFirefoxの拡張機能の構築に関する経験から収集した有用なヒント、トリック、ハッキングを追加しました。 Firefox拡張機能の構築方法に関する基本的な知識が想定されているため、まだebookの無料コピーを手に入れたい場合は、まだまだ行っていない場合は

ここにあるもののほとんどは、Mozilla Developer Center（MDC）で明示的に文書化されていません。これは、まだ「やる」リストに載っているため、または自分で作ったためです。その一部は十分に文書化されていますが、とにかくそれに注意を向ける価値があると思ったので、それはとても便利だと思っていました。

ヒントは複雑さの順にリストされており、最も短くてより単純なアイデアから始まり、より長くてより複雑なアイデアに移行します。トップレベルの関数として（関数キーワードを使用）。ただし、実際には、メインエクステンションオブジェクトのメソッドとして作成する必要があります。

キーテイクアウト

`

`、 `

`、 `

`などのxul要素にアイコンを追加するために `list-style-image`を使用します。

`tabindex =” 0″を追加することにより、Mac OS XキーボードのFirefoxの要素を作成します。矢印キーを使用してナビゲーションを有効にします。
• 「PopUpNode」プロパティを使用してFirefoxでコンテキストメニューの元のマウスターゲットにアクセスします。これにより、カスタムコンテキストメニュー内の相互作用が簡素化されます。 「Flex」属性のない中間ラッパー要素を使用して、Xulレイアウトの「Flex」属性の不要な継承を防ぎ、子要素のサイジングをより正確に制御することを保証します。 Firefox拡張機能にプラットフォーム固有のスタイルシートを実装して、Windows、Linux、およびMac OS Xを介したさまざまなUIコンベンションに対応し、ネイティブインターフェイス標準に準拠することでユーザーエクスペリエンスを向上させます。 1。リストスタイルのイメージを備えたアイコンを追加します、、およびが含まれます。これらを使用して、アプリケーションのアイコンをメインメニュー項目に追加するか、検索に使用されるテキストボックスに少し拡大ガラスアイコンを貼り付けることができます。 Mac OS Xでキーボードをアクセスできる要素を作成しますx
• それが完了したら、矢印キーを使用してタブを切り替えることができます。これは、WindowsとLinuxと同じです。

  3。リファレンスコンテキストメニューの元のマウスターゲットイベント

  XULコンテキストメニューのアイテムをクリックすると、イベントターゲットリファレンスはをクリックしました。ただし、の元のターゲット要素への参照が必要な場合はどうなりますか。つまり、最初にメニューを生成するために右クリックした要素は、Firefoxがこのまさに参照を含むプロパティを提供するため、非常に簡単です。 PopupNodeと呼ばれ、ドキュメントのプロパティです。それを使用する最も簡単な方法は、メニュー項目のコマンドイベントを通過することです。要素がFlexを継承するのを防ぐ
  

  ほとんどのXUL要素にFlex属性を追加すると、利用可能なスペースを埋めるために拡張します。しかし、フレックスは継承されているため、その子供は

  textbox[type="search"] <br>{ <br>  list-style-image:url(chrome://myextension/content/images/magglass.png); <br>}

  も拡大しますが、場合によっては非常に望ましくありません。たとえば、子要素がの場合、正確な寸法を持つ必要があります。しかし、継承されたフレックスを明示的に否定する方法はありません。
  しかし、それは1つのレベルの深さのみを継承しているので、

  は、宣言されたフレックス属性なしで中間ラッパー要素を追加することでそれを無効にすることができます：

  5。 Chrome Loadイベントからのダイアログを生成します

  window.opendialogを使用して、Chromeロードイベントのモーダルおよびセンタースクリーン機能を使用してダイアログを生成する場合、ダイアログは画面の上部隅に隠されたMac OS Xでほとんど見えません。これは、ダイアログがウィンドウのサイズが確立される前に配置されるため、CenterScreenプロパティが予想どおりに機能しないためです。アラート関数でも同じ問題が発生します。これは、迅速で汚れたデバッグツールとして使用している場合に問題になる可能性があります。 elements are natively inaccessible to the keyboard in Firefox for Mac OS X. To make them accessible you need to manually insert them into the tab order, by adding a tabindex attribute with the value 0. This value is effectively "auto", and places the element at its source-order position in the overall tab order:
  6。 WindowsとLinuxのカスタムダイアログアイコンを追加
  ダイアログにカスタムアイコンを追加するには、最初に拡張機能のChromeディレクトリ内にアイコンという名前のフォルダーを作成します。次に、アイコンフォルダー内で、デフォルトと呼ばれる別のフォルダーを作成します。デフォルトのフォルダー内で、要素のIDと同じ名前のアイコンを保存します。たとえば、ダイアログにID MyExtension-Preferencesがある場合、Myextension-Preferences.ico（Windows用、またはLinux用.png）を作成します。 MDCドキュメントでは、LinuxにXPM画像を使用することが示されていますが、アルファチャネルの透明性に対するサポートはありません。 PNGファイルはサポートを提供し、同様に機能します。

  <tab label="About" tabindex="0"></tab>

  Windows XPのカスタムダイアログアイコン

  これは、そのダイアログにアイコンなしで表示されるため、Mac OS Xとは異なります。

  7。最近開かれたウィンドウへの参照を取得

  FirefoxのWindow Mediatorインターフェイスを使用して、最近開いたブラウザウィンドウへの参照を取得できます。これは、外部ダイアログからWebリンクを開き、window.openerよりも信頼性が高い場合に便利かもしれません。

  ウィンドウリファレンスを返す短くて甘い小さな方法、またはブラウザのウィンドウが開かれていない場合はnull：

  textbox[type="search"] <br>{ <br>  list-style-image:url(chrome://myextension/content/images/magglass.png); <br>}

  前のヒントからフォローするには、現在開いているすべてのブラウザウィンドウを反復し、URLを抽出し、階層配列にパッケージ化できます（最初にウィンドウでグループ化され、次にタブでグループ化されます）。最終行列の各メンバーは、タブのURLとブールフラグ（選択）を含む配列であり、そのウィンドウで現在選択されているタブであるかどうかを示します。インターフェイスにウィンドウフォーカスの変更に応答します
  ほとんどのMACウィンドウは、ウィンドウがフォーカスを失ったときに外観を変更します。この効果を独自のインターフェイスコントロールに実装するには、ウィンドウが焦点を獲得して紛失するかを知る必要があります。
  最初の本能は、ウィンドウフォーカスとぼやけイベントを使用することですが、それは時には独立して行動することがあるため、この目的で信頼できないことがわかります。たとえば、アプリケーションフォーカスが埋め込みのドキュメントに移動すると、ウィンドウがまだフォーカスされたものであるにもかかわらず、メインウィンドウブラーイベントが発生します。これは、要素自体がアプリケーションに焦点を合わせなくなったためです。この動作は論理的ですが、予想外かもしれません。良いニュースは、Firefoxのメインインターフェイスウィンドウには、ウィンドウが真に焦点を合わせると、Trueから（空の文字列）に変化するアクティブな属性があることです。この属性をDOM Mutation Eventリスナーで視聴し、必要なもののトリガーとして使用できます。たとえば、アラートなどのモーダルダイアログをトリガーするために使用した場合、ダイアログを生み出すアクションにより、ウィンドウが焦点を失います。それを却下すると、焦点が取り戻され、それがダイアログを再トリガーします！

  <tab> elements are natively inaccessible to the keyboard in Firefox for Mac OS X. To make them accessible you need to manually insert them into the tab order, by adding a tabindex attribute with the value 0. This value is effectively "auto", and places the element at its source-order position in the overall tab order:</tab>

  あるいは、達成したい効果を純粋なCSSで達成できる場合、否定的な擬似クラスとともに属性セレクターを使用できます。たとえば、通常の状態と障害状態の間にアイコンを切り替えるには：

  textbox[type="search"] <br>{ <br>  list-style-image:url(chrome://myextension/content/images/magglass.png); <br>}

  10。プラットフォーム固有のスタイルシートを実装

  Firefoxは複数のプラットフォームで利用できます。これらのそれぞれには、外観やインターフェイスコンポーネントの配置に関する独自の規則があります。これの良い例は、アラートダイアログのOKボタンとキャンセルボタンです。WindowsとLinuxでは、OKボタンはキャンセルボタンの左側にありますが、Mac OSでは逆です。窓のボタンの外観と最小化のボタンは、各プラットフォームで異なるため、別のインスタンスです。

  これらのバリエーションを考えると、プラットフォーム固有のスタイルシートを独自の拡張機能のインターフェイスに適用できることが多いことがよくあります。これにより、ボタン用の代替アイコン、カスタムインターフェイスコントロール用のさまざまなフォントなどのバリエーションを実装できます。

  幸いなことに、Firefoxは特別なフォルダー階層とマニフェストファイルのセットを使用して、これを行うための簡単なメカニズムを提供します。次の図のトップレベルのプラットフォームフォルダーは、Chromeフォルダーと同じレベルにある拡張機能のルートフォルダー内に移動する必要があります。すべてのフォルダー名とファイル名は、スタイルシート自体の名前を除き、ここに示すとおり（ケースに敏感です）とまったく同じでなければなりません。これはあなたが好きなものになる可能性がありますが、もちろん各プラットフォームのコピーで同じでなければなりません。

  プラットフォーム固有のスタイルシートのフォルダー階層

  「ダーウィン」は「ダーウィン」がMac OS Xで、「winnt」です。これらのChrome.manifestファイルのそれぞれには、この同一のタブが区別された行を含める必要があります（「myextension」を拡張機能の名前に置き換えます）：

  <tab> elements are natively inaccessible to the keyboard in Firefox for Mac OS X. To make them accessible you need to manually insert them into the tab order, by adding a tabindex attribute with the value 0. This value is effectively "auto", and places the element at its source-order position in the overall tab order:</tab>

  インターフェイスにスタイルシートを追加するには、次のURLパターンを使用してXML-Stylesheet処理命令を追加するだけです。

  <tab label="About" tabindex="0"></tab>

  あなたがする必要があるのはスキンディレクトリを参照する方法をご覧ください。プラットフォームフォルダーのそれぞれにバージョンを作成してから、同じURLパターンを使用してXULドキュメントに追加するだけで、必要なだけ多くの異なるスタイルシートを使用して原則を拡張できます。
  11。ブラウザの履歴にURLを追加します
  ここに追加のボーナスヒントがあります。 MDCのXULリファレンスでは、History Auto Completeを使用してテキストボックスを作成する方法を説明します。残念ながら、歴史に新しいURLを追加する方法を説明できないため、Firefoxのソースコードをトロールすることで、これを難しい方法で解決する必要がありました。ここに紹介する方法は、URLを追加し、ファビコンを取得して保存し、掘り出し物に自動コンプリートを含む！

  履歴オートコンプリートメニューを備えたテキストボックス、プログラム的に追加されたエントリを表示するテキストボックス

  >注

  ：ブラウザの履歴に追加すると、Firefox 3以降は機能しますが、Faviconを取得することはバージョンでのみ動作します。属性。次のコードの例では、関数名Addurltohistoryは必要なものであり、Flex属性はオプションですが、他のすべては正確に示されている必要があります。 CompleSeSelectedIndex属性は、自動コンプリートメニューからアイテムを選択すると、その値がテキストボックスに自動的に書き込まれるようにします。これにより、Enterキーをすぐに押してコマンド関数を発射できます。 NewLines属性は、不要な白人の値（先頭スペースなど）の値を手動で解析することを避けることができるように単純です。これは、要素にoncommandイベントがないためです。通常使用されるイベントは、OnInput（表示可能なテキストが入力されたときに発射されます）およびOnchange（値が変更されたときに発射）です。値は自動コンプリートの提案に応じて頻繁に変化するため、そのほとんどは不要な値になります。エントーキーが押されるまでコマンドアクションを延期します。テキストをテキストボックスに入力または貼り付けることができ、入力されたものに従ってフィルタリングされた履歴とともにドロップダウンメニューが表示されます。次に、そのメニューから選択すると、選択がテキストボックスに書き込まれます。

  textbox[type="search"] <br>{ <br>  list-style-image:url(chrome://myextension/content/images/magglass.png); <br>}

  矢印ボタンを追加して、enabableHistory = "true"を追加してドロップダウンメニューを表示することもできます。実際には、この後に別のタスクを実行します（指定されたURLをにロードするなど）が、履歴に追加する方法に焦点を当てます。最初にコードを表示してから、少しずつ通過します。

  まず、少し検証します。URLに1つがない場合はプロトコルを追加します（ユーザーが「www」と入力できるように）、[変更された] URLをテキストボックスに書き戻します。次に、CGIパラメーター以外のスペースまたは複数のドットが含まれている場合、不正な構文にアラートを投げて関数を終了します。これは、Firefoxが窒息するのを防ぐために本当に必要なすべての検証です。たとえば、エラーをコンソールにスローするか、カスタムメソッドを実装してユーザーにエラーが発生したことを警告することにより、エラーをより優雅に処理することをお勧めします。

  次に、履歴にURLを実際に追加するビジネスを行います。歴史サービスはプレーンURI文字列を受け入れないため、IURIと呼ばれるものを作成する必要があります。これは、ホストを含​​むさまざまなメタデータを含むURIオブジェクトであり、後で便利になります。 IOサービスを使用してIURIオブジェクトを作成し、それをGlobal History Serviceに渡してブラウザの履歴に追加します。第一に、何らかの理由でFaviconが予想されるURLにない場合、そして次にFirefox 3.5以降でのみ動作するため、エラーがスローされないようにします。そのため、最初にFaviconサービスを初期化し、次にFaviconのアドレスのIURIオブジェクトを作成します（元のIURIのホスト名を使用）。次に、Favicon IuriオブジェクトをFaviconサービスに渡し、Faviconをロードおよび保存します。

  そして、私たちはそれを持っています！次に同じアドレスをテキストボックスに入力すると、そのファビコンとともに自動コンプリートメニューに表示されます。すぐにテキストボックスに表示したい場合は、SetIntervalループを実行して、まだ存在するかどうかを継続的に確認する必要があります。このようなコードでそれを行うことができます：

  このコードは少し難しいです：500ミリ秒ごと（setintervalの2番目のパラメーター）、ページのファビコンのファビコンサービスに尋ねます。 Moz-Anno：Favicon：Protocol（Faviconがダウンロードされた場合）またはChrome：Protocol（デフォルトの画像を返す場合）でフォーマットされたURIを返します。 20回（合計10秒）を試した場合、またはページのファビコンを正常にダウンロードした場合 - Moz-Anno：Favicon：URIで、テキストボックスのリストスタイルイメージURLとして設定します。まだ行っていない場合は、CodeBurner Extensionで無料で提供される独自のFirefox拡張機能を作成してください。
  Firefox拡張機能の構築に関する別の記事と、Codeburnerファミリーへの新しい追加に関するすべての記事に注意を払ってください。

  textbox[type="search"] <br>{ <br>  list-style-image:url(chrome://myextension/content/images/magglass.png); <br>}

  Firefox拡張に関するよくある質問（FAQ）
  Firefox拡張機能をインストールするにはどうすればよいですか？
  Firefox拡張機能のインストールは簡単なプロセスです。まず、Firefoxブラウザを開き、メニューボタンをクリックします。これは、右上隅の3つの水平線で表されます。ドロップダウンメニューから、「アドオン」を選択します。これにより、アドオンマネージャータブが開きます。検索バーで、インストールする拡張機能の名前を入力し、Enterを押します。インストールする拡張機能の横にある[Firefoxに追加]ボタンをクリックします。拡張機能を追加する許可を求めるポップアップが表示されます。 [追加]をクリックすると、拡張子がインストールされます。

  なぜ私のFirefox拡張機能が機能していないのですか？

  ​​

  Firefox拡張機能が機能していない理由がいくつかある可能性があります。これは、Firefoxの時代遅れのバージョン、他の拡張機能との競合、または拡張自体の問題が原因である可能性があります。 Firefoxを最新バージョンに更新し、他の拡張機能を無効にして競合を確認するか、問題のある拡張機能を再インストールしてみてください。問題が続いている場合は、サポートのために拡張機能開発者に連絡してください。

  Firefox拡張機能を管理するにはどうすればよいですか？

  Firefox拡張機能を管理し、Firefoxメニューを開き、「アドオン」を選択します。これにより、アドオンマネージャータブが開きます。ここでは、拡張機能を有効または無効にしたり、拡張機能を削除したり、各拡張子のオプションにアクセスしたりできます。

  Firefox拡張機能はブラウザを遅くすることができますか？各拡張機能はある程度のシステムリソースを使用しており、多すぎるとブラウザが遅くなる可能性があります。ブラウザがゆっくりと実行されていることに気付いた場合は、いくつかの拡張機能を無効にして改善するかどうかを確認してください。ただし、他のソフトウェアと同様に、悪意のある俳優によって潜在的に悪用される可能性があります。安全性を確保するには、信頼できるソースから拡張機能のみをインストールし、拡張機能を更新し、拡張機能があるアクセス許可を定期的に確認します。ただし、Firefoxメニューを開き、「アドオン」を選択し、ギアアイコンをクリックして「更新のチェック」を選択することで、アップデートを手動で確認することもできます。モバイルで拡張機能が利用可能かどうかを確認するには、FirefoxアドオンのWebサイトの拡張機能のページにアクセスし、「Androidで利用可能」ラベルを探してください。 Mozillaは、開発者WebサイトでFirefox拡張機能を開発する方法に関する包括的なガイドを提供しています。いくつかの一般的な拡張機能には、広告ブロッキング用のUblock Origin、パスワード管理用のラストパス、ダークモード用のダークリーダーが含まれます。ただし、2つのブラウザが拡張機能を処理する方法の違いにより、すべてのChrome拡張機能がFirefoxで動作するわけではありません。

以上がFirefox Extension Schoolで彼らが決してあなたに言うことのない10のことの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。