ChatWork Mute Room を Chrome Web Store に公開した

2017/09/19 追記: ChatWork の公式機能としてサポートされたため、拡張を削除しました。

ChatWork の不要なルームをミュートする Chrome 拡張を Chrome Web Store に公開しました。

Slack にはチャンネル毎に未読/既読状態を無視するミュート機能がありますが、それと似たようなものです。 3 年前に野良の拡張として作成し配布していました。

経緯

ChatWork は未読数をブラウザのタイトルに表示するのですが、「ミュートしたルームを考慮した未読数をタイトルバーに表示する」という個人的にも欲しかった Pull Request が送られてきました。

このパッチのおかげで、これまではルーム一覧部分の未読数だけの表示を消していたのですが、未読数がブラウザのタイトルにも反映されるようになりました。

驚きだったのは、このパッチを書いてくれたのがベトナムの方だったことです。 ChatWork は日本以外でも使われていることは知っていましたが、この Chrome 拡張の需要があったのには驚きました。

おかげで、久々に Chrome 拡張に対するモチベーションが上昇しました。

この Pull Request をマージして、Chrome にインストールする CRX ファイルを作成したのですが、リリースしたとしてアップデートを手動でインストールしないといけないのはやはり面倒だなと感じました。

また、3 年前に作ったものなので Grunt や古いバージョンの jQuery を使用していたので、この機会に整理して Chrome Web Store に公開することにしました。

ES2015 で書くのにもだいぶ慣れてきたので CoffeeScript から移行しました。大した機能は使っていないのですが、let や const、アロー関数が使えるだけでも楽になります。

ES2015 をサクッと学ぶには Babel のドキュメントが分かりやすいと思います。

ES2015 をトランスパイルしたり、後述の Vue.js 2.0 を使用するために Webpack + Babel を導入しました。特に複雑なことはやっていません。

jQuery で書いたほうが分かりやすい処理はあるものの、Chrome 以外のブラウザを考慮する必要はないので、 jQuery の依存から脱却する練習も兼ねて Vanilla JS (プレーンな JavaScript) で書き直してみました。

以下のサイトで jQuery で書いていた処理を Vanilla JS で書くにはどうすれば良いのかを調べることができます。

ネタページですが、Vanilla JS が他のライブラリに比べて最速だということが分かります。

jQuery の依存を解消したものの、ポップアップ部分のイベントハンドリングや読み込み/保存処理を Vanilla JS で書くのは面倒… と思っていたところに Vue.js 2.0 がリリースされたので使ってみました。

Vue.js を配置して DOM をバインドしてサクッと使えれば良いや、と思っていたのですが、Chrome 拡張の場合 Content Security Policy (CSP) の関係でテンプレートのコンパイラが動きませんでした。

そのため Webpack + vue-loader を使用して CSP を回避しテンプレートをコンパイルできる環境を作りました。 .vue ファイルを作成することに最初は抵抗があったのですが、考えてみれば React も同じだったのですぐに慣れました。

Webpack + Vue.js 2.0 のコードは公式で開発されているプロジェクトが参考になりました。

README や CHANGELOG を日本語で書いたのですが、英語で書いておいた方が日本国外の方もコントリビュートしやすいかなと思い、英語で書き直してみました。他のプロダクトも英語で書くように心がけたいです。

Chrome Web Store デビューを果たすことができました。

コードに手を入れずに拡張が動いていたことに驚きました。良いか悪いかは置いておいて、2013 年のリニューアルから UI があまり変わっていない気がします。

今回は JS の構造をほとんど変えておらず、 Content Script の設計が微妙なままなので手を入れていきたいです。

何より日本国外で拡張を使ってもらえて嬉しかったです。