IT戦記

ただただがむしゃらにソフト開発をしていたい

Firebug に一行追記して右クリックで XPath をコピペ出来るようにする。

この XPath 使いたい><

って思うことよくありませんか?
サイト見てて、あ、このボタンにグリモンであんな機能やこんな機能付けたい><!って思うこととかありますよね!
そんなときに、いちいち要素の位置とか考えずに右クリックで XPath をコピペできたら嬉しいですよね><
ってことで

作ってみた

イメージはこんな感じです。

これをクリックすると、右クリックされた要素の XPathクリップボードにコピーされます。

この機能を Firebug に実装する手順

1. Firefox のプロファイルディレクトリに行く
環境 プロファイルディレクト
WinVista C:\Users\[ユーザ名]\AppData\Roaming\Mozilla\Firefox\Profiles\[ランダムな文字].default\
WinXP C:\Documents and Settings\[ユーザ名]\Application Data\Mozilla\Firefox\Profiles\[ランダムな文字].default\
Mac ~/Library/Application Support/Firefox/Profiles/[ランダムな文字].default/
Unix ~/.mozilla/firefox/[ランダムな文字].default/
2. 以下のファイルを zip で解凍
extensions/firebug@software.joehewitt.com/chrome/firebug.jar
3. 解凍したら firebug.jar に入っていた以下のファイルを開く
content/firebug/browserOverlay.xul
4. 以下のような個所を探す(66行目くらい
<popup id="contentAreaContextMenu">
  <menuseparator/>
  <menuitem id="menu_firebugInspect" label="&firebug.InspectElement;" oncommand="Firebug.showBar(true); FirebugChrome.select(document.popupNode);"/>
</popup>
5. 以下のように一行追加
<popup id="contentAreaContextMenu">
  <menuseparator/>
  <menuitem id="menu_firebugInspect" label="&firebug.InspectElement;" oncommand="Firebug.showBar(true); FirebugChrome.select(document.popupNode);"/>

  <!-- 以下の行を追加 -->
  <menuitem id="menu_copyXPath" label="Copy XPath" oncommand="FBL.copyToClipboard(FBL.getElementXPath(document.popupNode));"/>

</popup>
6. 元のように全体を zip でかためて元の場所に戻す
extensions/firebug@software.joehewitt.com/chrome/firebug.jar
7. はい完成

わーわー。ぱちぱち

まとめ

これマジで便利ー。
自分の Firebug は改造しまくってるので、時間があるときにでも Firebug ハッキング Tips を纏めたい。

追記

cho45 が書いた uc.js のやつ とか teramako さんが書いた uc.js のやつとかがもっと便利そうです><