Shrink, collapse, and style pre/code blocks on Grok pages with customizable domains
As of
// ==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); // 動態頁面更新
})();