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-03-22 提交的版本，查看 最新版本。

// ==UserScript==
// @name         GitHub的Commits记录按钮外围加上黑色边框，并以蓝色字体和黄色背景高亮显示
// @name:en    GitHub's Commits Button: Black Border & Blue Text on Yellow
// @namespace    http://tampermonkey.net/
// @version      0.2.4
// @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 first
    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');
            }
        });
    }

    // Run the function to apply styles
    applyCustomStyles();

    // Optionally, if the content might change dynamically (e.g., in a single-page app),
    // consider running `applyCustomStyles` at intervals or in response to certain events
})();