Greasemonkey開発になくてはならないほど便利なアドオンXPath Checker

Greasemonkey開発をサポートしてくれる便利なアドオンにXPath Checkerというものがあります。XPath Checkerは、ページ内の特定の要素に対するXPath式を表示してくれます。これを利用することで、複雑に組まれたHTMLの中から特定の要素を取り出したいときに、一発でその要素にアクセスすることができるようになります。

XPathとは

XML Path Language （XPath; XMLパス言語）は、マークアップ言語 XML に準拠した文書の特定の部分を指定する言語構文である。
XML Path Language - Wikipedia

XPath Checkerのインストール

以下のサイトからアドオンをダウンロードして、インストールします。

XPath Checker :: Add-ons for Firefox

XPath Checkerの使い方

XPath Checkerをインストールした状態で、任意のページで右クリックすると、View XPathという項目が表示されます。

試しにGoogleのページでロゴ画像を右クリックして、View XPathを選択すると、以下のようなXPathが取得できます。

id('logo')/img

これがロゴ画像へのXPathを示しています。このXPathをどう使うかというと、実際には以下のようにdocument.evaluateメソッドの第1パラメタにXPathを指定します。これでロゴ画像のimgタグが取得できます。

// ==UserScript==
// @name           hoge
// @namespace      http://d.hatena.ne.jp/replication/
// @include        http://www.google.co.jp/search*
// ==/UserScript==

var xpath = "id('logo')/img";
var logo = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null).snapshotItem(0);
prompt(logo, logo);

ロゴ画像を表示しないようにするには、以下のようにdisplayプロパティをnoneにしてやります。このようにXPath Checkerを使うと、HTMLの要素へのアクセスが簡単になり、楽しくGreasemonkeyを開発することができます。

// ==UserScript==
// @name           hoge
// @namespace      http://d.hatena.ne.jp/replication/
// @include        http://www.google.co.jp/search*
// ==/UserScript==

var xpath = "id('logo')/img";
var logo = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null).snapshotItem(0);
logo.style.cssText = "display:none;";