Merge controller for GitHub

何ができるの？

Pull Requestのタイトルに含まれる文字や、リポジトリ・ブランチ名でマージボタンを非活性にできます
タイトルにWIPを含む場合はマージさせない
タイトルにReleaseを含む場合にのみマージさせる
masterブランチのマージはstagingブランチからしか許可しない
のようなルールを自由に設定可能です。

作った経緯

開発用ブランチへPull Request作成後にすぐマージしているクセで、WIP Pull Requestも作成後に誤ってマージすることがあったので、これを防ぎたかった。
同様の機能を持つChrome拡張機能は既にあったが、現場がGitHub Enterpriseを使っておりGitHubドメインと違うのでそもそも対応してない。
公開ソースをゴニョゴニョして使うという手もあったけど、Chromeウェブストアに公開せずにデベロッパーモードとして使うことになり、Chrome起動時に毎回警告が出るので嫌
Chrome拡張機能がJavaScriptで作れるとのことで、ならば自分でも作れるのではと思って作ってみました。

ソース

こちらへ公開してます。
https://github.com/casmb200/merge-controller-for-github
（英語はGoogle翻訳頼りなんで、かなり怪しめ）

どうやって開発するの？

Content Scriptで最低限の構成ならば、 manifest.json とページ表示時に実行されるJavaScriptファイル1つだけでOKです。
manifest.json へはアプリ情報・権限設定・実行するスクリプトなどを定義します。JavaScriptファイルは普段ウェブページを作成する時に用意するものと同じように作るだけです。
今回作ったプログラムでは、オプション画面用のHTML/JS/CSS、アイコン画像、多言語対応用のlocaleファイルを加えてます。

監視方法

マージ可否判定について、画面ロード時の判定のみだと、 タイトル修正時 や Pull RequestのReOpen時 に判定できないので、 MutationObserver を使ったDOM監視をしています。

MutationObserver
https://developer.mozilla.org/ja/docs/Web/API/MutationObserver

var observer = new MutationObserver(function(mutations) {
               　　　　mutations.forEach(function(mutation) {
              　　 　　　　　　// マージ可否判定
              　　　　　　　　 control_merge();
              　　　　　　});
               })；

// 対象の子ノードを監視する設定
var config = { childList: true };

// 対象のDOM監視開始
observer.observe($('.js-discussion')[0], config);

configの部分を attributes: true にすると対象の属性を監視、 childList: true, subtree: true にすると対象の子ノード及び孫ノードを監視することができます。

今回作ったプログラムでは、タイムラインの箇所とマージボタンの箇所を監視・変更があればマージ可否判定するようにしています。

アプリの公開

デベロッパーダッシュボードより$5でデベロッパー登録、圧縮したファイルをアップロードすれば公開できます。
海外で使ってもらう為、説明文やスクリーンショットを言語ごとに設定することも可能です。
限定公開にしておけば、URLを教えた人にのみ公開することも可能です。

Chrome拡張機能開発のすすめ

前述の通り、Chrome拡張機能はJavaScriptで作ることができ、デベロッパーモードで使うだけならばかなり敷居は低いかと思います。
DOM操作もできますし、テスト用に使うツールなどのオレオレツールを作るには最適なんじゃないかと思いました。