Tampermonkey extension for github tab color coding

github-tab-color.js

// ==UserScript==
// @name         Github tab-dependent icon colour
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Recolor the github favicon depending on the page category
// @author       Maxwell Huang-Hobbs
// @match        https://github.com/orgs/*/projects/*
// @match        https://github.com/*/*/pull*
// @match        https://github.com/*/*/issue*
// @icon         https://github.githubassets.com/favicons/favicon-dark.png
// @grant        none
// ==/UserScript==

window.addEventListener('load', function() {

    function findPalleteFromUrl() {
        palettes = [
            {
                match:["projects"],
                palette: [
                    "#FCFF6C",
                    "#FFC43D",
                    "#EF8B34",
                    "#F06449",
                ],
            },
            {
                match:["issue", "issues"],
                palette: [
                    "#D0E1D4",
                    "#6CA3EF",
                    "#6EB9EB",
                    "#1D6BD7",
                    "#3F84E5",
                ],
            },
        ]

        for (let p of palettes) {
            for (let k of p.match) {
                if (window.location.href.match(new RegExp(`/${k}[/?$]`))) {
                    return p.palette
                }
            }
        }
        return null
    }

    var icon = document.querySelector('link[rel="icon"]');
    var copy = icon.cloneNode(!0);
    var stops = []
    var mkstop = (color, offset) => `<stop stop-color="${color}" offset="${offset}" />`
    var start = 0.05
    var stop = 0.9

    var pal = findPalleteFromUrl()
    console.log("selected palette", pal)
    if (pal == null) {
        return
    }

    stops.push(mkstop(pal[0], 0))
    stops.push(mkstop(pal[0], start))
    var step = (stop-start) / (pal.length - 1)
    for (let i=1; i<pal.length; i++) {
        stops.push(mkstop(pal[i], start + i * step))
    }

    var svgRaw = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 0C7.16 0 0 7.16 0 16C0 23.08 4.58 29.06 10.94 31.18C11.74 31.32 12.04 30.84 12.04 30.42C12.04 30.04 12.02 28.78 12.02 27.44C8 28.18 6.96 26.46 6.64 25.56C6.46 25.1 5.68 23.68 5 23.3C4.44 23 3.64 22.26 4.98 22.24C6.24 22.22 7.14 23.4 7.44 23.88C8.88 26.3 11.18 25.62 12.1 25.2C12.24 24.16 12.66 23.46 13.12 23.06C9.56 22.66 5.84 21.28 5.84 15.16C5.84 13.42 6.46 11.98 7.48 10.86C7.32 10.46 6.76 8.82 7.64 6.62C7.64 6.62 8.98 6.2 12.04 8.26C13.32 7.9 14.68 7.72 16.04 7.72C17.4 7.72 18.76 7.9 20.04 8.26C23.1 6.18 24.44 6.62 24.44 6.62C25.32 8.82 24.76 10.46 24.6 10.86C25.62 11.98 26.24 13.4 26.24 15.16C26.24 21.3 22.5 22.66 18.94 23.06C19.52 23.56 20.02 24.52 20.02 26.02C20.02 28.16 20 29.88 20 30.42C20 30.84 20.3 31.34 21.1 31.18C27.42 29.06 32 23.06 32 16C32 7.16 24.84 0 16 0V0Z" fill="url(#grad)"/>
  <radialGradient id="grad" r="150%" cx="30%" cy="107%">
  ${stops.join("\n    ")}
  </radialGradient>
</svg>`

    console.log(svgRaw)
    copy.href = "data:image/svg+xml;base64," + btoa(svgRaw);
    icon.type="image/svg+xml"
    console.log(copy)
    icon.parentNode.removeChild(icon);
    document.head.appendChild(copy);
}, false);

This script helps to differentiate the issues / projects from other tabs. I use Projects heavily at work and always have issues recognizing which of my 2 dozen github tabs is my project board.

• Projects are orange
• Issues are blue
• all other tabs use their default icons