素材の味

丁寧に暮らしています

GitHubのコメントでSuggestionを出す

この記事はOpenSaaS Studio Advent Calendar 2019、15日目の記事です。

TL;DR

  • 楽をするためにGitHubのコメント欄でsuggestionを出せるExtensionを作成した
  • 思ったよりも自由に作れる
  • 審査はちょっとめんどくさい(特にFirefox)

f:id:cakecatz:20191215235823g:plain

はじめに

僕が所属するDeveloper Productivityチームではいろいろな作業を自動化していて、その多くが GitHubのコメントを通して実行できるようになっています。

毎日使う機会があるので毎回手打ちするのはめんどくさいし、タイポする可能性もあるなあと思い、これらのコマンドをsuggestしてくれるBrowser Extensionを作ろうと思いました。

開発を始める

まず参考になりそうな refined-github のコードを軽く読んで開発を始めました。

package.jsondependenciesextension 開発のためのライブラリなどが多くあって、どんなものかを見るだけでも面白いと思います。

f:id:cakecatz:20191215235246p:plain

使ったツール・ライブラリは慣れと開発のしやすさを重視して、

  • TypeScript
  • React
  • Redux
  • styled-components
  • webpack

などです。 特に問題なく使用できます。

開発をしやすくする方法

書いたコードを反映させるために毎回Chromeのsettingから読み込み直させる必要があります。

これは大分手間ですが、crx-hotreload を使うことで変更した際に自動で読み込み直すことができます。

Firefox では web-ext を使って同じことが実現できます。

審査

ChromeFirefoxもどちらもストアに上げる前に審査が必要です。(unlistedやprivateの場合でも) Chromeの方は審査はすぐに終わり(数時間)特に何も言われずに公開できました。 Firefoxは今日(12/15)の夕方くらいにアップロードしてみましたが、終わりそうな気配はないです。(審査のQueueが見えるけど数時間経っても10 of 10) またFirefoxの場合はソースコードの提出が必要で、別途zipにして提出をしました。

終わり

Extensionを開発するのは初めてでしたが、思っていたよりもすんなりできました。 ある程度開発してから気づきましたが、 Extension Workshop というサイトがあり、Extension開発についての便利情報が沢山書いてあるので、最初はここを読むべきだと思います。 ExtensionのGenerator も存在していて、大分開発しやすい環境になっているなと思いました。

この投稿を見て興味を持った方はぜひ開発してみてください。