AI Chat Message Row Max-Width

Claude Content Max-Width

adjust Claude Content Max-Width
目前為 2023-08-21 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==UserScript==
// @name         Claude Content Max-Width
// @namespace    http://tampermonkey.net/
// @version      0.5
// @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        GM_addStyle
// @grant        GM_log
// @license      GPL-2.0-only
// ==/UserScript==

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

    // 根据当前 URL 进行 if-else 逻辑判断
    if (currentURL.includes("poe.com")) {
        var mainColumnDiv = document.querySelector("div[class^='MainColumn_column__']");
        var mainColumnDivClass = null;
        for (var className of mainColumnDiv.classList){
            if (className.indexOf('MainColumn_column__') !== -1) {
                mainColumnDivClass = className;
                break;
            }
        }
        if (!mainColumnDivClass) {
            GM_log("ERROR: not found mainColumnDivClass.");
        }

        var chatPageMainDiv = document.querySelector("div[class^='ChatPageMain_container']");
        var chatPageMainDivClass = null;
        for (className of chatPageMainDiv.classList){
            if (className.indexOf('ChatPageMain_container') !== -1) {
                chatPageMainDivClass = className;
                break;
            }
        }
        if (!chatPageMainDivClass) {
            GM_log("ERROR: not found chatPageMainDivClass.");
        }

        var humanMessageDiv = document.querySelector("div[class^='Message_humanMessageBubble__']");
        var humanMessageDivClass = null;
        for (className of humanMessageDiv.classList){
            if (className.indexOf('Message_humanMessageBubble__') !== -1) {
                humanMessageDivClass = className;
                break;
            }
        }
        if (!humanMessageDivClass) {
            GM_log("ERROR: not found humanMessageDivClass.");
        }
        GM_log("success!");

        GM_addStyle(`
    .${mainColumnDivClass} {
    width: 100%;
    }
    .${chatPageMainDivClass} {
    --desktop-reading-column-max-width: ${Math.floor(window.innerWidth * 0.78)}px;
    }
    .${humanMessageDivClass} {
    max-width: ${Math.floor(window.innerWidth * 0.078)}ch;
    }`
    )
    } 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 不符合预期");
    }
})();