スプラトゥーン2のChrome拡張を作ってみた。

4900 ワード
TypeScript chrome-extension gulp Node.js Splatoon Node.js テキストリンク

ikaWidget2とか使ってると、欲しいギアが来ても見逃すのでなんとかしようと思った。
そこで一番立ち上げっぱなしにしてることが多いChrome拡張（Chrome Extension）でギアの確認＋通知を作ってみた。
ついでにTypeScript触ったことないし使ってみた！

Chrome拡張ってどう作るの？

この辺を参考に色々見てみた。

とりあえずわかったこと。

  1. manifestファイル＋HTML＋CSS＋JSで作れる。→Web開発者なら多分作れる！
  2. 機能によって3種類のパターンがある。
    1. Browser actions
    2. Page actions
    3. Override Pages

なんか作れそうな気がする！
今回はギアの表示をしたいのでBrowser actionsで作る。

世の中便利なものがある

1から作ってると結構しんどい…
探してるとgenerator-chrome-extension-kickstartなるものがあった。そしてそこからフォークされたgenerator-chrome-extension-kickstart-typescriptを発見。
TypeScriptを使ったことがなかったのでgenerator-chrome-extension-kickstart-typescriptを使うことに決定。

generator-chrome-extension-kickstart-typescript

インストールと実行

$ mkdir chrome_extension
$ cd chrome_extension
$ npm install -g yo generator-chrome-extension-kickstart-typescript
$ yo chrome-extension-kickstart-typescript

対話型で拡張の機能を指定していく。

おっさんが表示されたらOK。

この時点でこんなフォルダ構成になっている。

/app
|--_locales
|  |--en
|     |--messages.json
|
|--fonts
|  |--.gitkeep
|
|--images
|  |--icon-128.png
|  |--icon-16.png
|  |--icon-19.png
|  |--icon-38.png
|
|--manifest.json
|
|--pages
|  |--options.html
|  |--popup.html
|
|--scripts
|  |--background.ts
|  |--options.ts
|  |--popup.ts
|
|--styles
   |--options.scss
   |--popup.scss

ビルドするとdist/に出力される。

$ gulp
#または
$ gulp --watch

chromeの拡張機能管理ページから読み込むと拡張機能におっさんのアイコンが追加される。

実装してく

あとはひたすらHTMLとCSSでレイアウト、JS(TypeScript)で処理を作っていく。

  • Option Pagesで通信、通知をする場合、manifestファイルに許可が必要。
"permissions": [
  "notifications",
  "https://<URL>"
]
  • Typescript単体だと使いにくい
    • Notificationがinterfaceしか無い？
    • GoogleAnalyticsのga()が使えない？
    • 小規模だと型がうざい

このあたりはTypeScriptが使いこなせてないだけな気がする。Angularとか使えたらもう少し楽そう。

Google拡張のPublish

  • 初回登録料で500円かかる。ある程度の品質を担保するためだから仕方ない。
  • ストア用の画像を用意する必要がある。指定のサイズじゃないとエラーになる。ここはできれば改善して欲しい…
  • 一度公開すると、バージョンが同じ場合はエラーになる。

こんな感じでSplaWidget2を公開。（1は存在しない）

感想

Web系の知識だけで作れるので非常にお手軽。今後色々作っていきたい。
フレームワーク組み込めたらUIをもっとよくできるかな？
PublishするときにGAの設定できるけど数値がどこのPVなのか分からん。