Greasy Fork

GitHub的Commits记录按钮外围加上黑色边框，并以蓝色字体和黄色背景高亮显示

GitHub's Commits recording button is surrounded by a black border, displayed in blue font, and highlighted with a yellow background

当前为 2024-04-02 提交的版本，查看 最新版本。

// ==UserScript==
// @name         GitHub的Commits记录按钮外围加上黑色边框，并以蓝色字体和黄色背景高亮显示
// @name:en    GitHub's Commits Button: Black Border & Blue Text on Yellow
// @namespace    http://tampermonkey.net/
// @version      0.2.5
// @description  GitHub's Commits recording button is surrounded by a black border, displayed in blue font, and highlighted with a yellow background
// @description:en  GitHub's Commits recording button is surrounded by a black border, displayed in blue font, and highlighted with a yellow background
// @author       aspen138
// @match        *://github.com/*
// @icon         data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAACEUExURUxpcRgWFhsYGBgWFhcWFh8WFhoYGBgWFiUlJRcVFRkWFhgVFRgWFhgVFRsWFhgWFigeHhkWFv////////////r6+h4eHv///xcVFfLx8SMhIUNCQpSTk/r6+jY0NCknJ97e3ru7u+fn51BOTsPCwqGgoISDg6empmpoaK2srNDQ0FhXV3eXcCcAAAAXdFJOUwCBIZXMGP70BuRH2Ze/LpIMUunHkpQR34sfygAAAVpJREFUOMt1U+magjAMDAVb5BDU3W25b9T1/d9vaYpQKDs/rF9nSNJkArDA9ezQZ8wPbc8FE6eAiQUsOO1o19JolFibKCdHGHC0IJezOMD5snx/yE+KOYYr42fPSufSZyazqDoseTPw4lGJNOu6LBXVUPBG3lqYAOv/5ZwnNUfUifzBt8gkgfgINmjxOpgqUA147QWNaocLniqq3QsSVbQHNp45N/BAwoYQz9oUJEiE4GMGfoBSMj5gjeWRIMMqleD/CAzUHFqTLyjOA5zjNnwa4UCEZ2YK3khEcBXHjVBtEFeIZ6+NxYbPqWp1DLKV42t6Ujn2ydyiPi9nX0TTNAkVVZ/gozsl6FbrktkwaVvL2TRK0C8Ca7Hck7f5OBT6FFbLATkL2ugV0tm0RLM9fedDvhWstl8Wp9AFDjFX7yOY/lJrv8AkYuz7fuP8dv9izCYH+x3/LBnj9fYPBTpJDNzX+7cAAAAASUVORK5CYII=
// @grant        GM_addStyle
// @license      MIT
// ==/UserScript==


(function() {
    'use strict';

    // Add the custom styles
    GM_addStyle(`
       .custom-highlight {
            border: 2px solid black !important;
            background-color: yellow !important;
            color: blue !important;
        }
    `);

    // Function to check and apply styles to matching elements
    function applyCustomStyles() {
        // Select all span elements that could contain the text
        const spans = document.querySelectorAll('span[data-component="text"] span');

        // Regular expression to match the pattern "number Commits" with commas for thousand separators
        const regex = /\b\d{1,3}(,\d{3})*\sCommits\b/;

        spans.forEach(span => {
            // If the span's text matches the pattern
            if (regex.test(span.textContent)) {
                // Add a custom class or directly apply styles here
                span.classList.add('custom-highlight');
            }
        });
    }

    // MutationObserver to observe changes in the document
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.addedNodes.length) {
                applyCustomStyles();
            }
        });
    });

    // Configuration of the observer:
    const config = { childList: true, subtree: true };

    // Start observing the body for added nodes
    observer.observe(document.body, config);

    // Initial application of the styles
    applyCustomStyles();
})();