ロゴ
Multi-Touch MacBook登場の噂Livedoor Readerでdel.icio.usに一発クリップするGreasemonkey
Jul 04

Greasemonkeyの開発をまとめてみる

Development Add comments

Greasemonkey Icon

最近、暇があるとGreasemonkey用のスクリプトを書いてる。
Greasemonkeyは、好きなページに好きなスクリプトを走らせることができるFirefoxの拡張機能で、これ使うとかってにサイトの外観変えたりと色々カスタマイズできる。

詳しくはGreasemonkey - Mozilla Firefox まとめサイト

以下、自分のために開発する際のまとめを色々書いておく。

書き方

このPDFを読めば、大体分かる

簡単にまとめると、
ファイル名を”xxxx.user.js”にして、
ファイルの中身に

PLAIN TEXT
CODE:
  1. // ==UserScript==
  2. // @name Hello World
  3. // @namespace <a href="http://diveintogreasemonkey.org/download/">http://diveintogreasemonkey.org/download/</a>
  4. // @description example script to alert "Hello world!" on every page
  5. // @include *
  6. // @exclude <a href="http://diveintogreasemonkey.org/*">http://diveintogreasemonkey.org/*</a>
  7. // @exclude <a href="http://www.diveintogreasemonkey.org/*">http://www.diveintogreasemonkey.org/*</a>
  8. // ==/UserScript==

と書けば、Greasemonkeyスクリプトとして読み込まれる

でも、やはりそれだけじゃだめ。
無名関数でラップかけて、コードを書かないと名前の競合がおこってしまう。

PLAIN TEXT
CODE:
  1. (function() {
  2.     //ここ
  3. })();

な感じで書くと、名前空間？ができて名前の競合は防げる。

開発環境

テキストエディタがあればOK
ちなみに自分の環境は、
秀丸+javascript強調+アウトライン表示。

特にアウトライン表示
はおすすめ！
軽いのがいい！

Macだったら、TextMateかな。

編集方法

ピクチャ 7-1
「ツ−ル」 > 「Greasemonkey」 > 「ユーザスクリプトの管理」
から任意のスクリプトを選択して編集

なぜか自分の環境だと、「ユーザスクリプトの管理」から編集できないため
「Documents and Settings」 > 「ユーザ名」 > 「Application Data」 > 「Mozilla」 > 「Firefox」 > 「Profiles」 > 「xxxxxx(任意).default」 > 「gm_script」

の中のスクリプトを直にいじくってる。

Macだと、
/Library/Application Support/Firefox/Profile/xxxx.default/gm_scripts
にある。

デバッグ

Greasemonkeyに用意されている関数GM logかFirebugで。
それ以外に、
Jesseのブックマークレット
http://www.squarefree.com/bookmarklets/webdevel.html
を利用すれば十分。

Greasemonkey独自のファンクションとか

Writing User Scripts

以下、自分なりのまとめ（間違っても気にしない）

・GM_log
javascriptコンソールにメッセージを出力する。

・GM_setValue(name, value)
文字列、整数、真偽値を永続化して、持たせることができる。
オブジェクトも、eval使えば格納できる。
[javascript]Greasemonkeyで永続的に外部スクリプトを利用する

これでキャッシュしたり、ライブラリ格納しておけたりとすごいことができる。

・GM_getValue(name, default)
GM_setValueでセットした値を取得できる。
無いときは、undefinedが返ってくる。

・GM_xmlhttpRequest
XmlHttpRequestができる。
javascriptのとは違って、ドメインをまたいだリクエストもできる。

・GM_registerMenuCommand
「ユーザスクリプトコマンド」に独自のメニューを追加できる。
キャッシュ消したり、設定複雑だったらここで変えられる様にすると便利かも。

・GM_openInTab(url)
新しいタブでページを開く。

・GM_addStyle(css)
cssのスタイル追加できる。

・unsafeWindow
今見ているページのwindowオブジェクト。
これ使えば、Greasemonkeyから見ているページのjavascriptを呼び出せる。
Livedoor Readerだと、上のちっこい人になんか言わせることできたりする。

外部ライブラリの使用方法

Greasemonkey: prototype.jsでクロスドメインAjaxを可能にする
[JavaScript][Greasemonkey]GM_setValue/GM_getValueでオブジェクトの永続化
など、多々方法あるようだけども

[javascript]Greasemonkeyで永続的に外部スクリプトを利用する

初回のみ XmlHttpRequest で外部スクリプトデータを取得して、
GM_setValue でスクリプトデータを永続化しておき、
二回目以降は、それを GM_getValue して eval するようにした。

