LoginSignup
9

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-10-25

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

対話型で拡張の機能を指定していく。
スクリーンショット 2017-10-25 0.55.57.png

おっさんが表示されたらOK。
スクリーンショット 2017-10-25 0.56.50.png

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

/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の拡張機能管理ページから読み込むと拡張機能におっさんのアイコンが追加される。
スクリーンショット 2017-10-25 1.06.36.png

実装してく

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

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

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

Google拡張のPublish

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

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

スクリーンショット 2017-10-14 17.24.54.png

感想

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9