Greasy Fork镜像 还支持 简体中文。

AI Chat Message Row Max-Width

Adjust Content Max-Width

  1. // ==UserScript==
  2. // @name AI Chat Message Row Max-Width
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.11
  5. // @description Adjust Content Max-Width
  6. // @author shawn-wxn
  7. // @match https://claude.ai/*
  8. // @match https://chat.deepseek.com/*
  9. // @match https://poe.com/*
  10. // @match https://*.geeksmonkey.com/*
  11. // @match https://*.perplexity.ai/*
  12. // @icon https://www.google.com/s2/favicons?sz=64&domain=claude.ai
  13. // @grant GM_addStyle
  14. // @grant GM_log
  15. // @license GPL-2.0-only
  16. // ==/UserScript==
  17.  
  18. (function () {
  19. // 获取当前的 URL
  20. var currentURL = window.location.href;
  21.  
  22. // 根据当前 URL 进行 if-else 逻辑判断
  23. if (currentURL.includes("poe.com")) {
  24. var inputFooter = document.querySelector("div[class^='ChatPageMainFooter_footerInner__']");
  25. var inputFooterClass = null;
  26. for (var className of inputFooter.classList){
  27. if (className.indexOf('ChatPageMainFooter_footerInner__') !== -1) {
  28. inputFooterClass = className;
  29. break;
  30. }
  31. }
  32. if (!inputFooterClass) {
  33. GM_log("ERROR: not found inputFooterClass.");
  34. }
  35.  
  36. var chatPageMainDiv = document.querySelector("div[class^='InfiniteScroll_container__']");
  37. var chatPageMainDivClass = null;
  38. for (className of chatPageMainDiv.classList){
  39. if (className.indexOf('InfiniteScroll_container__') !== -1) {
  40. chatPageMainDivClass = className;
  41. break;
  42. }
  43. }
  44. if (!chatPageMainDivClass) {
  45. GM_log("ERROR: not found chatPageMainDivClass.");
  46. }
  47.  
  48. // var humanMessageDiv = document.querySelector("div[class^='Message_humanMessageBubble__']");
  49. // var humanMessageDivClass = null;
  50. // for (className of humanMessageDiv.classList){
  51. // if (className.indexOf('Message_humanMessageBubble__') !== -1) {
  52. // humanMessageDivClass = className;
  53. // break;
  54. // }
  55. // }
  56. // if (!humanMessageDivClass) {
  57. // GM_log("ERROR: not found humanMessageDivClass.");
  58. // }
  59.  
  60. // var botMessageDiv = document.querySelector("div[class^='Message_botMessageBubble__']");
  61. // var botMessageDivClass = null;
  62. // for (className of botMessageDiv.classList){
  63. // if (className.indexOf('Message_botMessageBubble__') !== -1) {
  64. // botMessageDivClass = className;
  65. // break;
  66. // }
  67. // }
  68. // if (!botMessageDivClass) {
  69. // GM_log("ERROR: not found botMessageDivClass.");
  70. // }
  71.  
  72. GM_addStyle(`
  73. .${inputFooterClass} {
  74. --desktop-reading-column-max-width: ${Math.floor(window.innerWidth * 0.048)}rem;
  75. }
  76. .${chatPageMainDivClass} {
  77. --desktop-reading-column-max-width: ${Math.floor(window.innerWidth * 0.048)}rem;
  78. }`
  79. )
  80. // .${humanMessageDivClass} {
  81. // max-width: ${Math.floor(window.innerWidth * 0.078)}ch;
  82. // }
  83. // .${botMessageDivClass} {
  84. // max-width: ${Math.floor(window.innerWidth * 0.078)}ch;
  85. // }
  86. } else if (currentURL.includes("claude.ai")) {
  87. // 创建一个<style>标签
  88. var styleTag = document.createElement('style');
  89.  
  90. // 将 CSS 样式添加到<style>标签中
  91. var cssStyles = `
  92. /* 在这里添加您的 CSS 样式 */
  93. .max-w-3xl {
  94. max-width: ${Math.floor(window.innerWidth * 0.05)}rem;
  95. }
  96. .max-w-\\[75ch\\] {
  97. max-width: ${Math.floor(window.innerWidth * 0.1)}ch;
  98. }
  99. .max-w-\\[60ch\\] {
  100. max-width: ${Math.floor(window.innerWidth * 0.1)}ch;
  101. }
  102. `;
  103.  
  104. // 设置<style>标签的内容为 CSS 样式
  105. styleTag.innerHTML = cssStyles;
  106.  
  107. // 将<style>标签添加到<head>标签中
  108. document.head.appendChild(styleTag);
  109. } else if (currentURL.includes("geeksmonkey.com")){
  110. // 选择目标节点
  111. const targetNode = document.getElementById('app');
  112.  
  113. // 创建一个观察器实例并传入回调函数
  114. const observer = new MutationObserver(function(mutations) {
  115. // 遍历所有的变动记录
  116. mutations.forEach(function(mutation) {
  117. // 检查是否有子节点被移除
  118. if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
  119. // 遍历所有被移除的节点
  120. for (let i = 0; i < mutation.removedNodes.length; i++) {
  121. // 检查这个节点是否是我们关注的节点(具有class=load-wrapper)
  122. const node = mutation.removedNodes[i];
  123. if (node.nodeType === Node.ELEMENT_NODE){
  124. if (node.classList.contains('loading-wrap')) {
  125. // 动画结束,load-wrapper元素被移除
  126. // 在这里执行你想要进行的操作
  127. var imageWraperDiv = document.getElementById("image-wrapper");
  128. var imageWraperDivClass = null;
  129. for (className of imageWraperDiv.classList) {
  130. if (className.indexOf('max-w-screen-xl') !== -1) {
  131. imageWraperDivClass = className;
  132. break;
  133. }
  134. }
  135. if (!imageWraperDivClass) {
  136. GM_log("ERROR: not found imageWraperDivClass.");
  137. }
  138.  
  139. GM_addStyle(`
  140. .${imageWraperDivClass} {
  141. max-width: ${Math.floor(window.innerWidth * 0.83)}px;
  142. }`
  143. )
  144.  
  145. // 一旦检测到load-wrapper元素被移除,就断开观察器
  146. observer.disconnect();
  147. return; // 退出循环和回调函数
  148. }
  149. }
  150. }
  151. }
  152. });
  153. });
  154.  
  155. // 配置观察选项:
  156. const config = { attributes: false, childList: true, subtree: true };
  157.  
  158. // 传入目标节点和观察选项开始观察
  159. observer.observe(targetNode, config);
  160.  
  161.  
  162. } else if (currentURL.includes("perplexity.ai")){
  163. // 创建一个<style>标签
  164. var styleTag = document.createElement('style');
  165.  
  166. // 将 CSS 样式添加到<style>标签中
  167. var cssStyles = `
  168. /* 在这里添加您的 CSS 样式 */
  169. .max-w-threadWidth {
  170. max-width: ${Math.floor(window.innerWidth * 0.85)}px;
  171. }
  172. `;
  173.  
  174. // 设置<style>标签的内容为 CSS 样式
  175. styleTag.innerHTML = cssStyles;
  176.  
  177. // 将<style>标签添加到<head>标签中
  178. document.head.appendChild(styleTag);
  179. } else if (currentURL.includes("chat.deepseek.com")){
  180. // 创建一个<style>标签
  181. var styleTag = document.createElement('style');
  182.  
  183. // 将 CSS 样式添加到<style>标签中
  184. var cssStyles = `
  185. /* 在这里添加您的 CSS 样式 */
  186. :root {
  187. --message-list-max-width: ${Math.floor(window.innerWidth * 0.85)}px;
  188. }
  189. `;
  190.  
  191. // 设置<style>标签的内容为 CSS 样式
  192. styleTag.innerHTML = cssStyles;
  193.  
  194. // 将<style>标签添加到<head>标签中
  195. document.head.appendChild(styleTag);
  196. } else {
  197. // 如果以上条件都不满足
  198. console.log("当前 URL 不符合预期");
  199. }
  200. })();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址