なんの話か

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

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

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

gh-path-diff

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

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

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

chromeウェブストア

GitHub

イメージ

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

ちょっと苦労したところ

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

以下のタブ

をクリックした時に、非同期での書き換えではないいわゆる画面遷移をしていると思っていました。
しかしそうではないようで、差分のページを表示した時に経路によって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表示できるよ、とかあったら教えてもらえますと幸いです。

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