grease monkeyで特定の場所の前にHTMLを追加したいとき

greasemonkey入門メモとFirebugで作るGreasemonkeyスクリプト〜入門と実践(From Kanasan.JS)を参考に、このサイトのタイトルの前に、HTMLを付け足してみたいと思います。

１．まず、Firefox右下のサルのアイコンを右クリック、New User Scriptを選択。

２．欄に適当に記入。

このようなウインドウが開くはずです。

３．全体を無名関数の中に置く。
他のスクリプトとの競合を防ぐらしいです。

(function() {

 // write code here..

})();

４．対象のXPATHをFirebugで調べる。
XPATHとは何か、ということについてはとりあえずおいておきます。改良したり、付け足したい場所を特定するものらしいです。

まず、grease monkeyで改良したいページに移動して、右下の虫のマークを左クリック。

このようなページがひらくはずです。

その中のカーソルのアイコンを選択。

改良したい部分をクリック

下のウインドウの選択された部分を右クリック→Copy XPATHを選択。

これでXPATHがコピーできました。このブログのタイトルのXPATHは「/html/body/h1/a」のようです。

５．追加するHTMLを記述する。

var addHtml = <>

	<p name="add">

		テスト

	</p>

</>;

６．書いたHTMLを追加する。

var addElem       = document.createElement('div');

addElem.innerHTML = addHtml;

addElem           = addElem.firstChild;

//HTMLの要素を取得

var resBtn = document.evaluate('/html/body/h1/a',　document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null );

var btnElem = resBtn.snapshotItem(0);

//HTMLを追加

btnElem.parentNode.insertBefore(addElem, btnElem);

これで一応完成です。全体のスクリプトはこちら。

// ==UserScript==

// @name           test

// @namespace      http://d.hatena.ne.jp/grease_monkey_novice/

// @description    test

// @include        http://d.hatena.ne.jp/grease_monkey_novice/

// ==/UserScript==
(function() {

	var addHtml = <>

		<p name="add">

			テスト

		</p>

	</>;

	var addElem       = document.createElement('div');

	addElem.innerHTML = addHtml;

	addElem           = addElem.firstChild;

	//HTMLの要素を取得

	var resBtn = document.evaluate('/html/body/h1/a',　document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null );

	var btnElem = resBtn.snapshotItem(0);

	//HTMLを追加

	btnElem.parentNode.insertBefore(addElem, btnElem);
})();

これを保存して、ページを再度読み込むと、このようになっているはずです。

テストの文字が加わってますね！