如何增大ChatGPT网页端代码查看框尺寸？求更优解决方案

ChatGPT网页端的代码查看区域采用固定宽度，无法随浏览器窗口缩放调整，尺寸过小的问题确实影响使用体验。你提到的bookmarklet方案能临时解决，但存在选择器不够精准、需手动触发、可能丢失元素原有样式的问题，以下是更优的替代方案：

一、浏览器用户脚本（推荐） #

使用Tampermonkey、Greasemonkey等用户脚本管理器，实现代码块宽度自适应的自动生效，适配ChatGPT的动态加载特性：

// ==UserScript==
// @name         自适应ChatGPT代码块宽度
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  让ChatGPT的代码查看区域随浏览器窗口自适应宽度
// @match        https://chat.openai.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 监听页面DOM变化，适配ChatGPT单页应用的动态内容加载
    const observer = new MutationObserver(() => {
        // 精准定位代码块元素
        document.querySelectorAll('div[data-testid="code-block"]').forEach(block => {
            // 解除固定宽度限制
            block.style.width = '100%';
            block.style.maxWidth = '100%';
            // 调整父容器的宽度限制
            const parentContainer = block.closest('div[class*="group w-full"]');
            if (parentContainer) {
                parentContainer.style.maxWidth = '100%';
            }
        });
    });

    observer.observe(document.body, { childList: true, subtree: true });
})();

优势： #

• 自动运行，无需每次手动点击书签
• 选择器精准，仅针对代码块元素，避免误改其他界面组件
• 通过修改样式而非替换className，保留元素原有样式的同时解除宽度限制
• 监听页面DOM变化，适配ChatGPT动态加载的对话内容

二、自定义CSS（轻量化方案） #

使用Stylus等浏览器样式扩展，直接通过CSS修改代码块的宽度规则：

/* 自适应ChatGPT代码块宽度 */
div[data-testid="code-block"] {
    width: 100% !important;
    max-width: 100% !important;
}

div[data-testid="code-block"] > pre {
    overflow-x: auto; /* 内容过长时保留横向滚动能力 */
}

/* 解除父容器的宽度限制 */
div[class*="group w-full"] {
    max-width: 100% !important;
}

优势： #

• 纯CSS实现，性能损耗极低
• 逻辑简单，仅专注于样式调整
• 自动生效，无需任何手动操作

三、改进版Bookmarklet（保留书签形式） #

如果仍然偏好书签触发的方式，可以优化原有代码，提升精准度和兼容性：

javascript:(function(){document.querySelectorAll('div[data-testid="code-block"]').forEach(e=>{e.style.width='100%';e.style.maxWidth='100%';const p=e.closest('div[class*="group w-full"]');p&&(p.style.maxWidth='100%')})})();

优势： #

• 选择器更精准，仅作用于代码块元素
• 修改样式而非替换className，避免丢失原有样式
• 代码更精简，执行效率更高

内容的提问来源于stack exchange，提问作者David Dehghan