Githubのbranchesの画面にプルリクエストのタイトルを表示する

やりたいこと

Githubのbranchesのブランチが何のブランチかブランチ名だけじゃわかりづらい なのでプルリク名をだして該当ブランチを見つけやすくしたい

こんな感じに

やり方

専用のChrome拡張を作ってもいいんだけど些末な機能なのでこちらの拡張を利用させてもらう

chrome.google.com

拡張をインストールしたらいかのコードを貼るだけ

const _wr = function(type) {
    var orig = history[type];
    return function() {
        var rv = orig.apply(this, arguments);
        var e = new Event(type);
        e.arguments = arguments;
        window.dispatchEvent(e);
        return rv;
    };
};
history.pushState = _wr('pushState'), history.replaceState = _wr('replaceState');

window.addEventListener('pushState', function(e) {
setTimeout(setPRName, 1000);
function setPRName() {
    const $branches = document.querySelectorAll(".branch-summary");
    const style = {
        "position": "absolute",
        "top": "12px",
        "left": "330px",
        "background": "#a60bff",
        "padding": "1px 5px",
        "line-height": "20px",
       "color": "#fff",
        "text-align": "center",
        "border-radius": "3px"
    };
    for (let $br of $branches) {
        const $btn = $br.querySelector(".state,.State");
        if ($btn) {
            const title = $btn.getAttribute("title");
            const $elem = document.createElement("div");
            $elem.innerText = title;
            for (let name in style) {
                $elem.style[name] = style[name];
            }
            $br.style.position = "relative";
            $br.appendChild($elem);
        }
    }
}

2017/05/10更新 GithubがhistoryAPIで制御されていたので画面遷移後にスクリプトが実行されていなかったので変更 - pushStateをフック - setTimeoutで画面レンダリングを待つ

あまりきれいではない…