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

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

作り始める

Chrome 拡張機能の作り方がわからなかったので調べていたらドットインストールがあったのでここで勉強。

概要を把握。
思ってたよりさっくり作れそう。

TypeScript を使いたい

TypeScript を試したかった。
npm で TypeScript をインストールして PhpStorm で自動コンパイルするところまではすぐできた。
でも Chrome の API を認識させることができなくて困った。
ライブラリをダウンロードすればいけるよって書いてあったけど、それだけだと chrome なんてないよと怒られてしまう。
だから手動でインストールしてパスを通したら、今度は定義が複数あるって言われた。
最終的に、PhpStorm 側でダウンロードしたものを消して、tsd でダウンロードしたやつを PhpStorm 側に設定することで落ち着いた。

ver. 1

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

ver. 2

落ち着いて考えたら content_scripts はどうやらページが表示された後に動作する気配がある。
ってことは background にすれば preRequest 使えるんじゃないだろうかという仮説。
やってみたら使えた。
ということでアクセスする URL を確認して Wikipedia だったらそのままモバイル版を表示する拡張機能ができた。

参考

菅原 浩
Web プログラマー。好きな言葉は「安定的に不安定」。オーストラリアで英語を勉強した後に、現在デンマークで幸せについて考えている。
Next Post
シャワーの水圧を上げる
Previous Post
PhpStorm で ClipMenu が動作しない問題を修正する
Recent Posts
本「リモートチームでうまくいく」の感想
映画「Whiplash」の感想
Android の Chrome で通知の許可設定がタップできない
生きることが難しい
服を買うということ - 映画「The True Cost」の感想