JavaScript
GitHub
chrome-extension

GitHubでファイルパスの差分が見づらいのでChrome拡張を作った

なんの話か

GitHubでファイルパスに差分が出た場合、以下のような表示になります。

スクリーンショット 2018-08-02 22.33.36.png

  • sample/1/2/3/a/b/c/test.txt
  • sample/1/2/a/b/c/d/test.txt

縦に並べてみるとどこが変わったのか多少わかりやすくなりますが、個人的にデフォルトの表記で差分をみるのは辛いものがありました。
また、パスが長いと省略されて、初期表示で変更がわからない状態になります。

スクリーンショット 2018-08-02 21.23.38.png

gh-path-diff

リファクタリングでディレクトリだけ大量に移動するようなPRのレビューが辛いので、

  • パスの差分に色をつける
  • パスの差分表示を省略しない

だけを行うChrome拡張を作りました。

chromeウェブストア

https://chrome.google.com/webstore/detail/gh-path-diff/nfpmbenkfahmjoildkjhmfafjncgcgec

GitHub

https://github.com/inabajunmr/gh-path-diff

イメージ

インストールすると差分が以下のように表示されます。

スクリーンショット 2018-08-02 22.33.42.png

ちょっと苦労したところ

普通にGitHubを使っている時には以下のタブとか

スクリーンショット 2018-08-02 22.24.57.png

以下のタブ

スクリーンショット 2018-08-02 22.25.39.png

をクリックした時に、非同期での書き換えではないいわゆる画面遷移をしていると思っていました。
しかしそうではないようで、差分のページを表示した時に経路によってcontents_scriptが発火しない場合がありました。

そのため、以下のようにbackground.jsでchrome.tabs.onUpdatedにイベントを登録し、差分のページに対するアクセス時には常にtabにメッセージを送るようにしました。

background.js

const regex = /^https:\/\/github.com\/.*\/pull\/.*\/files.*/;
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
  if (regex.test(tab.url)) {
    kick();
  }
});

function kick() {
  chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, "gh-path-diff", function(response) {});
  });
}

contents.js

コンテンツスクリプト側ではbackground.jsからのデータを受け取りスクリプトをキックしています。

// GitHub has async compile dom so kick script by ajax http access via background
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  if ("gh-path-diff" === message) {
    gh_diff.main();
  }
  return;
});
  • contents.jsだけで
  • 非同期での特定のURLへのアクセスに対して
  • スクリプトを発火

みたいなことができるともうちょっと綺麗なんだけどな、と思いつつ、とりあえず今の所は上記の方法でうまく動いています。

この辺りの構造はこちらを参考にさせていただきました。
https://github.com/Yatser/prettypullrequests/blob/master/background.js

実はこんなことしなくてもGitHubの設定でパスのdiff表示できるよ、とかあったら教えてもらえますと幸いです。