github-char-count.user.js

// ==UserScript==
// @name         GitHub character counter
// @namespace    https://nylen.io/
// @version      0.1
// @description  Show a character count of the commit message summary when merging PRs on GitHub
// @author       James Nylen
// @match        https://github.com/*/pull/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // The commit message fields are not available immediately on page load.
    function findMergeTitleField() {
        var mergeTitleField = document.getElementById('merge_title_field');
        if (!mergeTitleField) {
            setTimeout(findMergeTitleField, 1000);
            return;
        }

        mergeTitleField.style.maxWidth = 'calc(100% - 3em)';

        var titleCharCount = document.createElement('span');
        titleCharCount.id = 'merge_title_char_count';
        titleCharCount.style.position = 'absolute';
        titleCharCount.style.right    = '1.5em';
        titleCharCount.style.top      = '1.5em';

        function onTitleChange() {
            titleCharCount.innerText = mergeTitleField.value.length;
            if (mergeTitleField.value.length <= 30) {
                // Very short title - probably needs a bit more
                titleCharCount.style.color = '#600';
            } else if (mergeTitleField.value.length <= 60) {
                // Probably a good title length
                titleCharCount.style.color = '#060';
            } else if (mergeTitleField.value.length <= 72) {
                // Longer than recommended by some sources but doesn't seem to break anything
                titleCharCount.style.color = '#570';
            } else {
                // Too long - commit messages start to get wrapped across multiple lines or not display well in some tools
                titleCharCount.style.color = '#600';
            }
        }
        onTitleChange();
        mergeTitleField.addEventListener('input', onTitleChange);

        mergeTitleField.parentNode.insertBefore(titleCharCount, mergeTitleField.nextSibling);
    }
    findMergeTitleField();
})();