暇人じゃない

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

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

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

経緯

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

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

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

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

手を入れたところ

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

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

CoffeeScript をやめて ES2015 で書き直した

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

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

Grunt をやめて Webpack を使った

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

jQuery を使うのをやめた

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

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

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

Vue.js 2.0 を使ってみた

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 や Releases を英語で書くようにした

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

まとめ

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

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

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

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