GitHub の直近のコミット履歴(Web画面)のカスタマイズ

vscodeの拡張機能(Git History)等でコミット履歴の一覧は簡単に見れますが、以下2点を満たした状態で簡単に履歴を見るには少し手間がかかると思いました
　・ authorの表示はいらない（一人で開発しているリポジトリの場合等）
　・ コミットメッセージをすべて表示したい

git logコマンドを使えばカスタマイズはできますが、特定の文字をハイライト表示もしたかったので、
GitHubのWebでの直近のコミット履歴（例：https://github.com/microsoft/vscode/commits/master ) の表示をカスタマイズするTampermonkeyスクリプトをさくっと作成してみました。

スクリプトは、
https://ssatoh17.work/scripts/tampermonkey/200513_GitHubの直近のコミット履歴一覧のカスタマイズ.tampermonkey.user.js
からインストールできます（事前にChrome拡張機能のTampermonkeyのインストールが別途必要です）

インストール後は、下のキャプチャ画像の右側のように表示されます。（左がスクリプト適用前、右が適用後の画面です）
これで作業内容の確認や振り返りがしやすくなると思います。

参考までに、ソースコードを載せておきます。
（ハイライトしたい単語を追加したり変更したりしたい場合は、配列「highlightYellow対象キーワード」や「highlightPink対象キーワードs」や「highlightBlue対象キーワードs」を変更してください）
※ プログラミング初心者の方には、既存サービスの画面をこれだけのコードで簡単に自分の好きなように変えられるんだよ」という点も合わせて伝えたいっす

GitHubの直近のコミット履歴画面のカスタマイズ.tampermonkey.user.js

// ==UserScript==
// @name         GitHubの直近のコミット履歴一覧を見やすくする
// @namespace    http://sho-sho.net/
// @version      0.2
// @description
// @author       S.S
// @match        https://github.com/*/*/commits/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
     const highlight対象セレクタs = ['p.commit-title > a', 'pre.text-small']; // コミットタイトル(1行目) と コミットメッセージの2行目以降 の要素

    // 指定文字列をハイライト表示
    // ※ キーワードの一部に同じ単語を含む場合は、長いものを先に指定すること （例えば、'処理を追加','追加' のように）
    const highlightYellow対象キーワードs = ['add', 'Add', '処理を追加', '追加'];
    highlightKeywords(highlight対象セレクタs, highlightYellow対象キーワードs, 'highlightYellow');

    const highlightPink対象キーワードs = ['fix','BugFix', 'bugfix', 'debug', 'エラーを修正', '修正'];
    highlightKeywords(highlight対象セレクタs, highlightPink対象キーワードs, 'highlightPink');

    const highlightBlue対象キーワードs = ['削除', 'リファクタリング'];
    highlightKeywords(highlight対象セレクタs, highlightBlue対象キーワードs, 'highlightBlue');

    styleの適用();

    setTimeout( () =>
    {
        // author行を右端に移動
        document.querySelectorAll('.commit-meta.commit-author-section.d-flex.flex-items-center.mt-1').forEach(elm=> {
            const cloneElem = elm.cloneNode(true);
            cloneElem.style.maxWidth = '185px';
            cloneElem.style.width         = '185px';
            cloneElem.style.paddingLeft =  '6px';
            elm.parentNode.parentNode.appendChild(cloneElem);
            elm.parentNode.removeChild(elm);
        });

        // コミットメッセージの2行目以降も表示（展開ボタンをclickする)
        setTimeout(()=>{
            document.querySelectorAll('[aria-expanded="false"]').forEach(elm=>elm.click());
        }, 500);
    }
    , 500);

    /** キーワードのハイライト処理 */
    function highlightKeywords ( highlight対象セレクタlist, highlight対象keywordList , className ){
        highlight対象セレクタlist.forEach( height対象セレクタ => {
            document.querySelectorAll(height対象セレクタ).forEach( elm => {
                highlight対象keywordList.forEach( keyword => {
                    elm.innerHTML = elm.innerHTML.split(keyword).join(`<span class="${className}">${keyword}</span>`);
                });
            });
        });
    }

    // styleの動的な適用
    function styleの適用(){
        let head = document.getElementsByTagName('head').item(0);
        let style = document.createElement('style');
        style.media = 'screen';
        style.type = 'text/css';
        let styleText = `
            /* CSS変数の定義 */
            :root {
                --hightlight-padding: 2px;
            }

            /* キーワードハイライト */
            .highlightYellow {
                background: yellow;
                padding: var(--hightlight-padding);
            }
            .highlightPink {
                background: #ec657d;
                padding: var(--hightlight-padding);
                color: white;
            }
            .highlightBlue {
                background: #5770e6;
                padding: var(--hightlight-padding);
                color: white;
            }

            /* 全体の表示幅を広く */
            .commits-listing {
                width: 1100px;
            }

            li.commit.Box-row {
                padding-top       : 3px!important;
                padding-bottom: 3px!important;
            }

            /* 2行目以降のコミットメッセージ */
            pre.text-small {
                margin-top: 0px;
            }
        `;
       let rule = document.createTextNode(styleText);
       style.appendChild(rule);
       head.appendChild(style);
    };

})();