Userscript that customize the look of labels in a Jira board (team managed mode)

jira-label-style-userscript.js

// ==UserScript==
// @name         Label style in JIRA
// @namespace    http://tampermonkey.net/
// @version      2025-01-22
// @description  Chage the style of labels in Jira board
// @author       Paulo Amaral
// @match        https://*.atlassian.net/jira/software/projects/*/boards/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=atlassian.net
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // hardcode style for label here
    // TODO: make it so any attribute in this array be applied as CSS, except emoji (for more flexibility)
    const labelStyles = {
        "from-qa": { backgroundColor: "rgb(127,211,242)", color: "#000000", emoji: "🐞" },
        "fast-lane": { backgroundColor: "rgb(255,169,160)", color: "#000000", emoji: "🚀" }
    };

    // selector to find labels that were not customized
    const labelSelector = 'div[data-onboarding-observer-id="board-wrapper"] div[data-component-selector="platform-card.ui.card.card-content.content-section"] span:not([customized])';

    // this must run repeatedely because react updates the view as you scroll
    function updateLabels() {

        document.querySelectorAll(labelSelector).forEach(span => {
            const labelText = span.textContent.trim();
            if (labelStyles[labelText]) {
                const { backgroundColor, color, emoji } = labelStyles[labelText];
                span.style.backgroundColor = backgroundColor;
                span.style.color = color;

                // add emoji
                if (emoji) {
                    span.textContent = `${emoji} ${labelText}`;
                    span.style.padding = "6px 4px 0px 4px";
                }

                span.setAttribute("customized", "true"); // mark it to avoid unecessary reprocessing
            }
        });
    }

    // Run updateLabels periodically
    setInterval(updateLabels, 250);


})();