クフでダローバルな日記

タフでもグローバルもない

ブラウザ拡張の開発をTypeScriptで爆速で始めるやつ作ったので紹介

先日、動画に突然「熱盛」を表示するとかいうクソChrome拡張を作って公開しました。

めっちゃバズって結構インストールしていただけました。うれしい。 やっぱりこういうのは鮮度が大事で、思いついてから公開までを数日にとどめたいところですね。

とはいえ、Chrome拡張機能をシュッと作るためには

  • Chrome拡張の作法に則った設定ファイルの作成 (manifest.jsonなど)
  • ES6/TypeScript や Less/Scss などのトランスパイル自動化
  • 開発版とリリース版の分離

などなど、設定事項が多くてかなり面倒です。

この記事は、 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-extensionchrome-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に書いてありますが一応書いておきます。

  1. $ npm install -g yo generator-chrome-extension-kickstart-typescript
  2. mkdir my-new-chrome-extension && cd $_
  3. yo chrome-extension-kickstart-typescript (--skip-install)
    --skip-install をつけると自動で npm install が走らないので、yarnとか使いたい人は付けると良いかと思います。

3の yo コマンドを実行すると、いくつか質問が出てくるのでそれに答えればChrome拡張の基本設定は完了です。

設定事項は順に以下のとおりです(公式ドキュメントへのリンクを張ってあります)。

  1. Chrome拡張の名前
  2. Chrome拡張の説明
  3. 使う UI Action (Browser Action or Page Action or 特になし)
  4. Chromeのデフォルトページを書き換えるか? Override Pages
  5. その他の機能を追加するか?
    1. No
    2. Options Page
    3. Devtools Page
    4. Content Scripts
    5. Omnibox
  6. 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 としたら一瞬で公開されたのでややびびった。
  • このあいだ誕生日だったので何か買っていただけるとうれしい → ほしいものリスト