mozilla
Your Search Results

    Making it into a static overlay

    これで Tinderbox のステータスを表示する拡張機能が完成しました、次はこれを他のユーザに配布できるようにします、やり方としては、Mozilla のコードに統合する方法 (この場合、我々の作ったものは拡張機能ではなく、デフォルトの Mozilla 配布物の一部になります) と、拡張機能を Mozilla から実行可能なインストーラパッケージにして、ユーザが拡張機能を使用中の Mozilla に追加するようにする方法があります。

    ほとんどの拡張機能はインストーラパッケージとして配布されているので、我々も同様にしましょう。なお、拡張機能を Mozilla のコードベースに統合する方法はこのチュートリアルの範疇ではありませんが、mozilla.org の hacking documentation に多くの情報があります、

    Mozilla のインストーラーパッケージは XPIs (「ジッピーズ」と発音します) と呼ばれます。これはクロスプラットフォームインストーラ (cross-platform installer) の略です。パッケージはただの ZIP アーカイブで、インストールされるファイルに加えて、インストールを実行する JavaScript スクリプトと、chrome レジストリ用の、インストールされるコンポーネントについて記述した RDF ファイルを含んでいます。

    この拡張機能は、インストールすると Mozilla 中のファイルを変更します、動的 XUL オーバーレイ を使って拡張機能の内容をインストール済みの Mozilla に書き加えるようにするためには、拡張機能をパッケージ化する前に、変更部分を別のファイルに分ける必要があります、

    XUL オーバーレイは XUL ファイルの一種で、他の XUL ファイルに挿入されるべき要素を含んでいます、挿入は、挿入先の XUL ファイルがアプリケーションの UI へレンダリングされる時に行なわれます、静的オーバーレイでは、XUL ファイルの先頭に記述された XUL ファイルへの参照によって挿入が行なわれます (スタイルシートや JavaScript スクリプトと同様です)、動的オーバーレイでは、chrome レジストリに XUL ファイルへの参照を追加することで挿入が行なわれます。

    コードの可読性、保守性、拡張性を高めるために、オーバーレイを使って巨大な XUL ファイルをいくつかのファイルへ分割することができます、(ひとつのファイルがアプリケーションウィンドウ全体の構造を記述し、それ以外がウィンドウの特定の部分を実装する) 、動的オーバーレイは、変更したい XUL ファイル自体に変更を加えずに、その XUL ファイルを変更したのと同じ効果を得るためにも使われます、この機能は拡張機能をインストールするときに使われます、では、まず始めにファイルを静的オーバーレイにし、次にそれを動的オーバーレイにしていきましょう。

    ファイルを静的オーバーレイにするには、navigator.xul と同じディレクトリに tinderstatusOverlay.xul というファイルを作り、navigator.xul に追加していたコードをすべてそこに移します。

    <?xml version="1.0"?>
    
    <?xml-stylesheet
          href="chrome://navigator/content/tinderstatus.css"
          type="text/css"?> 
    
    <overlay id="tinderstatusOverlay" 
          xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    
    <script type="application/x-javascript"
            src="chrome://navigator/content/tinderstatus.js" />
    
    <statusbar id="status-bar">
      <statusbarpanel class="statusbarpanel-iconic"
              id="tinderbox-status"
              insertbefore="offline-status"
              status="none"/>
    </statusbar> 
    
    </overlay>
    

    tinderstatusOverlay.xul は、そのファイルが XML であることを示す XML 宣言から始まります (すべての XUL ファイルは XML 宣言を含む必要があります) 、次の行は、以前 navigator.xul に追加したスタイルシートへの参照です、次は XUL の overlay 要素です。この要素は XUL オーバーレイファイルのトップレベル要素で、これによりファイルがオーバーレイであることが分かります、その中身は前に navigator.xul に追加したスクリプトへの参照です、その次には statusbarpanel 要素を含む statusbar 要素があります。

    このオーバーレイの中の statusbar 要素の id 属性の値は、navigator.xulstatusbar 要素の id 属性と同じです。navigator.xul がレンダリングされてブラウザの UI になるとき、オーバーレイファイルの statusbar 要素のすべての属性と子要素が UI の DOM に追加されます、これにより、オーバーレイファイルで定義した要素が、あたかも navigator.xul で定義されているかのような UI が表示されます、

    statusbarpanel 要素に属性 insertbefore を追加したのに注意してください。この属性では、statusbar の中の、我々の要素の次に現れる statusbarpanel 要素を指定しています。これにより、我々の要素が statusbar の中でどの要素の前にくるかという、他の statusbarpanel に対する相対的な位置を指定することができます。

    insertbefore を省略すると、要素は statusbar の 最後に追加され、通常は resizer grippy 【訳注: ウィンドウ右下の、ウィンドウのサイズを変えるのに使う部分】 の前に来るでしょう、また、insertbefore の代わりに insertafter を使えば、他の要素の後ろに要素を配置することもできます。

    我々が navigator.xul に対して行った変更の代わりにこのオーバーレイを使うには、今までの変更を元に戻し、オーバーレイへの参照を navigator.xul の先頭に追加します、

    ...
    
    <?xml-stylesheet href="chrome://navigator/skin/" type="text/css"?> 
    <?xml-stylesheet
          href="chrome://navigator/content/tinderstatus.css"
          type="text/css"?>
    
    <?xul-overlay href="chrome://navigator/content/navigatorOverlay.xul"?>
    <?xul-overlay href="chrome://navigator/content/navExtraOverlay.xul"?>
    <?xul-overlay href="chrome://navigator/content/linkToolbarOverlay.xul"?>
    <?xul-overlay href="chrome://navigator/content/tinderstatusOverlay.xul"?>
    <?xul-overlay href="chrome://communicator/content/conten...extOverlay.xul"?>
    <?xul-overlay href="chrome://communicator/content/sideba...barOverlay.xul"?>
    <?xul-overlay href="chrome://communicator/content/communicatorOverlay.xul"?>
    <?xul-overlay href="chrome://communicator/content/bookma...rksOverlay.xul"?>
    
    ...
    
    <!-- Navigator -->
    <script type="application/x-javascript"
            src="chrome://navigator/content/browser.js"/>
    <script type="application/x-javascript"
            src="chrome://navigator/content/navigator.js"/>
    <script type="application/x-javascript"
            src="chrome://navigator/content/navigatorDD.js"/>
    <script type="application/x-javascript"
            src="chrome://navigator/content/sessionHistoryUI.js"/>
    
    <script type="application/x-javascript"
            src="chrome://navigator/content/tinderstatus.js"/>
    
    <!-- hook for stringbundle overlays -->
    
    ...
    
    <statusbar id="status-bar" class="chromeclass-status"
              ondragdrop="nsDragAndDrop.drop(event, contentAreaDNDObserver);">
      <statusbarpanel id="component-bar"/>
      <statusbarpanel id="statusbar-display" label="&statusText.label;" flex="1"/>
      <statusbarpanel class="statusbarpanel-progress">
        <progressmeter class="progressmeter-statusbar"
                id="statusbar-icon" mode="normal" value="0"/>
      </statusbarpanel>
      <statusbarpanel class="statusbarpanel-iconic"
                id="tinderbox-status" status="none"/>
      <statusbarpanel class="statusbarpanel-iconic" id="offline-status"/>
      <statusbarpanel class="statusbarpanel-iconic" id="security-button"
                      onclick="BrowserPageInfo(null, 'securityTab')"/>
    </statusbar> 
    ...
    

    ドキュメントのタグと貢献者

    タグ: 
    Contributors to this page: Kohei
    最終更新者: Kohei,