Tampermonkeyの使い方

Tampermonkeyの使い方

GreasemonkeyはFirefoxの拡張機能のひとつで、ブラウザ側に設定されたJavaScriptコード（ユーザースクリプト）でWebページに変更を加えることができる。この機能は、シンメトリック製品・GeneCodeに幾分か似ている面がある。ユーザースクリプト開発とサーバーサイドJavaScript開発は類似の発想なのである。どちらも、ブラウザがHTML文書を表示する前に文書のオリジナルDOMツリーを操作する手段となる。

Tampermonkeyは、Greasemonkeyとほぼ互換のChrome拡張機能である。以下で、実際の説明はChrome上のTampermonkeyに関して行う。

目次

GreasemonkeyとTampermonkey

Greasemonkey（Wikipedia記事）は、登場した当時（2005年）随分と評判となったFirefox拡張機能である。ブラウザ側で、JavaScriptを用いてWebページに変更を加えることができるものだ。その後、セキュリティ上の問題などが指摘され、一般的によく使われたわけではない。しかし、問題点は修正され、現在でも開発が継続されていてMozilla.orgで公開されている。

Tampermonkeyは、Chrome（Blinkレンダリングエンジン）におけるGreasemonkeyの対応物である。GoogleのChromeウェブストアから入手可能だ。

Firefox、Chrome、それぞれのブラウザにGreasemonkeyまたはTampermonkeyをインストールすれば、ユーザースクリプトの機能を利用できる。前もって指定したURLのページ群に対して、表示される前に色々な操作をユーザースクリプトにより実行できるのだ。

以下では、Chrome + Tampermonkey の例を説明するが、これに特別な理由はなくて、私がChromeを使うことが多いという理由による。

Tampermonkeyのインストールと設定

Tampermonkeyのインストールは、上記のChromeウェブストア・ページにアクセスして、追加のボタンを押すだけだ。今回は、ユーザースクリプトからローカルファイルにアクセスしたい。そのためには次の設定が必要だ。

ウィンドウ左上の「Google Chromeの設定」ボタンから、[ツール]→[拡張機能]を選ぶか、アドレスバーに chrome://extensions/ と入れる。開かれたページからTampermonkeyの項目を探し、「ファイルのURLへのアクセスを許可する」をONにする（チェックマークを付ける）。これにより、Tampermonkeyがローカルファイルにアクセスできるようになる。

ダッシュボード

なお、FirefoxのGreasemonkeyで同様の設定をするには、アドレスバーにabout:configと入れると（警告付きで）表示される設定ページを使う必要がある。extensions.greasemonkey.fileIsGreaseable という設定項目をtrueに変更する。

Tampermonkey自体のオプション（設定）はデフォルトのままでもいいだろう。これで、Tampermonkey（またはGreasemonkey）を使う準備ができた。

ユーザースクリプトを実行してみる

Chromeのアドレスバー右端にある拡張機能ボタンからTampermonkeyを選んで、さらにTampermonkeyメニューから「ダッシュボード」を選ぶ。表示されたダッシュボードページ（下のスクリーンショット）からすべての操作を行う。

ダッシュボード

Tampermonkeyで実行するユーザースクリプトは、Tampermonkey内蔵のテキストエディタを使って作成する。最初にエディタを起動すると新規スクリプトの作成となる。自動的に挿入されるJavaScriptコメントはメタデータブロックと呼ばれ、単なるコメントではなくてユーザースクリプトを構成する重要な部分である。このメタデータブロックを編集してもいいが、今回は以下のソースを上書きコピーしてしまおう。

// ==UserScript==
// @name       hello_1
// @namespace  https://www.symmetric.co.jp
// @version    0.1
// @description  alert hello
// @match      https://sw-dev-blog.symmetric.jp/*
// @copyright  2014+, I
// ==/UserScript==

alert('Hello, from Tampermonkey.')

エディタの「保存」ボタンを押すと、このユーザースクリプトがTampermonkey内部に保存される。

「インストール済み UserScript」画面にhello_1という行が追加されたなら、ユーザースクリプトの作成とインストールは成功だ。

