自作のChrome拡張を使って業務効率化をしてみる【株式会社ライトコード】

ちょっとした作業を効率化するためにシェルスクリプトや簡単なコードを作って楽をすることはエンジニアではよくあることかと思います。
その一環としてChromeの拡張機能を作るのも意外と便利だよ、というお話です。

作りたいもの

今回作るのはGitHubのプルリクエストに対する拡張です。プルリクエストが大きくなると、全てのコメントに対応したかどうか分かり辛くなることがあるので指摘数を一目でわかるようなブラウザ拡張を作ってみようと思います。
具体的にはFiles changedタブを開いた際に画面の適当な部分にコメント数や解決数を表示してくれる、といったものを目指します。

必要な手順

manifest.jsonの作成

まずはChrome拡張として認識されるためのmanifest.jsonファイルを作成します。

{

    "manifest_version": 3,

    "name": "GitHubのコメント数を表示",

    "version": "1.0",

    "permissions": [],

    "content_scripts": [

      {

        "matches": ["https://github.com/*/pull/*"],

        "js": ["content.js"],

        "css": ["styles.css"]

      }

    ]

}

manifestを作るにあたって必須のキーはmanifest_version,name,versionの三種です。manifest_versionは現在3のみサポートされているので固定値として3、名前とバージョン情報は好きな値を設定します。ストアに公開する場合は説明文（description）やアイコン（icon）も必須ですが今回のような自分用であれば不要です。

content_scriptsはざっくり説明すると「特定のページを開いた時に特定のファイルを読み込む」キーです。今回の場合はmatchesに書かれたURLを開いた際指定したJavaScript（とCSS）を読み込む、といった動作をさせます。ワイルドカードを組み合わせてGitHubのプルリクエスト（/pull）をmatchesを設定しています。今回のはプルリクエストのFiles changedタブのみ用があるので/filesまで指定したいところですが、何かと不便だったのでURLの判定はJavaScriptで行うようにしています。

permissionは外部の通信やデータ参照を行う際に適宜必要なものを記述します。今回は不要です。

JavaScriptの作成

manifest.jsonと同じディレクトリにcontent.jsを作成します。読み込むJavaScriptはこんな感じです。

// コメント数をカウントし画面に表示/更新

function updateCommentCountOverlay() {

    const commentElements = document.querySelectorAll('.js-comment-container');

    const totalComments = commentElements.length;

    let resolvedComments = 0;



    commentElements.forEach(commentElement => {

        let hasResolvedText = false;

        const resolvedTextContainer = commentElement.querySelector('.d-lg-inline.d-block.px-md-0.px-3.pb-md-0.pb-3');

        if (resolvedTextContainer && resolvedTextContainer.textContent.includes('marked this conversation as resolved.')) {

            hasResolvedText = true;

        }

        const hasThumbsUpReaction = !!commentElement.querySelector('[id^="reactions--reaction_button_component-"][value="THUMBS_UP unreact"]');

        

        const isResolved = hasResolvedText || hasThumbsUpReaction;

        if (isResolved) {

            resolvedComments++;

        }

    });



    let overlay = document.getElementById('github-comment-counter-overlay');

    if (!overlay) {

        overlay = document.createElement('div');

        overlay.id = 'github-comment-counter-overlay';

        document.body.appendChild(overlay);

    }



    overlay.textContent = `指摘: ${totalComments}, 解決済: ${resolvedComments}`;

    if (totalComments !== resolvedComments) {

        overlay.style.backgroundColor = 'red';

    } else {

        overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';

    }

}



// File changedタブかどうかを判定しオブサーバをセット

function checkAndUpdateOnFilesTab() {

    if (window.location.href.includes('/pull/') && window.location.href.endsWith('/files')) {

        updateCommentCountOverlay();



        const observeTarget = document.querySelector('#files_bucket');



        if (observeTarget) {

            const observer = new MutationObserver(updateCommentCountOverlay);

            observer.observe(observeTarget, { subtree: true, childList: true, attributes: false, characterData: false });

        }

    } else {

        const overlay = document.getElementById('github-comment-counter-overlay');

        if (overlay) {

            overlay.remove();

        }

    }

}



window.addEventListener('turbo:load', checkAndUpdateOnFilesTab);

現在のGitHubはTurboを使用して画面描画を行なっているようなので、window.addEventListener('turbo:load', hoge)で画面遷移のロードを検知し処理を実行できます。あとはquerySelectorやgetElementByIdで指摘コメントや解決済みコメントの要素をいい感じに検索し数をカウントするだけです。現在のGitHubではコメントは'.js-comment-container'、解決済み（marked this conversation as resolved.テキストが表示されている状態）は'.d-lg-inline.d-block.px-md-0.px-3.pb-md-0.pb-3'ので探索するとうまく取得できました。また個人的な運用としてサムズアップ👍アイコンも解決済みとしてカウントするようにしています。このような自分用カスタムができるのが自作プラグインのいい所ですね。
最終的にCSVで定義したelementを作成しappendChildでUIに貼り付けています。また、ページ内で解決済に変更した場合に更新されるようObserverも設定しました。

CSSの作成

最後にelementのデザインを決めるCSSを作成します。今回はjsファイルと分けましたが、自分用と割り切ってしまうならJavaScript内に入れてしまっても良いと思います。

#github-comment-counter-overlay {

    position: fixed;

    top: 10px;

    right: 10px;

    background-color: rgba(0, 0, 0, 0.7);

    color: white;

    padding: 8px 12px;

    border-radius: 5px;

    font-size: 14px;

    z-index: 9999;

  }