☰

SearchNixOS-LogoCustom

因为骄傲月太长，Logo设计又不好看，为了真正的平等包容，实现了自定义图标的功能。

// ==UserScript==
// @name         SearchNixOS-LogoCustom
// @namespace    https://github.com/Rikki-Zero/SearchNixOS-LogoCustom
// @version      2025-07-21
// @description  因为骄傲月太长，Logo设计又不好看，为了真正的平等包容，实现了自定义图标的功能。
// @author       Rikki
// @match        https://search.nixos.org/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=nixos.org
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_addStyle
// @grant        GM_getResourceURL
// @resource     bootstrapCSS https://search.nixos.org/bootstrap.min.css
// @run-at       document-start
// @license      AGPL-3.0
// ==/UserScript==

(function() {
    'use strict';

    // 在文档加载前就注入CSS隐藏logo和添加Bootstrap样式
    const styleId = 'SearchNixOS-LogoCustom-style';
    GM_addStyle(`
        #${styleId} .logo {
            opacity: 0 !important;
            visibility: hidden !important;
        }
        /* 自定义弹窗样式 */
        .logo-custom-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 99999;
            background: white;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 3px 9px rgba(0,0,0,0.5);
            width: 300px;
        }
        .logo-custom-modal .modal-header {
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
            margin-bottom: 15px;
        }
        .logo-custom-modal .modal-footer {
            border-top: 1px solid #eee;
            padding-top: 15px;
            margin-top: 15px;
            text-align: right;
        }
        .logo-custom-modal .btn {
            display: inline-block;
            padding: 4px 12px;
            margin-bottom: 0;
            font-size: 14px;
            line-height: 20px;
            text-align: center;
            vertical-align: middle;
            cursor: pointer;
            border: 1px solid #ccc;
            border-radius: 4px;
            color: #333;
            background-color: #f5f5f5;
            text-shadow: 0 1px 1px rgba(255,255,255,0.75);
        }
        .logo-custom-modal .btn-primary {
            color: white;
            background-color: #006dcc;
            border-color: #04c;
        }
        .logo-custom-modal .btn-danger {
            color: white;
            background-color: #da4f49;
            border-color: #bd362f;
        }
        /* 遮罩层样式 */
        .modal-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5);
            z-index: 99998;
        }
    `);

    // 创建自定义弹窗函数
    function showLogoCustomModal() {
        // 创建遮罩层
        const backdrop = document.createElement('div');
        backdrop.className = 'modal-backdrop';
        
        // 创建模态框
        const modal = document.createElement('div');
        modal.className = 'logo-custom-modal';
        modal.innerHTML = `
            <div class="modal-header">
                <h3>自定义图标设置</h3>
            </div>
            <div class="modal-body">
                <p>请选择要执行的操作：</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary change-logo">修改图标</button>
                <button class="btn btn-danger reset-logo">重置图标</button>
            </div>
        `;

        // 添加到文档
        document.body.appendChild(backdrop);
        document.body.appendChild(modal);

        // 关闭弹窗函数
        function closeModal() {
            modal.remove();
            backdrop.remove();
            document.removeEventListener('keydown', handleKeyDown);
        }

        // 键盘ESC键关闭
        function handleKeyDown(e) {
            if (e.key === 'Escape') {
                closeModal();
            }
        }

        // 修改图标按钮事件
        modal.querySelector('.change-logo').addEventListener('click', function() {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = 'image/*';
            
            input.onchange = function(e) {
                const file = e.target.files[0];
                if (!file) return;
                
                const reader = new FileReader();
                reader.onload = function(event) {
                    const newLogoSrc = event.target.result;
                    GM_setValue('customLogo', newLogoSrc);
                    const logo = document.querySelector('.logo');
                    if (logo) {
                        logo.src = newLogoSrc;
                    }
                    closeModal();
                };
                reader.readAsDataURL(file);
            };
            
            input.click();
        });

        // 重置图标按钮事件
        modal.querySelector('.reset-logo').addEventListener('click', function() {
            GM_setValue('customLogo', null);
            const logo = document.querySelector('.logo');
            if (logo) {
                logo.src = logo.dataset.originalSrc || logo.src;
            }
            closeModal();
        });

        // 点击遮罩层关闭
        backdrop.addEventListener('click', closeModal);
        
        // 监听ESC键
        document.addEventListener('keydown', handleKeyDown);

        // 阻止模态框内部点击事件冒泡
        modal.addEventListener('click', function(e) {
            e.stopPropagation();
        });
    }

    // 等待页面完全加载
    window.addEventListener('load', function() {
        const logo = document.querySelector('.logo');
        if (!logo) return;

        // 保存原始logo地址
        logo.dataset.originalSrc = logo.src;

        // 移除之前添加的隐藏样式
        const styleElement = document.querySelector(`style[id="${styleId}"]`);
        if (styleElement) {
            styleElement.remove();
        }

        // 检查是否有存储的自定义logo
        const customLogo = GM_getValue('customLogo');
        if (customLogo) {
            logo.src = customLogo;
        }

        // 修改右键菜单事件
        logo.addEventListener('contextmenu', function(e) {
            e.preventDefault();
            showLogoCustomModal();
        });
    });
})();