5000164 is here
2015-03-26

Wikipedia のモバイル版を表示する Chrome 拡張機能を作った

Wikipedia はモバイル版の方が見やすいと思うのでモバイル版を表示する拡張機能を作った

ソースはこちら。
5000164/redirect-to-mobile-wikipedia

実装について

作り方 +++- Chrome 拡張機能の作り方がわからなかったので調べていたらドットインストールがあったのでここで勉強。
Google Chrome拡張機能入門 (全20回) - プログラミングならドットインストール
概要を把握。
思ってたよりさっくり作れそう。

TypeScript を使いたい +++- TypeScript を試したかった。
npm で TypeScript をインストールして PhpStorm で自動コンパイルするところまではすぐできた。
でも Chrome の API を認識させることができなくて困った。
ライブラリをダウンロードすればいけるよって書いてあったけど、それだけだと chrome なんてないよと怒られてしまう。
だから手動でインストールしてパスを通したら、今度は定義が複数あるって言われた。
最終的に、PhpStorm 側でダウンロードしたものを消して、tsd でダウンロードしたやつを PhpStorm 側に設定することで落ち着いた。
Transpiling TypeScript to JavaScript
TypeScript での Chrome 拡張機能開発 Tips - Qiita
TypeScript で Chrome Extension を開発する際の環境準備 - Qiita
javascript - How do I use WebStorm for Chrome Extension Development? - Stack Overflow

実装内容 ver. 1 +++- 特定のページに来た時に動作すればいいんだから content_scripts でいけるだろと思って実装した。
なんか preRequest イベントってのがあるからそれ使いたい。
でも動かなかった。
うまく動かせなかったので諦めて location.href でモバイル版にリダイレクトさせていた。
ださい。

実装内容 ver. 2 +++- 落ち着いて考えたら content_scripts はどうやらページが表示された後に動作する気配がある。
ってことは background にすれば preRequest 使えるんじゃないだろうかという仮説。
やってみたら使えた。
ということでアクセスする URL を確認して Wikipedia だったらそのままモバイル版を表示する拡張機能ができた。
What are extensions? - Google Chrome
Content Scripts - Google Chrome
Event Pages - Google Chrome
chrome.webRequest - Google Chrome

参考