概要

掲題のChrome拡張機能「GithubDiff」を作成したので紹介します。

目的

ChromeでGithubのコミット間差分表示ページに移動する際、アドレスバーのURLを編集する手間を簡単にする。

利用方法

想定

Pull requestにコードレビューと修正コミットがあり、修正前後のコミット間差分を表示したい。

手順

Chrome拡張機能メニューにある「GithubDiff」のアイコンをクリックする。
ポップアップで表示されたフォームに比較したいコミットのハッシュを入力してEnterを押すかCompareボタンをクリックする。

→コミット間差分表示ページが新しいタブで開く。

参考動画

書いたコードの紹介

ディレクトリ構成

GitHubDiff
│  manifest.json
│  popup.html
│  popup.js
│  
└─images
        128.png
        16.png
        48.png

manifest.json

{
  "name": "GithubDiff",
  "version": "1",
  "manifest_version": 3,
  "description": "Generate URL to compare commits or branches.",
  "icons": {
    "16" : "images/16.png",
    "48" : "images/48.png",
    "128" : "images/128.png"
  },
  "action": {
    "default_icon": "images/16.png",
    "default_title": "GithubDiff",
    "default_popup": "popup.html"
  },
  "permissions": [
    "tabs"
  ]
}

popup.html

<script src="popup.js"></script>
<p>Enter Hash or Branch Name.</p>
<form id="compare">
    <input type="text" id="left" placeholder="left">
    <input type="text" id="right" placeholder="right">
    <button type="submit" id="btn">Compare</button>
</form>

popup.js

// ここでイベントのバインディングをするのがChrome拡張機能でjavascript関数を実行するミソ
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("compare").addEventListener("submit", handler);
});

let url_text
let tabs = chrome.tabs.query({ active: true, lastFocusedWindow: true }, (tabs) => {
    url_text = tabs[0].url;
});

function handler(){
    let left = document.getElementById('left').value
    let right = document.getElementById('right').value
    let url = new URL(url_text);
    let url_elements = url_text.split('/');
    let compare_url = "https://" + url.hostname + "/" + url_elements[3] + "/" + url_elements[4] + "/compare/" + left + "..." + right
    window.open(compare_url);
}

つまづいた問題

Submitイベントで指定したjavascript関数が呼び出されない。
以下を参考にした。
https://stackoverflow.com/questions/13591983/onclick-or-inline-script-isnt-working-in-extension

【Chrome拡張機能】Githubのコミット間差分表示ページURLを生成して開く

概要

目次

目的

利用方法

想定

手順

参考動画

書いたコードの紹介

ディレクトリ構成

つまづいた問題