の、GM_setValue/GM_getValueでやる方法が一番便利だと思う

最初に書いとくと便利な関数

・Firebugにログをはかせる

PLAIN TEXT
CODE:
  1. function log(message) {
  2.     if (unsafeWindow &amp;&amp; unsafeWindow.console) {
  3.         unsafeWindow.console.log(message)
  4.     }
  5. }

・XPathで最初にヒットしたエレメントを取得

PLAIN TEXT
CODE:
  1. function getFirstElementByXPath(xpath, node) {
  2.     var node = node || document
  3.     var result = document.evaluate(xpath, node, null,
  4.     XPathResult.FIRST_ORDERED_NODE_TYPE, null)
  5.     return result.singleNodeValue ? result.singleNodeValue : null
  6. }

・XPathでヒットしたエレメントを取得

PLAIN TEXT
CODE:
  1. function getElementsByXPath(xpath, node) {
  2.     var node = node || document
  3.     var nodesSnapshot = document.evaluate(xpath, node, null,
  4.     XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null)
  5.     var data = []
  6.     for (var i = 0; i &lt;nodesSnapshot.snapshotLength; i++) {
  7.     data.push(nodesSnapshot.snapshotItem(i))
  8.     }
  9.     return (data.length&gt;= 1) ? data : null
  10. }

こんなとこかな。
気になったらまた追加していこう。
そのうち書いたへぼスクリプトも公開してみようかな。

このエントリをはてなブックマークに登録 このエントリを del.icio.us に登録 このエントリをlivedoorクリップに登録 add to Yahoo Bookmark

この記事のカテゴリー：Development
トラックバックURL：
この記事のURL：

8 Responses to “Greasemonkeyの開発をまとめてみる”

  1. いつみゆう Says:
    July 5th, 2007 at 10:59 pm

    about:configのgreasemonkey.editorに編集に使うエディタのパスが記載されていますので、ここを修正すればユーザスクリプトの管理から編集できるようになります。

  2. koko1000ban Says:
    July 5th, 2007 at 11:15 pm

    コメントありがとうございます。
    今、greasemonkey.editorを設定したら無事編集できるようになりました。
    感謝です！
    about:configに「greasemonkey」の設定があったとは知りませんでした…

  3. typer Says:
    July 6th, 2007 at 7:05 am

    大概のちょっとした設定はabout:configにあります。GM_setValue/GM_getValueが値を保存しているのもここです。

  4. nanto_vi Says:
    July 6th, 2007 at 9:42 am

    > 無名関数でラップかけて、コードを書かないと名前の競合がおこってしまう。

    これはどのような状況を想定しているのでしょうか? 各スクリプトごとに独立の環境が作られるので、普通に変数を使う分には衝突は起きないはずですが。

  5. WebOS Goodies Says:
    July 7th, 2007 at 11:56 pm

    今週の話題 : Google Gears のロードマップが公開など…

    近所のセブンイレブンで「[[南インド式黒胡椒のチキンカリー>http://www.sej.co.jp/shohin/dancyu0707.html]]」なるものを見つけたので早速購入してみました。パッケージはこんなの。なかなかゴー…

  6. noein » Blog Archive » Greasemonkey関連のリンク集（随時更新） Says:
    July 20th, 2008 at 1:54 pm

    [...] http://d.hatena.ne.jp/gotin/20070911/1189457171 Greasemonkeyの開発をまとめてみる http://www.ohmiyapatriots.com/blog/2007/07/04/greasemonkey%E3%81%AE%E9%96%8B%E7%99%BA%E3%82%92%E3%8... Greasemonkeyスクリプティング TIPS & SAMPLES – TOP [...]

  7. Hinemosu Says:
    October 25th, 2008 at 10:20 am

    LDRのShift+Ctrlを無効にするグリモン…

    Firefox上でCtrl+Shift+αな操作をすると、livedoor Readerの次のフィードに移ることがあって不思議に思ってたのね。
    色んなGreasemonkey Scriptを入れてるから、どれかが悪さしてるの…

  8. 橋本幸樹のいまさら日記 Says:
    January 29th, 2009 at 9:16 pm

    [Javascript]Greasemonkeyを使って海外Amazonサイトに日本円換算の価格を表示してみた…

    円高の影響で海外のamazonで買ったほうが安いとかいうことになっているそうなので海外サイトでも日本円に換算した価格が表示されれば便利だろうと思って作ってみました。 ページから…

Leave a Reply