Firefox の拡張 その 2

Firefox の拡張 の続き。

以前の記事では何とかして CSS を切り替える WebDeveloper のメソッドを呼び出すことを考えた。しかし、今になって、直接 WebDeveloper を書き換えてしまえば良いと思うようになった。

WebDeveloper は日本語版も公開されているが、ここではオリジナルの英語版（Web Developer）を使う。

web-developer.xpi の拡張子を .xpi から .zip に変えて展開すると、chrome\webdeveloper.jar が見つかる。これも xpi と同様に拡張子を .zip に変えて展開する。WebDeveloper のツールバーは chrome\webdeveloper\content\webdeveloper\webdeveloper.xul にある。

webdeveloper.xul を眺めていると、

<menuitem id="webdeveloper-display-print-css-toolbar" accesskey="&webdeveloper.print.key;" label="&webdeveloper.print.label;" type="checkbox" oncommand="webdeveloper_displayPrintCSS(this)"/>

なんてコードが見つかる。これがツールバーのボタンと JavaScript で書かれたコードを結びつけている箇所である。

ということは、ツールバーにボタンを追加するなら、このコードを場所を変えて複製すればよい。ということで、次のように修正した。

<toolbarbutton id="webdeveloper-display-print-css-toolbar-ext" label="&webdeveloper.print.label;" tooltiptext="&webdeveloper.print.label;" type="checkbox" oncommand="webdeveloper_displayPrintCSS(this)"/>

を

<toolbarbutton id="webdeveloper-button" class="chromeclass-toolbar-additional toolbarbutton-1" label="&webdeveloper.name;" tooltiptext="&webdeveloper.name;" oncommand="webdeveloper_toggleToolbar()"/>

の次の行にコピーした。ここで、id は重複しないように変更している。 また、ボタンにしたかったので menuitem を toolbarbutton に変更した。また、

<toolbox id="navigator-toolbox"><toolbar id="webdeveloper-toolbar" accesskey="&webdeveloper.key;" class="chromeclass-toolbar" collapsed="false" context="toolbar-context-menu" customizable="true" grippytooltiptext="&webdeveloper.toolbar.name;" hidden="false" iconsize="small" inherits="collapsed,hidden" mode="full" persist="collapsed,hidden" toolbarname="&webdeveloper.toolbar.name;" defaultset="webdeveloper-display-print-css-toolbar-ext,webdeveloper-disable-toolbar,webdeveloper-cookies-toolbar,webdeveloper-css-toolbar,webdeveloper-forms-toolbar,webdeveloper-images-toolbar,webdeveloper-information-toolbar,webdeveloper-miscellaneous-toolbar,webdeveloper-outline-toolbar,webdeveloper-resize-toolbar,webdeveloper-tools-toolbar,webdeveloper-view-source-toolbar,webdeveloper-options-toolbar,spring,webdeveloper-render-mode-statusbar,webdeveloper-css-statusbar,webdeveloper-javascript-statusbar"/>

にも webdeveloper-display-print-css-toolbar-ext を追加している。

このように修正したところ、WebDeveloper のツールバー上に Print ボタンが表示されるようになった。しかし、なぜかアイコンが表示されない。

Firefox の拡張 その 3 に続く。

タグ：Firefox