Claude Content Max-Width

adjust Claude Content Max-Width

2023-07-13 기준 버전입니다. 최신 버전을 확인하세요.

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

You will need to install an extension such as Tampermonkey to install this script.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

// ==UserScript==
// @name         Claude Content Max-Width
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  adjust Claude Content Max-Width
// @author       shawn-wxn
// @match        https://claude.ai/*
// @match        https://poe.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=claude.ai
// @grant        none
// @license      GPL-2.0-only
// ==/UserScript==

(function() {
    // 获取当前的 URL
    var currentURL = window.location.href;

    // 根据当前 URL 进行 if-else 逻辑判断
    if (currentURL.includes("poe.com")) {
        var mainSectionDiv = document.querySelector("div[class*='PageWithSidebarLayout_mainSection']");
        var classNames = mainSectionDiv.classList;
        var mainSectionDivClass = null;
        for (var i = 0; i < classNames.length; i++) {
            var className = classNames[i];
            if (className.indexOf('PageWithSidebarLayout_mainSection') !== -1) {
                mainSectionDivClass = className;
                break;
            }
        }
        if (!mainSectionDivClass) {
            throw new Error("not found mainSectionDivClass");
        }


        var botMessageBubble = document.querySelector("div[class*='Message_botMessageBubble']");
        var classNames1 = botMessageBubble.classList;
        var botMessageBubbleClass = null;
        for (var i = 0; i < classNames1.length; i++) {
            var className = classNames1[i];
            if (className.indexOf('Message_botMessageBubble') !== -1) {
                botMessageBubbleClass = className;
                break;
            }
        }
        if (!botMessageBubbleClass) {
            throw new Error("not found botMessageBubbleClass");
        }


        var humanMessageBubble = document.querySelector("div[class*='Message_humanMessageBubble']");
        var classNames2 = humanMessageBubble.classList;
        var humanMessageBubbleClass = null;
        for (var i = 0; i < classNames2.length; i++) {
            var className = classNames2[i];
            if (className.indexOf('Message_humanMessageBubble') !== -1) {
                humanMessageBubbleClass = className;
                break;
            }
        }
        if (!humanMessageBubbleClass) {
            throw new Error("not found humanMessageBubbleClass");
        }


        var styleTag = document.createElement('style');

        // 将 CSS 样式添加到<style>标签中
        var cssStyles = `
            /* 在这里添加您的 CSS 样式 */
            .${mainSectionDivClass} {
              max-width: ${Math.floor(window.innerWidth * 0.75)}px;
            }
            .${botMessageBubbleClass},.${humanMessageBubbleClass} {
              max-width: ${Math.floor(window.innerWidth * 0.66)}ch;
            }
            `;

        // 设置<style>标签的内容为 CSS 样式
        styleTag.innerHTML = cssStyles;

        // 将<style>标签添加到<head>标签中
        document.head.appendChild(styleTag);
    } else if (currentURL.includes("claude.ai")) {
        // 创建一个<style>标签
        var styleTag = document.createElement('style');

        // 将 CSS 样式添加到<style>标签中
        var cssStyles = `
            /* 在这里添加您的 CSS 样式 */
            .max-w-3xl {
              max-width: ${Math.floor(window.innerWidth * 0.05)}rem;
            }
            .max-w-\\[75ch\\] {
              max-width: ${Math.floor(window.innerWidth * 0.1)}ch;
            }
        `;

        // 设置<style>标签的内容为 CSS 样式
        styleTag.innerHTML = cssStyles;

        // 将<style>标签添加到<head>标签中
        document.head.appendChild(styleTag);
    } else {
        // 如果以上条件都不满足
        console.log("当前 URL 不符合预期");
    }
})();