ブラウザ拡張の開発をTypeScriptで爆速で始めるやつ作ったので紹介
先日、動画に突然「熱盛」を表示するとかいうクソChrome拡張を作って公開しました。
動画を再生しているとたまに熱盛と表示されてしまうchrome extension作ったから見てhttps://t.co/KGdPKFvjuP pic.twitter.com/ocyqJWSBBe
— まざっち (@mazamachi) 2017年8月29日
めっちゃバズって結構インストールしていただけました。うれしい。 やっぱりこういうのは鮮度が大事で、思いついてから公開までを数日にとどめたいところですね。
などなど、設定事項が多くてかなり面倒です。
この記事は、 Yeoman を使ってコマンド一発でChrome拡張の雛形を作成する方法の紹介と、そのためのツールをTypeScriptに対応したバージョンを作ったよというお話です。 さっさと試したいって人は chrome-extension-kickstart-typescript を見てください。
Yeoman + Chrome extension kickstart
アプリケーションを作成するために設定が色々必要だという問題は、他の多くのフロントエンドアプリでも共通しています。
この問題を解決するために、Yeoman というプロジェクトがあります。 Yeoman が提唱する “Yeoman workflow” では npm + build system (Gulp/Grunt) + Scaffolding Tool (yo) という3つの要素を用いることで、アプリの雛形をコマンド一発で作成することができます。
$ rails new
みたいなものですね。
yo
では npm 上に公開されている generator を利用でき、その中にはChrome拡張のためのものもいくつかあります。
特にポピュラーなものは、公式の chrome-extension とchrome-extension-kickstartです(名前がまぎらわしい)。
ただし、後者の方が更新も頻繁であり機能も豊富なので、そちらを使うのが良いかと思います。
Chrome extension kickstart + TypeScript
Chrome extension kickstart では、ES2015をJavascriptに変換してくれるのですが、TypeScriptには対応していません。
ただ、chrome extension は結構 TypeScript との相性が良いので、ぜひとも TypeScript を使いたいところです。
(参考: TypeScript での Chrome 拡張機能開発 Tips - Qiita)
今までは、Chrome extension kickstart で雛形を作成し、「generator-chrome-extension-kickstartをtypescriptで使えるようにする - Qiita」を参考にしながらTypeScript用に設定を変更するというステップを踏んでいました。 しかし、そもそもTypeScriptに対応した雛形を作れるべきですよね。
そこで chrome-extension-kickstart をforkして chrome-extension-kickstart-typescriptというものを作成しました。
2017/09/02現在、npmで公開しているのでインストールして使うことができます
(ES2015の雛形との両立ができるようなら本家の方にPRを送るつもりなので、いつか元の方にマージしてもらえてるかもしれません)。
以下で簡単に使い方を紹介するのでぜひ使ってみてください。
使い方
ほぼREADMEに書いてありますが一応書いておきます。
$ npm install -g yo generator-chrome-extension-kickstart-typescript
mkdir my-new-chrome-extension && cd $_
yo chrome-extension-kickstart-typescript (--skip-install)
--skip-install
をつけると自動でnpm install
が走らないので、yarnとか使いたい人は付けると良いかと思います。
3の yo
コマンドを実行すると、いくつか質問が出てくるのでそれに答えればChrome拡張の基本設定は完了です。
設定事項は順に以下のとおりです(公式ドキュメントへのリンクを張ってあります)。
- Chrome拡張の名前
- Chrome拡張の説明
- 使う UI Action (Browser Action or Page Action or 特になし)
- Chromeのデフォルトページを書き換えるか? Override Pages
- その他の機能を追加するか?
- manifest.json に追加する permissions
自分がどのような拡張機能を作りたいのかによって設定も変わってくるので、各設定事項については公式ドキュメントを読むとよいかと思います。 日本語の情報としては、Chrome拡張の開発方法まとめ その1:概念編 - Qiita がとても分かりやすいです。
以上の設定を追えると、雛形が作成されます。 READMEも作成されているので、あとはREADMEを読めば分かるかと思います。 ES2015版の chrome-extension-kickstart とほとんど同じなので、node.jsのモジュールを使ってChrome拡張機能を作る - Qiita が分かりやすいです。
「たまに熱盛が出てしまうextension」はコードをmazamachi/atsumori_chrome_extension - Github で公開しているので、よろしければ参考にしてください。
所感
- TypeScript 使わないと JS を読み書きできない体になってしまった。
- 初めて npm に公開したけど
$ npm publish
としたら一瞬で公開されたのでややびびった。 - このあいだ誕生日だったので何か買っていただけるとうれしい → ほしいものリスト