☰

Grok Code Style with Collapse

Shrink, collapse, and style pre/code blocks on Grok pages with customizable domains

当前为 2025-03-15 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Grok Code Style with Collapse
// @namespace    http://tampermonkey.net/
// @version      1.3
// @description  Shrink, collapse, and style pre/code blocks on Grok pages with customizable domains
// @author       You
// @match        https://x.com/i/grok*
// @match        https://grok.com/*
// @match        https://grok.x.ai/*
// @match        https://x.ai/*
// @exclude      https://greasyfork.org/*
// @exclude      https://*.org/*
// @grant        GM_addStyle
// @grant        GM_getValue
// @grant        GM_setValue
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // 預設網域
    const defaultDomains = [
        'https://x.com/i/grok*',
        'https://grok.com/*',
        'https://grok.x.ai/*',
        'https://x.ai/*'
    ];

    // 加載使用者自訂網域
    let customDomains = GM_getValue('customDomains', []);
    let allDomains = [...new Set([...defaultDomains, ...customDomains])];

    // 樣式
    GM_addStyle(`
        .grok-code-wrapper {
            position: relative;
            margin: 0;
        }
        .grok-code-wrapper pre, .grok-code-wrapper code {
            max-height: 100px; /* 更緊湊 */
            overflow-y: hidden; /* 預設隱藏 */
            font-size: 10px; /* 更小字體 */
            line-height: 1.1; /* 超緊湊行距 */
            background-color: #f5f5f5;
            padding: 3px; /* 極小內邊距 */
            border: 1px solid #ddd;
            display: block;
            transition: max-height 0.3s ease; /* 展開動畫 */
        }
        .grok-code-wrapper.expanded pre, .grok-code-wrapper.expanded code {
            max-height: 300px; /* 展開後高度 */
            overflow-y: auto; /* 滾動條 */
        }
        .grok-toggle-btn {
            position: absolute;
            top: 2px;
            right: 2px;
            font-size: 10px;
            padding: 1px 4px;
            cursor: pointer;
            background: #ddd;
            border: none;
            border-radius: 2px;
        }
        #grok-domain-config {
            position: fixed;
            top: 10px;
            left: 10px;
            background: #fff;
            padding: 10px;
            border: 1px solid #ccc;
            z-index: 10000;
        }
    `);

    // 折疊與展開邏輯
    function wrapCodeBlocks() {
        const codeBlocks = document.querySelectorAll(':not([class*="highlight"]:not([id*="highlight"])) > pre, :not([class*="highlight"]:not([id*="highlight"])) > code');
        codeBlocks.forEach(block => {
            if (!block.parentElement.classList.contains('grok-code-wrapper')) {
                const wrapper = document.createElement('div');
                wrapper.className = 'grok-code-wrapper';
                block.parentElement.insertBefore(wrapper, block);
                wrapper.appendChild(block);

                const toggleBtn = document.createElement('button');
                toggleBtn.className = 'grok-toggle-btn';
                toggleBtn.textContent = '展開';
                wrapper.appendChild(toggleBtn);

                toggleBtn.addEventListener('click', () => {
                    wrapper.classList.toggle('expanded');
                    toggleBtn.textContent = wrapper.classList.contains('expanded') ? '收起' : '展開';
                });
            }
        });
    }

    // 自訂網域介面
    function createDomainConfig() {
        let configDiv = document.getElementById('grok-domain-config');
        if (!configDiv) {
            configDiv = document.createElement('div');
            configDiv.id = 'grok-domain-config';
            document.body.appendChild(configDiv);
        }
        configDiv.innerHTML = `
            <h3>Grok 網域設定</h3>
            <input type="text" id="new-domain" placeholder="輸入網域 (e.g., https://example.com/*)">
            <button id="add-domain">新增</button>
            <ul id="domain-list"></ul>
            <button id="close-config">關閉</button>
        `;

        const domainList = document.getElementById('domain-list');
        allDomains.forEach(domain => {
            const li = document.createElement('li');
            li.textContent = domain;
            if (!defaultDomains.includes(domain)) {
                const removeBtn = document.createElement('button');
                removeBtn.textContent = '移除';
                removeBtn.onclick = () => {
                    customDomains = customDomains.filter(d => d !== domain);
                    GM_setValue('customDomains', customDomains);
                    location.reload();
                };
                li.appendChild(removeBtn);
            }
            domainList.appendChild(li);
        });

        document.getElementById('add-domain').addEventListener('click', () => {
            const newDomain = document.getElementById('new-domain').value.trim();
            if (newDomain && !allDomains.includes(newDomain)) {
                customDomains.push(newDomain);
                GM_setValue('customDomains', customDomains);
                location.reload();
            }
        });

        document.getElementById('close-config').addEventListener('click', () => {
            configDiv.style.display = 'none';
        });
    }

    // 初始化
    wrapCodeBlocks();
    createDomainConfig();
    setInterval(wrapCodeBlocks, 2000); // 動態頁面更新
})();