JRA公式Webのリンクに小細工するだけのChrome拡張

自作Chrome拡張は意外と難しくないことがわかったので、変な小物を色々と作っています。画像保存とか特定の文字列をコピペするとか、公開したくないようなものが多いですが。

• 関連： PARTAKEのタイトルを書きなおすだけのChrome Extension | 賞味期限切れぷろぐらまー

今日は、JRA公式Webサイトのリンクの挙動を書き換えるものを作っていました。

目的

• 対象： JRA公式

このWebサイト、官公庁なので仕方ないですが、少し古いつくりです。

通常のハイパーリンクと、JavaScriptで処理されるリンクが混在しています。通常のリンクは良いのですが、JavaScriptで処理されるリンクは、右クリックから「新しいタブで開く」を使おうとしても、新しいタブでは正常に開けず、エラーが発生します。さらに残念なことに、見た目ではこの2種類のリンクは区別がつきません。

関連する情報を並べることができないので、タブ一枚で進んだり戻ったりしながら閲覧するのに疲れたので、少し小細工するための拡張を作ることにしました。

構造

JavaScriptで処理されるリンクは、doActionという関数にパラメータが渡されるようになっています。中を見るとただのアンカーではなく、ページ内の隠しフォームにパラメータを入れて、GETではなくPOSTでデータをSubmitすることにより、次のページを開いているようです。

実装

Google先生に尋ねたところ、form.targetに開く先を指定できることがわかりました。リンクの開き方がわかれば、あとは通常動作と「新しいタブで開く」動作で分岐すればよさそうです。とりあえず、Ctrlキーを押しているかどうかを判定し、押されている場合は新しいタブで開くことにしました。

	function(e) {
	// ...
	form.target = e.ctrlKey ? "_blank" : "";
	form.acrion = url;
	form.submit();
	}

view raw open_link.js hosted with ❤ by GitHub

ついでに、あまり使わないけれども、shift同時押しでウィンドウが開くように。適当にターゲット名をでっちあげて、毎回違うウィンドウが増える仕様です。

	if (e.shiftKey) {
	var target = Math.random().toString();
	form.target = target;
	window.open("about:blank", target).focus();
	}
	// ...
	form.submit();

view raw open_link_window.js hosted with ❤ by GitHub

• 完成品：JRALink_pack.zip

Chromeの「拡張機能のパッケージ化」では、ディレクトリの中身をまるごと全部、つまりアイコン作成用の作業ディレクトリ＆ファイルや、.gitまでまとめて固めてくれるみたいです。そのため、固めるように別ディレクトリを作り、必要なファイルだけそちらにコピーして固めるようにしています。

雑感

Chrome拡張、くだらないものが、それに見合った労力で作れるのが良いですね。ウェブストアに公開するような場合は、細かい作りこみが増えて大変なのかもしれませんが、自分用に作る分にはとても気楽です。
難点があるとすれば、JavaScriptは動的型付け言語のため、簡単なコードですらエラー箇所特定が大変なところです。Chromeのデバッグ環境はかなり強力ですが、それでもあまり大きなものは作りたくありません。