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-02-21 提交的版本,查看 最新版本

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