Opera のような手軽さで Chromium 用 UserJS 開発したい
まえおき
長らく愛用してきた PC 用 Opera. 次期、新バージョンは Chromium ブラウザと成って登場する。
Opera の UserJS 実行の仕組みは単純で、「ユーザー JavaScript フォルダ」として指定したフォルダに *.js ファイルを置いておけば、全ての Web サイト上で読み込まれ、実行してくれる。
UserJS の編集もシンプルだ。置いておいた *.js をエディタで開き、編集後、上書き保存し、ページを再読み込み(F5)することで、変更が反映される。
Chromium 版 Opera では、このやり方が通用しない可能性がある。
Chromium で UserJS を使うには、逐一インストール的な作業をする必要がある。すなわち、「ツール＞拡張機能」のページを開き、そこへ *.user.js ファイルをドラッグアンドドロップするのだ。 (これは、UserJS を 拡張機能に変換するための作業である。実は、Chromium にあるのは UserJS の実行機能ではなく、拡張機能実行機能と、UserJS の拡張機能化機能なのだ。)
とにかく、UserJS ファイルを編集する度にこの動作を行わなくてはならないので、効率が良くない。
Opera の UserJS のように、簡単に編集＆反映する方法はないものか。
そこで、調べてみると、すごくいいサイトがあった。
「Chrome Extensions API リファレンス」 http://dev.screw-axis.com/doc/chrome_extensions/
拡張機能には、「コンテント・スクリプトとして使う」という使い方があり、そうした拡張機能は、UserJS と使い勝手が似ている。
はじめてみよう | Chrome Extensions API リファレンス http://dev.screw-axis.com/doc/chrome_extensions/tutorials/getting_started/
サイトのチュートリアルを参考に、manifest.json を作成する。
コンテント・スクリプト | Chrome Extensions API リファレンス http://dev.screw-axis.com/doc/chrome_extensions/guide/content_script/
やりかた
manifest.json として以下の内容のファイルを保存する。
{ "name": "UserJS", "version": "1.0", "manifest_version": 2, "content_scripts": [ { "matches": ["https://api.twitter.com/robots.txt?-=/*"], "js": ["tw-minus.user.js"] }, { "matches": ["http://www.pixiv.net/*"], "js": ["pixivid.js"] } ] }
この manifest.json と同じフォルダに自分の UserJS を置いておく。 この内容の場合だと、 tw-minus.user.js と pixivid.js だ。
そして、「ツール＞拡張機能＞パッケージされていない拡張機能を読み込む...」を実行し、上記のフォルダを指定すると、うまくいけば、拡張機能としてインストールされるはずだ。
うまくいかなくても、「○○が足りない」のように具体的なエラーメッセージが出るので、対処はしやすいだろう。現に、"manifest_version" という項目を持たせなければならないことは、エラーメッセージから教わった。
こうして作成した拡張機能のインストールが成功したところで、開発に入る。
流れとしては、
- UserJS を編集する
- 「ツール＞拡張機能」のページを再読み込みする
- UserJS 適用先のサイトを再読み込みする
を繰り返す。
