☰

【SillyTavern / ST酒馆】html代码注入器-改

可以让ST酒馆独立运行html代码 (Inject HTML code into SillyTavern pages.)

目前为 2024-11-01 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         【SillyTavern / ST酒馆】html代码注入器-改
  3. // @name:zh      【ST酒馆】html代码注入器-改
  4. // @name:zh-CN   【ST酒馆】html代码注入器-改
  5. // @name:zh-TW   【ST酒館】html程式碼注入器-改
  6. // @name:ja      【SillyTavern】 HTMLコードインジェクター-改
  7. // @name:ko      【SillyTavern】 HTML코드 삽입기-수정
  8. // @name:en      【SillyTavern】 HTML Code Injector - Modified 
  9. // @name:fr      【SillyTavern】 Injecteur de code HTML - Modifié
  10. // @name:de      【SillyTavern】 HTML-Code-Injektor - Modifiziert 
  11. // @namespace    https://gf.qytechs.cn/users/590339-miaotouy
  12. // @version      1.1.6
  13. // @description  可以让ST酒馆独立运行html代码 (Inject HTML code into SillyTavern pages.)
  14. // @description:zh  可以让ST酒馆独立运行html代码
  15. // @description:zh-CN  可以让ST酒馆独立运行html代码
  16. // @description:zh-TW  讓SillyTavern獨立運行html程式碼
  17. // @description:ja  SillyTavernでhtmlコードを独立して実行できるようにします
  18. // @description:ko  SillyTavern에서 HTML 코드를 독립적으로 실행할 수 있습니다.
  19. // @description:en  Inject HTML code into SillyTavern pages.
  20. // @description:fr  Permet d'exécuter du code HTML de manière indépendante dans SillyTavern.
  21. // @description:de  Ermöglicht die unabhängige Ausführung von HTML-Code in SillyTavern.
  22. // @author       Qianzhuo
  23. // @match        *://localhost:8000/*
  24. // @match        *://127.0.0.1:8000/*
  25. // @match        *://*/*:8000/*
  26. // @match        *://frp-kit.top:*/*
  27. // @include      /^https?:\/\/.*:8000\//
  28. // @grant        GM_setValue
  29. // @grant        GM_getValue
  30. // @require      https://code.jquery.com/jquery-3.6.0.min.js
  31. // @license      CC BY-NC 4.0
  32. // ==/UserScript==
  33. /*
  34. 原作者：Qianzhuo
  35. 修改者：miaotouy
  36.  
  37. 【SillyTavern / ST酒馆】html代码注入器 © 2024 by Qianzhuo is licensed under CC BY-NC 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-nc/4.0/
  38. */
  39. (function () {
  40.     'use strict';
  41.     // ---------------------------------------- 全局变量 ----------------------------------------
  42.     let isInjectionEnabled, displayMode, lastMesTextContent, activationMode, customStartFloor, customEndFloor, savedPosition, isEdgeControlsCollapsed;
  43.     let edgeControls, settingsPanel;
  44.     // ---------------------------------------- 初始化函数 ----------------------------------------
  45.     function initScript() {
  46.         if (!document.title.includes('SillyTavern')) {
  47.             console.log('页面标题不是 "SillyTavern"，脚本未运行。');
  48.             return;
  49.         }
  50.         initVariables();
  51.         createUI();
  52.         addEventListeners();
  53.         addDragFunctionality();
  54.         startObservers();
  55.         console.log('HTML注入器脚本已初始化');
  56.     }
  57.     function initVariables() {
  58.         isInjectionEnabled = false;
  59.         displayMode = parseInt(GM_getValue('displayMode', 1));
  60.         lastMesTextContent = '';
  61.         activationMode = GM_getValue('activationMode', 'all');
  62.         customStartFloor = GM_getValue('customStartFloor', 1);
  63.         customEndFloor = GM_getValue('customEndFloor', -1);
  64.         savedPosition = GM_getValue('edgeControlsPosition', 'top-right');
  65.         isEdgeControlsCollapsed = GM_getValue('isEdgeControlsCollapsed', true);
  66.     }
  67.     // ---------------------------------------- UI 创建函数 ----------------------------------------
  68.     function createUI() {
  69.         createSettingsPanel();
  70.         createEdgeControls();
  71.         addStyles();
  72.     }
  73.     function createSettingsPanel() {
  74.         settingsPanel = document.createElement('div');
  75.         settingsPanel.id = 'html-injector-settings';
  76.         settingsPanel.classList.add('drawer');
  77.         settingsPanel.style.display = 'none';
  78.         settingsPanel.innerHTML = `
  79.             <div id="html-injector-settings-header" class="inline-drawer-header">
  80.                 <span class="inline-drawer-title">HTML注入器设置</span>
  81.                 <div id="html-injector-close-settings" class="inline-drawer-icon fa-solid fa-circle-xmark"></div>
  82.             </div>
  83.             <div id="settings-content">
  84.                 <div class="settings-section">
  85.                     <h3 class="settings-subtitle">边缘控制面板位置</h3>
  86.                     <select id="edge-controls-position" class="settings-select theme-element">
  87.                     <option value="top-right">界面右上角</option>
  88.                     <option value="right-three-quarters">界面右侧3/4位置</option>
  89.                     <option value="right-middle">界面右侧中间</option>
  90.                 </select>
  91.                 </div>
  92.                 <div class="settings-section">
  93.                 <h3 class="settings-subtitle">显示模式</h3>
  94.                 <label class="settings-option"><input type="radio" name="display-mode" value="1" ${displayMode === 1 ? 'checked' : ''}> 原代码和注入效果一起显示</label>
  95.                 <label class="settings-option"><input type="radio" name="display-mode" value="2" ${displayMode === 2 ? 'checked' : ''}> 原代码以摘要形式显示</label>
  96.                 <label class="settings-option"><input type="radio" name="display-mode" value="3" ${displayMode === 3 ? 'checked' : ''}> 隐藏原代码，只显示注入效果</label>
  97.             </div>
  98.                 <div class="settings-section">
  99.                     <h3 class="settings-subtitle">激活楼层</h3>
  100.                     <select id="activation-mode" class="settings-select theme-element">
  101.                         <option value="all">全部楼层</option>
  102.                         <option value="first">第一层</option>
  103.                         <option value="last">最后一层</option>
  104.                         <option value="lastN">最后N层</option>
  105.                         <option value="custom">自定义楼层</option>
  106.                     </select>
  107.                     <div id="custom-floor-settings" class="settings-subsection" style="display: none;">
  108.                         <label class="settings-option">起始楼层: <input type="number" id="custom-start-floor" min="1" value="1"></label>
  109.                         <label class="settings-option">结束楼层: <input type="number" id="custom-end-floor" min="-1" value="-1"></label>
  110.                         <p class="settings-note">（-1 表示最后一层）</p>
  111.                     </div>
  112.                     <div id="last-n-settings" class="settings-subsection" style="display: none;">
  113.                         <label class="settings-option">最后 <input type="number" id="last-n-floors" min="1" value="1"> 层</label>
  114.                     </div>
  115.                 </div>
  116.             </div>
  117.             <div class="settings-footer">
  118.                 <p>安全提醒：请仅注入您信任的代码。不安全的代码可能会对您的系统造成潜在风险。</p>
  119.                 <p>注意：要注入的 HTML 代码应该用 \`\`\` 包裹，例如：</p>
  120.                 <pre class="code-example">
  121. \`\`\`
  122. &lt;h1&gt;Hello, World!&lt;/h1&gt;
  123. &lt;p&gt;This is an example.&lt;/p&gt;
  124. \`\`\`
  125.         </pre>
  126.         <p>以下是对应ST酒馆功能的特殊类名及简单的使用方法：</p>
  127.         <pre class="code-example">
  128. \`\`\`
  129. &lt;button class="qr-button"&gt;(你的QR按钮名字)&lt;/button&gt;
  130. &lt;textarea class="st-text"&gt;(对应酒馆的输入文本框，输入内容会同步到酒馆的文本框里)&lt;/textarea&gt;
  131. &lt;button class="st-send-button"&gt;(对应酒馆的发送按钮)&lt;/button&gt;
  132. \`\`\`
  133.                 </pre>
  134.                 <p>【注意】通过JavaScript动态插入st-text框的内容同步到st酒馆的输入框需要处理时间，如果需要同步，请添加一个小延迟来确保文本有时间进行同步.</p>
  135.                 <a href="https://discord.com/channels/1134557553011998840/1271783456690409554" target="_blank"> →Discord教程帖指路← 有详细说明与gal界面等模版 </a>
  136.             </div>
  137.         `;
  138.         document.body.appendChild(settingsPanel);
  139.     }
  140.     function createEdgeControls() {
  141.         edgeControls = document.createElement('div');
  142.         edgeControls.id = 'html-injector-edge-controls';
  143.         edgeControls.innerHTML = `
  144.             <div id="html-injector-drag-handle">
  145.                 <div class="drag-dots"></div>
  146.             </div>
  147.             <label class="html-injector-switch">
  148.                 <input type="checkbox" id="edge-injection-toggle">
  149.                 <span class="html-injector-slider"></span>
  150.             </label>
  151.             <button id="html-injector-toggle-panel" class="html-injector-button menu_button">显示面板</button>
  152.         `;
  153.         document.body.appendChild(edgeControls);
  154.         // 创建拖拽点
  155.         const dragDots = edgeControls.querySelector('.drag-dots');
  156.         for (let i = 0; i < 3; i++) {
  157.             const column = document.createElement('div');
  158.             column.style.display = 'flex';
  159.             column.style.flexDirection = 'column';
  160.             column.style.justifyContent = 'space-between';
  161.             column.style.height = '15px'; // 调整高度以适应三个点
  162.             for (let j = 0; j < 2; j++) {
  163.                 const dot = document.createElement('div');
  164.                 dot.style.width = '4px';
  165.                 dot.style.height = '4px';
  166.                 dot.style.borderRadius = '50%';
  167.                 dot.style.backgroundColor = 'var(--smart-theme-body-color)';
  168.                 column.appendChild(dot);
  169.             }
  170.             dragDots.appendChild(column);
  171.         }
  172.         const toggleEdgeControlsButton = document.createElement('button');
  173.         toggleEdgeControlsButton.id = 'toggle-edge-controls';
  174.         toggleEdgeControlsButton.textContent = '>>';
  175.         toggleEdgeControlsButton.style.cssText = `
  176.             position: absolute;
  177.             left: -20px;
  178.             top: 50%;
  179.             transform: translateY(-50%);
  180.             background-color: var(--SmartThemeBlurTintColor, rgba(22, 11, 18, 0.73));
  181.             color: var(--SmartThemeBodyColor, rgba(220, 220, 210, 1));
  182.             border: 1px solid var(--SmartThemeBorderColor, rgba(217, 90, 157, 0.5));
  183.             border-radius: 5px 0 0 5px;
  184.             cursor: pointer;
  185.             padding: 5px;
  186.             user-select: none;
  187.             font-size: 12px;
  188.             height: 60px;
  189.         `;
  190.         edgeControls.appendChild(toggleEdgeControlsButton);
  191.         updateEdgeControlsPosition(savedPosition);
  192.         updateEdgeControlsDisplay();
  193.     }
  194.     
  195.     // ---------------------------------------- 事件监听器 ----------------------------------------
  196.     function addEventListeners() {
  197.         addSettingsPanelListeners();
  198.         addEdgeControlsListeners();
  199.         addGlobalListeners();
  200.         document.getElementsByName('display-mode').forEach(radio => {
  201.             radio.addEventListener('change', handleDisplayModeChange);
  202.         });
  203.     }
  204.     function addSettingsPanelListeners() {
  205.         document.getElementById('activation-mode').addEventListener('change', handleActivationModeChange);
  206.         document.getElementById('custom-start-floor').addEventListener('change', handleCustomStartFloorChange);
  207.         document.getElementById('custom-end-floor').addEventListener('change', handleCustomEndFloorChange);
  208.         document.getElementById('last-n-floors').addEventListener('change', handleLastNFloorsChange);
  209.         document.getElementsByName('display-mode').forEach(radio => {
  210.             radio.addEventListener('change', handleDisplayModeChange);
  211.         });
  212.         document.getElementById('html-injector-close-settings').addEventListener('click', toggleSettingsPanel);
  213.     }
  214.     function addEdgeControlsListeners() {
  215.         document.getElementById('edge-injection-toggle').addEventListener('change', handleToggleChange);
  216.         document.getElementById('html-injector-toggle-panel').addEventListener('click', toggleSettingsPanel);
  217.         document.getElementById('toggle-edge-controls').addEventListener('click', toggleEdgeControls);
  218.         addDragFunctionality();
  219.     }
  220.     function addGlobalListeners() {
  221.         window.addEventListener('message', handleMessage);
  222.         window.addEventListener('resize', handleResize);
  223.         window.matchMedia('(prefers-color-scheme: dark)').addListener(updateAllIframesTheme);
  224.     }
  225.     function addDragFunctionality() {
  226.         const dragHandle = document.getElementById('html-injector-drag-handle');
  227.         const edgeControls = document.getElementById('html-injector-edge-controls');
  228.         let isDragging = false;
  229.         let startY, startTop;
  230.         function handleDragStart(e) {
  231.             isDragging = true;
  232.             startY = e.type.includes('mouse') ? e.clientY : e.touches[0].clientY;
  233.             startTop = edgeControls.offsetTop;
  234.             e.preventDefault();
  235.         }
  236.         function handleDragMove(e) {
  237.             if (!isDragging) return;
  238.             const clientY = e.type.includes('mouse') ? e.clientY : e.touches[0].clientY;
  239.             let newTop = startTop + (clientY - startY);
  240.             newTop = Math.max(0, Math.min(newTop, window.innerHeight - edgeControls.offsetHeight));
  241.             edgeControls.style.top = newTop + 'px';
  242.         }
  243.         function handleDragEnd() {
  244.             isDragging = false;
  245.         }
  246.         dragHandle.addEventListener('mousedown', handleDragStart);
  247.         dragHandle.addEventListener('touchstart', handleDragStart);
  248.         document.addEventListener('mousemove', handleDragMove);
  249.         document.addEventListener('touchmove', handleDragMove);
  250.         document.addEventListener('mouseup', handleDragEnd);
  251.         document.addEventListener('touchend', handleDragEnd);
  252.     }
  253.  
  254.     // ---------------------------------------- 观察器和定时器 ----------------------------------------
  255.     function startObservers() {
  256.         const observer = new MutationObserver(handleDOMMutations);
  257.         observer.observe(document.body, { childList: true, subtree: true });
  258.         setInterval(checkLastMesTextChange, 2000);
  259.     }
  260.     // ---------------------------------------- 核心功能函数 ----------------------------------------
  261.     function injectHtmlCode(specificMesText = null) {
  262.         try {
  263.             let mesTextElements = specificMesText ? [specificMesText] : Array.from(document.getElementsByClassName('mes_text'));
  264.             let targetElements;
  265.             switch (activationMode) {
  266.                 case 'first':
  267.                     targetElements = mesTextElements.slice(0, 1);
  268.                     break;
  269.                 case 'last':
  270.                     targetElements = mesTextElements.slice(-1);
  271.                     break;
  272.                 case 'lastN':
  273.                     targetElements = mesTextElements.slice(-customEndFloor);
  274.                     break;
  275.                 case 'custom': {
  276.                     const start = customStartFloor - 1;
  277.                     const end = customEndFloor === -1 ? undefined : customEndFloor;
  278.                     targetElements = mesTextElements.slice(start, end);
  279.                     break;
  280.                 }
  281.                 default: // 'all'
  282.                     targetElements = mesTextElements;
  283.             }
  284.             for (const mesText of targetElements) {
  285.                 const codeElements = mesText.getElementsByTagName('code');
  286.                 for (const codeElement of codeElements) {
  287.                     let htmlContent = codeElement.innerText.trim();
  288.                     if (htmlContent.startsWith('<') && htmlContent.endsWith('>')) {
  289.                         const iframe = document.createElement('iframe');
  290.                         iframe.style.width = '100%';
  291.                         iframe.style.border = 'none';
  292.                         iframe.style.marginTop = '10px';
  293.                         iframe.srcdoc = `
  294. <html>
  295.     <head>
  296.         <style>
  297.             /* 自定义样式 */
  298.             ::-webkit-scrollbar {
  299.                 width: 8px;
  300.                 height: 8px;
  301.             }
  302.             ::-webkit-scrollbar-track {
  303.                 background: rgba(0, 0, 0, 0.1);
  304.                 border-radius: 4px;
  305.             }
  306.             ::-webkit-scrollbar-thumb {
  307.                 background: rgba(0, 0, 0, 0.3);
  308.                 border-radius: 4px;
  309.             }
  310.             ::-webkit-scrollbar-thumb:hover {
  311.                 background: rgba(0, 0, 0, 0.5);
  312.             }
  313.             [data-theme="dark"] ::-webkit-scrollbar-track {
  314.                 background: rgba(255, 255, 255, 0.1);
  315.             }
  316.             [data-theme="dark"] ::-webkit-scrollbar-thumb {
  317.                 background: rgba(255, 255, 255, 0.3);
  318.             }
  319.             [data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  320.                 background: rgba(255, 255, 255, 0.5);
  321.             }
  322.             .container[data-theme="light"] {
  323.                 --bg-color: rgba(240, 240, 255, 0.1);
  324.                 --text-color: #1e1e1e;
  325.                 --border-color: rgba(139,226,115,0.3);
  326.                 --nav-bg-color: rgba(240,240,255,0.4);
  327.             }
  328.             .container[data-theme="dark"] {
  329.                 --bg-color: rgba(40, 40, 40, 0.2);
  330.                 --text-color: #e0e0e0;
  331.                 --border-color: rgba(74,74,74,0.3);
  332.                 --nav-bg-color: rgba(30,30,30,0.4);
  333.             }
  334.             .container {
  335.                 background-color: var(--bg-color);
  336.                 color: var(--text-color);
  337.             }
  338.             .container .left-nav {
  339.                 background-color: var(--nav-bg-color);
  340.             }
  341.             .container .button, .container .left-nav .section {
  342.                 border: 1px solid var(--border-color);
  343.             }
  344.         </style>
  345.     </head>
  346.     <body>
  347.         <div class="theme-content">
  348.             ${htmlContent}
  349.         </div>
  350.         <script>
  351.             window.addEventListener('load', function() {
  352.                 window.parent.postMessage('loaded', '*');
  353.                 const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
  354.                 function handleThemeChange(e) {
  355.                     document.body.setAttribute('data-theme', e.matches ? 'dark' : 'light');
  356.                     window.parent.postMessage({type: 'themeChange', theme: e.matches ? 'dark' : 'light'}, '*');
  357.                 }
  358.                 darkModeMediaQuery.addListener(handleThemeChange);
  359.                 handleThemeChange(darkModeMediaQuery);
  360.                 document.querySelectorAll('.qr-button').forEach(button => {
  361.                     button.addEventListener('click', function() {
  362.                         const buttonName = this.textContent.trim();
  363.                         window.parent.postMessage({type: 'buttonClick', name: buttonName}, '*');
  364.                     });
  365.                 });
  366.                 document.querySelectorAll('.st-text').forEach(textarea => {
  367.                     textarea.addEventListener('input', function() {
  368.                         window.parent.postMessage({type: 'textInput', text: this.value}, '*');
  369.                     });
  370.                     textarea.addEventListener('change', function() {
  371.                         window.parent.postMessage({type: 'textInput', text: this.value}, '*');
  372.                     });
  373.                     const observer = new MutationObserver((mutations) => {
  374.                         mutations.forEach((mutation) => {
  375.                             if (mutation.type === 'attributes' && mutation.attributeName === 'value') {
  376.                                 window.parent.postMessage({type: 'textInput', text: textarea.value}, '*');
  377.                             }
  378.                         });
  379.                     });
  380.                     observer.observe(textarea, { attributes: true });
  381.                 });
  382.                 document.querySelectorAll('.st-send-button').forEach(button => {
  383.                     button.addEventListener('click', function() {
  384.                         window.parent.postMessage({type: 'sendClick'}, '*');
  385.                     });
  386.                 });
  387.             });
  388.             window.addEventListener('message', function(event) {
  389.                 if (event.data.type === 'themeChange') {
  390.                     document.body.setAttribute('data-theme', event.data.theme);
  391.                 }
  392.             });
  393.         </script>
  394.     </body>
  395. </html>
  396.                         `;
  397.                         if (displayMode === 2) {
  398.                             const details = document.createElement('details');
  399.                             const summary = document.createElement('summary');
  400.                             summary.textContent = '[原代码]';
  401.                             details.appendChild(summary);
  402.                             codeElement.parentNode.insertBefore(details, codeElement);
  403.                             details.appendChild(codeElement);
  404.                         } else if (displayMode === 3) {
  405.                             codeElement.style.display = 'none';
  406.                         }
  407.                         codeElement.parentNode.insertBefore(iframe, codeElement.nextSibling);
  408.                         iframe.onload = function () {
  409.                             adjustIframeHeight(iframe);
  410.                             setTimeout(() => adjustIframeHeight(iframe), 500);
  411.                         };
  412.                         if (iframe.contentWindow) {
  413.                             const resizeObserver = new ResizeObserver(() => adjustIframeHeight(iframe));
  414.                             resizeObserver.observe(iframe.contentWindow.document.body);
  415.                         }
  416.                     }
  417.                 }
  418.             }
  419.         } catch (error) {
  420.             console.error('HTML注入失败:', error);
  421.         }
  422.     }
  423.     function removeInjectedIframes() {
  424.         const iframes = document.querySelectorAll('.mes_text iframe');
  425.         iframes.forEach(iframe => iframe.remove());
  426.         const codeElements = document.querySelectorAll('.mes_text code');
  427.         codeElements.forEach(code => {
  428.             code.style.display = '';
  429.             const details = code.closest('details');
  430.             if (details) {
  431.                 details.parentNode.insertBefore(code, details);
  432.                 details.remove();
  433.             }
  434.         });
  435.     }
  436.     // ---------------------------------------- 辅助函数 ----------------------------------------
  437.     function adjustIframeHeight(iframe) {
  438.         try {
  439.             if (iframe.contentWindow.document.body) {
  440.                 const height = iframe.contentWindow.document.documentElement.scrollHeight;
  441.                 iframe.style.height = (height + 5) + 'px';
  442.             }
  443.         } catch (error) {
  444.             console.error('调整iframe高度失败:', error);
  445.         }
  446.     }
  447.     function getSystemTheme() {
  448.         return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  449.     }
  450.     function updateAllIframesTheme() {
  451.         const iframes = document.querySelectorAll('.mes_text iframe');
  452.         iframes.forEach(iframe => {
  453.             try {
  454.                 if (iframe.contentWindow) {
  455.                     iframe.contentWindow.postMessage({ type: 'themeChange', theme: getSystemTheme() }, '*');
  456.                 }
  457.             } catch (error) {
  458.                 console.error('更新iframe主题失败:', error);
  459.             }
  460.         });
  461.     }
  462.     function updateEdgeControlsPosition(position) {
  463.         if (!edgeControls) return;
  464.         switch (position) {
  465.             case 'top-right':
  466.                 edgeControls.style.top = '20vh';
  467.                 edgeControls.style.transform = 'none';
  468.                 break;
  469.             case 'right-three-quarters':
  470.                 edgeControls.style.top = '75vh';
  471.                 edgeControls.style.transform = 'none';
  472.                 break;
  473.             case 'right-middle':
  474.                 edgeControls.style.top = '50%';
  475.                 edgeControls.style.transform = 'translateY(-50%)';
  476.                 break;
  477.         }
  478.         edgeControls.style.right = isEdgeControlsCollapsed ? '-100px' : '0';
  479.         GM_setValue('edgeControlsPosition', position);
  480.     }
  481.     function updateEdgeControlsDisplay() {
  482.         if (!edgeControls) return;
  483.         edgeControls.style.right = isEdgeControlsCollapsed ? '-100px' : '0';
  484.         const toggleButton = document.getElementById('toggle-edge-controls');
  485.         if (toggleButton) {
  486.             toggleButton.textContent = isEdgeControlsCollapsed ? '<<' : '>>';
  487.         }
  488.     }   
  489.     function toggleSettingsPanel() {
  490.         const isVisible = settingsPanel.style.display === 'block';
  491.         settingsPanel.style.display = isVisible ? 'none' : 'block';
  492.         document.getElementById('html-injector-toggle-panel').textContent = isVisible ? '显示面板' : '隐藏面板';
  493.     }
  494.     function toggleEdgeControls() {
  495.         isEdgeControlsCollapsed = !isEdgeControlsCollapsed;
  496.         GM_setValue('isEdgeControlsCollapsed', isEdgeControlsCollapsed);
  497.         updateEdgeControlsDisplay();
  498.     }
  499.     function handleResize() {
  500.         updateEdgeControlsPosition(savedPosition);
  501.     }
  502.     function handleActivationModeChange() {
  503.         const customSettings = document.getElementById('custom-floor-settings');
  504.         const lastNSettings = document.getElementById('last-n-settings');
  505.         customSettings.style.display = this.value === 'custom' ? 'block' : 'none';
  506.         lastNSettings.style.display = this.value === 'lastN' ? 'block' : 'none';
  507.         activationMode = this.value;
  508.         GM_setValue('activationMode', activationMode);
  509.         if (isInjectionEnabled) {
  510.             removeInjectedIframes();
  511.             injectHtmlCode();
  512.         }
  513.     }
  514.     function handleCustomStartFloorChange() {
  515.         customStartFloor = parseInt(this.value);
  516.         GM_setValue('customStartFloor', customStartFloor);
  517.         if (isInjectionEnabled) {
  518.             removeInjectedIframes();
  519.             injectHtmlCode();
  520.         }
  521.     }
  522.     function handleCustomEndFloorChange() {
  523.         customEndFloor = parseInt(this.value);
  524.         GM_setValue('customEndFloor', customEndFloor);
  525.         if (isInjectionEnabled) {
  526.             removeInjectedIframes();
  527.             injectHtmlCode();
  528.         }
  529.     }
  530.     function handleLastNFloorsChange() {
  531.         customEndFloor = parseInt(this.value);
  532.         GM_setValue('customEndFloor', customEndFloor);
  533.         if (isInjectionEnabled) {
  534.             removeInjectedIframes();
  535.             injectHtmlCode();
  536.         }
  537.     }
  538.     function handleDisplayModeChange(event) {
  539.         displayMode = parseInt(event.target.value);
  540.         GM_setValue('displayMode', displayMode);
  541.         if (isInjectionEnabled) {
  542.             removeInjectedIframes();
  543.             injectHtmlCode();
  544.         }
  545.     }
  546.     function handleToggleChange(e) {
  547.         isInjectionEnabled = e.target.checked;
  548.         document.getElementById('edge-injection-toggle').checked = isInjectionEnabled;
  549.         if (isInjectionEnabled) {
  550.             injectHtmlCode();
  551.         } else {
  552.             removeInjectedIframes();
  553.         }
  554.     }
  555.     function handleMessage(event) {
  556.         try {
  557.             if (event.data === 'loaded') {
  558.                 const iframes = document.querySelectorAll('.mes_text iframe');
  559.                 iframes.forEach(iframe => {
  560.                     if (iframe.contentWindow === event.source) {
  561.                         adjustIframeHeight(iframe);
  562.                     }
  563.                 });
  564.             } else if (event.data.type === 'buttonClick') {
  565.                 const buttonName = event.data.name;
  566.                 jQuery('.qr--button.menu_button').each(function () {
  567.                     if (jQuery(this).find('.qr--button-label').text().trim() === buttonName) {
  568.                         jQuery(this).click();
  569.                         return false;
  570.                     }
  571.                 });
  572.             } else if (event.data.type === 'textInput') {
  573.                 const sendTextarea = document.getElementById('send_textarea');
  574.                 if (sendTextarea) {
  575.                     sendTextarea.value = event.data.text;
  576.                     sendTextarea.dispatchEvent(new Event('input', { bubbles: true }));
  577.                     sendTextarea.dispatchEvent(new Event('change', { bubbles: true }));
  578.                 }
  579.             } else if (event.data.type === 'sendClick') {
  580.                 const sendButton = document.getElementById('send_but');
  581.                 if (sendButton) {
  582.                     sendButton.click();
  583.                 }
  584.             }
  585.         } catch (error) {
  586.             console.error('处理消息失败:', error);
  587.         }
  588.     }
  589.     function handleDOMMutations(mutations) {
  590.         for (const mutation of mutations) {
  591.             if (mutation.type === 'childList') {
  592.                 for (const node of mutation.addedNodes) {
  593.                     if (node.nodeType === Node.ELEMENT_NODE &&
  594.                         (node.classList.contains('mes_text') || node.querySelector('.mes_text'))) {
  595.                         if (isInjectionEnabled) {
  596.                             injectHtmlCode();
  597.                         }
  598.                         break;
  599.                     }
  600.                 }
  601.             }
  602.         }
  603.     }
  604.     function checkLastMesTextChange() {
  605.         const mesTextElements = document.getElementsByClassName('mes_text');
  606.         if (mesTextElements.length > 0) {
  607.             const lastMesText = mesTextElements[mesTextElements.length - 1];
  608.             const codeElement = lastMesText.querySelector('code');
  609.             if (codeElement) {
  610.                 const currentContent = codeElement.innerText.trim();
  611.                 const injectedIframe = lastMesText.querySelector('iframe');
  612.                 if (currentContent !== lastMesTextContent || (isInjectionEnabled && !injectedIframe)) {
  613.                     lastMesTextContent = currentContent;
  614.                     if (isInjectionEnabled) {
  615.                         if (injectedIframe) {
  616.                             injectedIframe.remove();
  617.                         }
  618.                         injectHtmlCode(lastMesText);
  619.                         const newIframe = lastMesText.querySelector('iframe');
  620.                         if (newIframe) {
  621.                             newIframe.onload = function () {
  622.                                 const currentTheme = getSystemTheme();
  623.                                 newIframe.contentWindow.postMessage({ type: 'themeChange', theme: currentTheme }, '*');
  624.                             };
  625.                         }
  626.                     }
  627.                 }
  628.             } else {
  629.                 if (lastMesTextContent !== '') {
  630.                     lastMesTextContent = '';
  631.                     const injectedIframe = lastMesText.querySelector('iframe');
  632.                     if (injectedIframe) {
  633.                         injectedIframe.remove();
  634.                     }
  635.                 }
  636.             }
  637.         }
  638.     }
  639.     // ---------------------------------------- 样式函数 ----------------------------------------
  640.     function addStyles() {
  641.         const style = document.createElement('style');
  642.         style.textContent = `
  643.             /* 通用变量 */
  644.             :root {
  645.                 --smart-theme-blur-tint: var(--SmartThemeBlurTintColor, rgba(22, 11, 18, 0.73));
  646.                 --smart-theme-body-color: var(--SmartThemeBodyColor, rgba(220, 220, 210, 1));
  647.                 --smart-theme-border-color: var(--SmartThemeBorderColor, rgba(217, 90, 157, 0.5));
  648.                 --smart-theme-button-bg: var(--SmartThemeButtonBG, rgba(74, 74, 74, 0.5));
  649.                 --smart-theme-button-hover-bg: var(--SmartThemeButtonHoverBG, rgba(90, 90, 90, 0.7));
  650.                 --smart-theme-blur-strength: var(--SmartThemeBlurStrength, 6px);
  651.             }
  652.             /* 边缘控制面板样式 */
  653.             #html-injector-edge-controls {
  654.                 position: fixed;
  655.                 right: -80px;
  656.                 top: 20vh;
  657.                 transition: right 0.3s ease-in-out;
  658.                 background-color: var(--smart-theme-blur-tint);
  659.                 border: 1px solid var(--smart-theme-border-color);
  660.                 border-radius: 10px 0 0 10px;
  661.                 padding: 10px;
  662.                 z-index: 9999;
  663.                 display: flex;
  664.                 flex-direction: column;
  665.                 align-items: center;
  666.                 width: 100px;
  667.                 color: var(--smart-theme-body-color);
  668.                 backdrop-filter: blur(var(--smart-theme-blur-strength));
  669.             }
  670.             /* 开关样式 */
  671.             #html-injector-edge-controls .html-injector-switch {
  672.                 position: relative;
  673.                 display: inline-block;
  674.                 width: 50px;
  675.                 height: 24px;
  676.             }
  677.             #html-injector-edge-controls .html-injector-switch input {
  678.                 opacity: 0;
  679.                 width: 0;
  680.                 height: 0;
  681.             }
  682.             #html-injector-edge-controls .html-injector-slider {
  683.                 position: absolute;
  684.                 cursor: pointer;
  685.                 top: 0;
  686.                 left: 0;
  687.                 right: 0;
  688.                 bottom: 0;
  689.                 background-color: rgba(128, 128, 128, 0.3);
  690.                 transition: .2s;
  691.                 border-radius: 24px;
  692.             }
  693.             #html-injector-edge-controls .html-injector-slider:before {
  694.                 position: absolute;
  695.                 content: "";
  696.                 height: 18px;
  697.                 width: 18px;
  698.                 left: 3px;
  699.                 bottom: 3px;
  700.                 background-color: var(--smart-theme-body-color);
  701.                 transition: .2s;
  702.                 border-radius: 50%;
  703.             }
  704.             #html-injector-edge-controls .html-injector-switch input:checked + .html-injector-slider {
  705.                 background-color: var(--smart-theme-border-color);
  706.             }
  707.             #html-injector-edge-controls .html-injector-switch input:checked + .html-injector-slider:before {
  708.                 transform: translateX(26px);
  709.             }
  710.             /* 按钮样式 */
  711.             #html-injector-edge-controls .html-injector-button {
  712.                 font-size: 14px;
  713.                 padding: 5px 10px;
  714.                 margin-top: 10px;
  715.                 width: 100%;
  716.                 text-align: center;
  717.                 white-space: nowrap;
  718.                 overflow: hidden;
  719.                 text-overflow: ellipsis;
  720.                 background-color: var(--smart-theme-button-bg);
  721.                 color: var(--smart-theme-body-color);
  722.                 border: 1px solid var(--smart-theme-border-color);
  723.                 border-radius: 5px;
  724.                 transition: background-color 0.3s, color 0.3s;
  725.             }
  726.             #html-injector-edge-controls .html-injector-button:hover {
  727.                 background-color: var(--smart-theme-button-hover-bg);
  728.             }
  729.             /* 拖拽句柄样式 */
  730.             #html-injector-edge-controls #html-injector-drag-handle {
  731.                 width: 100%;
  732.                 height: 20px;
  733.                 background-color: var(--smart-theme-border-color);
  734.                 cursor: ns-resize;
  735.                 margin-bottom: 10px;
  736.                 border-radius: 5px 5px 0 0;
  737.                 display: flex;
  738.                 justify-content: center;
  739.                 align-items: center;
  740.             }
  741.             #html-injector-edge-controls #html-injector-drag-handle .drag-dots {
  742.                 display: flex;
  743.                 justify-content: space-between;
  744.                 width: 20px;
  745.                 height: 15px;
  746.             }
  747.             #html-injector-edge-controls #html-injector-drag-handle .drag-dots > div {
  748.                 display: flex;
  749.                 flex-direction: column;
  750.                 justify-content: space-between;
  751.             }
  752.             #html-injector-edge-controls #html-injector-drag-handle .drag-dots > div > div {
  753.                 width: 4px;
  754.                 height: 4px;
  755.                 border-radius: 50%;
  756.                 background-color: var(--smart-theme-body-color);
  757.             }
  758.             #html-injector-edge-controls #html-injector-drag-handle:hover .drag-dots > div > div {
  759.                 background-color: var(--smart-theme-button-hover-bg);
  760.             }
  761.             
  762.             /* 设置面板样式 */
  763.             #html-injector-settings {
  764.                 position: fixed;
  765.                 top: 3vh;
  766.                 left: 50%;
  767.                 transform: translateX(-50%);
  768.                 width: 90%;
  769.                 max-width: 800px;
  770.                 height: auto;
  771.                 max-height: 90vh;
  772.                 background-color: var(--smart-theme-blur-tint);
  773.                 border: 1px solid var(--smart-theme-border-color);
  774.                 border-radius: 10px;
  775.                 padding: 20px;
  776.                 z-index: 10000;
  777.                 color: var(--smart-theme-body-color);
  778.                 backdrop-filter: blur(10px);
  779.                 display: flex;
  780.                 flex-direction: column;
  781.                 overflow-y: auto;
  782.             }
  783.             #html-injector-settings-header {
  784.                 display: flex;
  785.                 justify-content: space-between;
  786.                 align-items: center;
  787.                 padding-bottom: 15px;
  788.                 border-bottom: 1px solid var(--smart-theme-border-color);
  789.             }
  790.             #html-injector-close-settings {
  791.                 cursor: pointer;
  792.                 font-size: 24px;
  793.             }
  794.             #settings-content {
  795.                 flex-grow: 1;
  796.                 overflow-y: auto;
  797.                 padding-right: 10px;
  798.                 margin-top: 15px;
  799.                 max-height: calc(85vh - 150px);
  800.             }
  801.             .settings-footer {
  802.                 margin-top: 15px;
  803.                 padding-top: 15px;
  804.                 border-top: 1px solid var(--smart-theme-border-color);
  805.             }
  806.             /* 滚动条样式 */
  807.             #settings-content::-webkit-scrollbar {
  808.                 width: 8px;
  809.             }
  810.             #settings-content::-webkit-scrollbar-track {
  811.                 background: rgba(0, 0, 0, 0.1);
  812.                 border-radius: 4px;
  813.             }
  814.             #settings-content::-webkit-scrollbar-thumb {
  815.                 background: rgba(255, 255, 255, 0.3);
  816.                 border-radius: 4px;
  817.             }
  818.             #settings-content::-webkit-scrollbar-thumb:hover {
  819.                 background: rgba(255, 255, 255, 0.5);
  820.             }
  821.             /* 表单元素样式 */
  822.             #html-injector-settings #settings-content label {
  823.                 display: block;
  824.                 margin: 10px 0;
  825.                 color: var(--smart-theme-body-color);
  826.             }
  827.             #html-injector-settings #settings-content input[type="radio"] {
  828.                 margin-right: 5px;
  829.             }
  830.             #html-injector-settings #settings-content input[type="number"],
  831.             #html-injector-settings #activation-mode,
  832.             #html-injector-settings .theme-element {
  833.                 background-color: var(--smart-theme-blur-tint);
  834.                 color: var(--smart-theme-body-color);
  835.                 border: 1px solid var(--smart-theme-border-color);
  836.                 padding: 5px;
  837.                 border-radius: 3px;
  838.             }
  839.             #html-injector-settings #settings-content input[type="number"] {
  840.                 width: 50px;
  841.                 margin: 0 5px;
  842.             }
  843.             #html-injector-settings #settings-content input[type="number"]:focus,
  844.             #html-injector-settings #activation-mode:focus,
  845.             #html-injector-settings .theme-element:focus {
  846.                 outline: none;
  847.                 border-color: #0e639c;
  848.             }
  849.             #html-injector-settings .theme-element option {
  850.                 background-color: var(--smart-theme-blur-tint);
  851.             }
  852.             /* 其他样式 */
  853.             #html-injector-settings .settings-section {
  854.                 margin-bottom: 15px;
  855.             }
  856.             #html-injector-settings .settings-subtitle {
  857.                 font-size: 14px;
  858.                 margin: 0 0 5px 0;
  859.                 color: var(--smart-theme-body-color);
  860.             }
  861.             #html-injector-settings .settings-option {
  862.                 display: block;
  863.                 margin: 5px 0;
  864.                 font-size: 13px;
  865.             }
  866.             #html-injector-settings .settings-select {
  867.                 width: 100%;
  868.                 margin-bottom: 5px;
  869.             }
  870.             #html-injector-settings .settings-subsection {
  871.                 margin-top: 5px;
  872.                 padding-left: 10px;
  873.             }
  874.             #html-injector-settings .settings-note {
  875.                 font-size: 12px;
  876.                 color: #858585;
  877.                 margin: 2px 0;
  878.             }
  879.             #html-injector-settings .settings-footer {
  880.                 font-size: 12px;
  881.                 color: #858585;
  882.                 margin-top: 15px;
  883.             }
  884.             #html-injector-settings .code-example {
  885.                 background-color: var(--smart-theme-blur-tint);
  886.                 padding: 10px;
  887.                 border-radius: 3px;
  888.                 overflow-x: auto;
  889.                 font-size: 12px;
  890.                 color: var(--smart-theme-body-color);
  891.             }
  892.             /* 响应式设计 */
  893.             @media (max-width: 1000px) {
  894.                 #html-injector-settings {
  895.                     max-width: none;
  896.                     height: 50vh;
  897.                     max-height: none;
  898.                 }
  899.                 #settings-content {
  900.                     max-height: calc(80vh - 180px);
  901.                 }
  902.                 #html-injector-edge-controls {
  903.                     font-size: 10px;
  904.                     min-width: 100px;
  905.                 }
  906.                 #html-injector-edge-controls button {
  907.                     font-size: 12px;
  908.                     padding: 6px 10px;
  909.                 }
  910.                 #html-injector-edge-controls .html-injector-switch {
  911.                     width: 50px;
  912.                     height: 28px;
  913.                 }
  914.                 #html-injector-edge-controls .html-injector-slider:before {
  915.                     height: 20px;
  916.                     width: 20px;
  917.                 }
  918.                 #html-injector-edge-controls .html-injector-switch input:checked + .html-injector-slider:before {
  919.                     transform: translateX(22px);
  920.                 }
  921.             }
  922.         `;
  923.         document.head.appendChild(style);
  924.     
  925.     }
  926.     // ---------------------------------------- 初始化调用 ----------------------------------------
  927.     if (document.readyState === 'loading') {
  928.         document.addEventListener('DOMContentLoaded', initScript);
  929.     } else {
  930.         initScript();
  931.     }
  932. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

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