ダッシュボード 2

メタデータブロックの@matchの行で、このブログのURLとワイルドカード（「*」）が指定されている。

// @match      https://sw-dev-blog.symmetric.jp/*

この指定により、https://sw-dev-blog.symmetric.jp/ で始まるURLのページを開くと「Hello, from Tampermonkey.」とアラートが表示される。

これはもちろん、Webページ自体が何か変わったわけではなくて、ブラウザ側のユーザースクリプトが起動されたからである。

メタデータブロックの仕様は、http://forum.tampermonkey.net/viewtopic.php?f=16&t=75 に記述されている。

ユーザースクリプトでDOM操作を行う

次は、DOM操作を含むユーザースクリプトを書いてみよう。

// ==UserScript==
// @name       hello_2
// @namespace  https://www.symmetric.co.jp
// @version    0.1
// @description  DOM hello
// @match      https://sw-dev-blog.symmetric.jp/*
// @copyright  2014+, I
// ==/UserScript==

var h1 = document.getElementsByTagName('h1')[0];
h1.innerHTML = 'Hello, from Tampermonkey.';

このJavaScriptソースを保存すると、hello_2という名のユーザースクリプトが登録される。Tampermonkeyダッシュボードの「インストール済み UserScript」画面において、hello_1を無効化して、hello_2だけが有効な状態にしよう。その状態でこのブログ記事にアクセスすると、シンメトリックのロゴが「Hello, from Tampermonkey.」という文字列に変わっているはずだ。

上記のJavaScriptコードによるDOM操作が実行されたわけだ。実行のタイミングは、body要素の最後に当該のスクリプトを挿入したのと同じと考えてよい。

jQueryを使いたい場合はどうするか

生のDOM操作は面倒だ。jQueryを使いたい。jQueryのような外部ライブラリを使用するには、メタデータブロック内で@requireを使う。ロードすべきJavaScriptファイルのURLを指定すればよい。

// ==UserScript==
// @name       hello_3
// @namespace  https://www.symmetric.co.jp
// @version    0.1
// @description  jQuery hello
// @match      https://sw-dev-blog.symmetric.jp/*
// @copyright  2014+, I
/* load jQuery */
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
// ==/UserScript==

$('h1').eq(0).html('Hello, from Tampermonkey.');

Tampermonkeyダッシュボードの「インストール済み UserScript」画面から、hello_3だけを有効化してこのブログ記事にアクセスする。結果は同じだが、今回はjQueryが使われたのだ。

ユーザースクリプトをローカルファイルに書く

さて、今回の話のミソは、ユーザースクリプトをローカルファイルに書いておくことが可能なことだ。次のようにして自前のJavaScriptファイルをロードできる。

// ==UserScript==
// @name       hello_4
// @namespace  https://www.symmetric.co.jp
// @version    0.1
// @description  local hello
// @match      https://sw-dev-blog.symmetric.jp/*
// @copyright  2014+, I
/* load jQuery */
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
/* load local file */
// @require file:///c:/Users/hiyama/Work/hello.js
// ==/UserScript==

上記の例では、$(‘h1’).eq(0).html(‘Hello, from Tampermonkey.’); というコードをローカルファイルhello.jsに移したので、ユーザースクリプトの本体は空っぽだ。

このようにすると、もはやTampermonkeyが管理しているユーザースクリプトに触る必要がなくなる。ユーザースクリプトから参照されているローカルファイルを直接編集すればよい。Tampermonkey付属のエディタを使わずとも、好みの開発ツールを使ってJavaScriptプログラムを書ける。テストや確認をするには、ブラウザからページをリロードするだけだ。

冒頭に書いたように、オリジナルページにDOM操作をして最終出力を生成することは、サーバーサイドのJavaScriptプログラミングに近い。Tampermonkey上で動作するユーザースクリプトを、サーバーサイドで実行して同じ結果を得ることができるケースもある。その逆もあるだろう。Tampermonkeyが、サーバーサイドJavaScriptプログラミングを支援してくれそうだ。

Page Top