読者です 読者をやめる 読者になる 読者になる

積極的にメモっていく姿勢

題名詐欺。更新頻度の低さが売り。

ChromeでUserScriptを動かしてみた

chrome javascript userscript

いま、しょりけんは後ろでDTM研をやっているところです。

syoriken's sounds on SoundCloud - Hear the world’s sounds

ここに作品が上がっています。 (宣伝
僕はたまに嗜ませて頂く程度で、皆さんには及ばないので作品は上がっていません!

さて、本題に入ります。

最近はやりたい事は増えるのに、どうしても時間が作れなくて齷齪しておりました。
そこで、ちょっとやってみればいいのでは?ということで、書いてみました。

UserScriptです。しかし、あんまりやる気が無かったので、ネタです。

此方の開発環境は以下の通りです。

OS : Mac OS X Mountain Lion 64bit
Editor : vim
Browser : Google Chrome 27.x

1. UserScriptとは

ブラウザに JavaScript のプログラムを入れ込んでおいて、任意の Web サイトに対して、何かをしてやろうという試みのようです。

Webサイトを作るときに、最初にJavaScriptのソースを読み込んで作用させると思います。
ただし、自分のサイトでなければ、埋め込む事は難しいでしょう。

そこで、ブラウザに拡張機能としてインストールを行い、サイトに対して作用をしようということです。

2. ソースを書いてみる

JavaScriptについての色々は省いて、UserScript を動作させる事だけに注力します。

まず、以下のソースを GoToGoogle.user.js として保存します。
このとき、ファイル名は拡張子が .user.js で保存すれば何だっていいです。

// ==UserScript==
// @name        お前はGoogleがお似合いじゃ
// @namespace   
// @description お前はGoogleがお似合いじゃ
// @includes    *
// @excludes    
// ==/UserScript==

var anchor = document.getElementsByTagName('a');

for(var i in anchor){
  anchor[i].href = 'http://www.yahoo.co.jp/';
  anchor[i].addEventListener('click', clickAnchor);
}

function clickAnchor(e){
  alert('お前にはGoogleがお似合いじゃ');
  document.location = 'http://www.yahoo.co.jp/';
}

動作は、

1. ページ内に存在するリンク先を全て yahoo.co.jp に変更。
2. Anchor の ClickEvent が発火後、alert を吐いて、リンク先へ移動する。

何故か

anchor[i].href = 'http://www.yahoo.co.jp/';

document.location = 'http://www.yahoo.co.jp/';

の両方が無いと、ちゃんと飛んでくれませんでした。
うーん、よくわからなかったので、JavaScriptの勉強しないとダメですね。

ちなみに、上の方に書いてあるものを省略したところで、拡張子が .user.js であればインストールが出来るようです。
ただ、名前とかどのサイトでとかが省略されるので、あまりよくないような気がします。

3. Chromeにインストールする

Google Chrome を起動して、右上当たりにある

をクリックし、ツール > 拡張機能 を開きます。
// 昔はスパナのマークだった気がするけど、いまはこの謎のマークですね。

出てきた画面に保存した .user.js をドロップします。

すると、こんな画面になるので、なんやかんや訊かれますが、追加をクリックします。
無事にインストールが済みましたでしょうか。

簡単ですね。

4. エラーを含んだソースを入れようとした場合

拡張機能にインストールしようとした時点では失敗しません。

Webサイトを作る際と同様に、動作の段階でエラーを吐き出します。
エラーは Web Inspector を見る事で、確かめる事が出来ます。
// Mac だと Command + option + i で表示できるアレです。

こうなると、この拡張機能はゴミです。消しましょう。
拡張機能の名前の横にあるゴミ箱マークを押してやれば、消えてくれるはずです。

5. 動作確認

新しいタブから適当な文字列を検索して、 a タグっぽいところをクリックしましょう。
きっと、ダイアログが出てくるので OK を押してやると、Yahoo! に飛びます。

どうでもいい。

6. 今後の展開

アプリのアイコンとかを設定できる様になれば、それっぽいですよね。

あと、JavaScript には import とか #include とかそういう類いの実装が無いようです。
そこで、document.write なんかを駆使して html にぶち込むことで読み込む、という手が有るようです。

jQuery に依存しすぎたソースファイルを生み出し続けている身としては、jQuery だけは欲しいです。
しかし、いい機会でもあるので、JavaScript だけで戦える様に勉強をするのも良いかもしれません。