Route 477

■ [javascript] Webページを開いたときに自動的にJavaScriptを実行してくれるdotjsを使ってみた

dotjsはWebページ (例えばgoogle.com) を開いたときに、自動的に$HOME以下に置いたJavaScriptファイル (例えば~/.js/google.com/js) を実行してくれるソフトウェアだ。 greasemonkey等に似ているが、ローカルにJSファイルを置くだけという手軽さが魅力だ。

公開されたのはけっこう前だが、最近使いたい場面があったのでインストールしてみた。

• http://defunkt.io/dotjs/
• https://github.com/defunkt/dotjs

現在のところ、インストーラの都合でMacのみ対応している(技術的にはwin/linuxでも動かせそうだが)。 ブラウザはChromeがメインだが、Firefox/Safari用の拡張もあるようだ。。

仕組みは以下。ブラウザ拡張と、localhostに立てたWebサーバの組み合わせでできている。

1. dotjsをインストールすると、localhost:3131にWEBrickでサーバが立つ
2. google.comを開く
3. dotjs同梱のChrome extensionが、以下のようにしてlocalhost:3131からgoogle.com.jsをダウンロードし、中身をJavaScriptとして実行する

$.ajax({
  url: 'http://localhost:3131/'+window.location.host.replace('www.','')+'.js',
  dataType: 'text',
  success: function(d){
    $(function(){ eval(d) })
  },
  error: function(){
    console.log('no dotjs server found at localhost:3131')
  }
})

ページを開くたびにlocalhost:3131にアクセスするわけだけど、別にプロキシする訳でもないし、体感速度に特に影響はない。 ソースを見ると、ファイルがない場合はHTTP 204 (No Content)を返しているようだ。

注意事項

Chrome extensionの仕様上、実行されるスクリプトは「Content Scripts」の制約を受ける。今回やりたかった件では、元のページのグローバル関数が呼び出せなくて困った。 この問題は、以下の抜け道で解決した。

サイト側のコンテキストでJavaScriptを実行したい場合，ブックマークレット（location.hrefにjavascriptスキームを代入するなどの方法で実現できます）として実行するか，script要素を作ってコードをテキストノードとして挿入する必要があります。

[続・先取り！ Google Chrome Extensions：第2回　User ScriptsとContent Scripts｜gihyo.jp … 技術評論社より引用]

具体的なコードはこんな感じ。