☰

Torn.com Enhanced Chat Buttons V2

Add customizable buttons to Torn.com chat with enhanced UI and features

当前为 2024-05-27 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Torn.com Enhanced Chat Buttons V2
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2.0
  5. // @description  Add customizable buttons to Torn.com chat with enhanced UI and features
  6. // @author       Created by Callz [2188704], updated by Weav3r [1853324]
  7. // @match        https://www.torn.com/*
  8. // @grant        GM_setClipboard
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     const buttonCSS = `
  15.         .custom-chat-button {
  16.             background-color: #007BFF;
  17.             color: white;
  18.             padding: 2px 7px;
  19.             text-align: center;
  20.             text-decoration: none;
  21.             display: inline-block;
  22.             font-size: 14px;
  23.             margin: 4px 6px;
  24.             cursor: pointer;
  25.             border-radius: 5px;
  26.             border: none;
  27.             transition: transform 0.1s ease, box-shadow 0.1s ease;
  28.             min-width: 80px;
  29.             overflow: hidden;
  30.             white-space: nowrap;
  31.         }
  32.  
  33.         .custom-chat-button:active {
  34.             transform: scale(0.95);
  35.             box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  36.         }
  37.  
  38.         .custom-chat-button.recent {
  39.             border: 2px solid #FFD700;
  40.             box-shadow: 0 0 5px rgba(255, 215, 0, 0.8);
  41.         }
  42.  
  43.         .custom-ui-panel {
  44.             position: fixed;
  45.             top: 50%;
  46.             left: 50%;
  47.             transform: translate(-50%, -50%);
  48.             background-color: #f5f5f5;
  49.             padding: 10px;
  50.             color: black;
  51.             border-radius: 10px;
  52.             box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  53.             z-index: 9999999999;
  54.             width: 90%;
  55.             max-width: 500px;
  56.             box-sizing: border-box;
  57.             max-height: 90vh;
  58.             overflow: auto;
  59.         }
  60.  
  61.         .custom-ui-panel h3 {
  62.             font-size: 20px;
  63.             margin-bottom: 10px;
  64.             text-align: center;
  65.         }
  66.  
  67.         .custom-ui-panel label {
  68.             font-size: 14px;
  69.             margin-bottom: 5px;
  70.             display: block;
  71.         }
  72.  
  73.         .custom-ui-panel input[type="text"],
  74.         .custom-ui-panel select,
  75.         .custom-ui-panel textarea {
  76.             width: calc(100% - 12px);
  77.             padding: 5px;
  78.             margin-bottom: 10px;
  79.             border: 1px solid #ccc;
  80.             border-radius: 5px;
  81.             font-size: 14px;
  82.         }
  83.  
  84.         .custom-ui-panel input[type="color"] {
  85.             padding: 0;
  86.             margin-top: 5px;
  87.         }
  88.  
  89.         .custom-ui-panel button {
  90.             background-color: #007BFF;
  91.             color: white;
  92.             border: none;
  93.             padding: 8px 12px;
  94.             border-radius: 5px;
  95.             cursor: pointer;
  96.             margin: 5px;
  97.             font-size: 14px;
  98.             transition: background-color 0.3s ease;
  99.         }
  100.  
  101.         .custom-ui-panel button#close-ui {
  102.             background-color: #ccc;
  103.         }
  104.  
  105.         .custom-ui-panel button#close-ui:hover {
  106.             background-color: #999;
  107.         }
  108.  
  109.         .custom-ui-panel textarea {
  110.             height: 60px;
  111.             resize: vertical;
  112.             position: relative;
  113.         }
  114.  
  115.         .custom-ui-panel hr {
  116.             margin: 10px 0;
  117.             border: 0;
  118.             border-top: 1px solid #ccc;
  119.         }
  120.  
  121.         .char-counter {
  122.             position: absolute;
  123.             bottom: 10px;
  124.             right: 10px;
  125.             font-size: 12px;
  126.             color: #999;
  127.         }
  128.  
  129.         #chat-config-button {
  130.            color: green;
  131.        }
  132.  
  133.         #button-configs {
  134.             max-height: 400px;
  135.             overflow-y: auto;
  136.             margin-bottom: 10px;
  137.         }
  138.  
  139.         @media (max-width: 600px) {
  140.             .custom-ui-panel {
  141.                 width: 95%;
  142.                 max-width: none;
  143.                 padding: 8px;
  144.             }
  145.  
  146.             .custom-ui-panel h3 {
  147.                 font-size: 18px;
  148.             }
  149.  
  150.             .custom-ui-panel label,
  151.             .custom-ui-panel button {
  152.                 font-size: 12px;
  153.             }
  154.  
  155.             .custom-ui-panel input[type="text"],
  156.             .custom-ui-panel select,
  157.             .custom-ui-panel textarea {
  158.                 font-size: 12px;
  159.             }
  160.  
  161.             .custom-ui-panel button {
  162.                 padding: 6px 10px;
  163.             }
  164.  
  165.             .char-counter {
  166.                 font-size: 10px;
  167.             }
  168.         }
  169.  
  170.         .tabs {
  171.             display: flex;
  172.             margin-bottom: 10px;
  173.         }
  174.  
  175.         .tab {
  176.             flex: 1;
  177.             padding: 10px;
  178.             cursor: pointer;
  179.             text-align: center;
  180.             background-color: #e9e9e9;
  181.             border: 1px solid #ccc;
  182.             border-bottom: none;
  183.             border-radius: 10px 10px 0 0;
  184.         }
  185.  
  186.         .tab.settings-tab {
  187.             flex: 0.2;
  188.             padding: 10px;
  189.             cursor: pointer;
  190.             text-align: center;
  191.             background-color: #e9e9e9;
  192.             border: 1px solid #ccc;
  193.             border-bottom: none;
  194.             border-radius: 10px 10px 0 0;
  195.         }
  196.  
  197.         .tab.active {
  198.             background-color: #fff;
  199.             border-bottom: 1px solid #fff;
  200.         }
  201.  
  202.         .tab-content {
  203.             display: none;
  204.         }
  205.  
  206.         .tab-content.active {
  207.             display: block;
  208.         }
  209.  
  210.         .custom-ui-panel.config-list-tab-active {
  211.             max-height: 80vh;
  212.         }
  213.  
  214.         .search-container {
  215.             display: flex;
  216.             margin-bottom: 10px;
  217.         }
  218.  
  219.         .search-container input[type="text"] {
  220.             flex: 3;
  221.             padding: 5px;
  222.             margin-right: 5px;
  223.         }
  224.  
  225.         .search-container select {
  226.             flex: 1;
  227.             padding: 5px;
  228.         }
  229.  
  230.         .highlight {
  231.             background-color: yellow;
  232.         }
  233.     `;
  234.  
  235.       const conditions = {
  236.         TradeChat: chatBox => chatBox.querySelector('.chat-box-header__name___jIjjM').textContent === 'Trade',
  237.         HospitalChat: chatBox => chatBox.querySelector('.chat-box-header__name___jIjjM').textContent === 'Hospital',
  238.         FactionChat: chatBox => chatBox.querySelector('.chat-box-header__name___jIjjM').textContent === 'Faction',
  239.         CompanyChat: chatBox => chatBox.querySelector('.chat-box-header__name___jIjjM').textContent === 'Company',
  240.         GlobalChat: chatBox => chatBox.querySelector('.chat-box-header__name___jIjjM').textContent === 'Global',
  241.         UserChat: chatBox => chatBox.querySelector('.chat-box-header__options___nTsMU'),
  242.     };
  243.  
  244.     function addCSS(cssString) {
  245.         const style = document.createElement('style');
  246.         style.textContent = cssString;
  247.         document.head.append(style);
  248.     }
  249.  
  250.     function saveRecentButtonInfo(buttonText, chatBoxName) {
  251.         localStorage.setItem('recentButtonInfo', JSON.stringify({ buttonText, chatBoxName }));
  252.     }
  253.  
  254.     function clearRecentButtonInfo() {
  255.         localStorage.removeItem('recentButtonInfo');
  256.     }
  257.  
  258.     function getButtonConfigurations() {
  259.         return JSON.parse(localStorage.getItem('chatButtonConfig')) || { buttons: [] };
  260.     }
  261.  
  262.     function saveButtonConfigurations(config) {
  263.         localStorage.setItem('chatButtonConfig', JSON.stringify(config));
  264.     }
  265.  
  266.     function createUIPanel() {
  267.         const panel = document.createElement('div');
  268.         panel.className = 'custom-ui-panel';
  269.         panel.innerHTML = `
  270.             <div class="tabs">
  271.                 <div class="tab active" data-tab="config-list-tab">Configured Buttons</div>
  272.                 <div class="tab" data-tab="config-edit-tab">Create/Edit Button</div>
  273.                 <div class="tab settings-tab" data-tab="config-settings-tab">⚙️</div>
  274.             </div>
  275.             <div id="config-list-tab" class="tab-content active">
  276.                 <div class="search-container">
  277.                     <input type="text" id="search-input" placeholder="Search...">
  278.                     <select id="search-select">
  279.                         <option value="buttonText">Text</option>
  280.                         <option value="condition">Condition</option>
  281.                         <option value="text">Message</option>
  282.                     </select>
  283.                 </div>
  284.                 <div id="button-configs"></div>
  285.             </div>
  286.             <div id="config-edit-tab" class="tab-content">
  287.                 <div>
  288.                     <label for="button-text">Button Text</label>
  289.                     <input type="text" id="button-text" placeholder="Button Text">
  290.  
  291.                     <label for="button-color">Background Color</label>
  292.                     <input type="color" id="button-color">
  293.  
  294.                     <label for="button-condition">Condition</label>
  295.                     <select id="button-condition">
  296.                         <option value="TradeChat">Trade Chat</option>
  297.                         <option value="HospitalChat">Hospital Chat</option>
  298.                         <option value="FactionChat">Faction Chat</option>
  299.                         <option value="CompanyChat">Company Chat</option>
  300.                         <option value="GlobalChat">Global Chat</option>
  301.                         <option value="UserChat">User Chat</option>
  302.                     </select>
  303.  
  304.                     <label for="button-text-content">Message</label>
  305.                     <textarea id="button-text-content" placeholder="Message content"></textarea>
  306.                     <div class="char-counter" id="char-counter">0</div>
  307.  
  308.                     <button id="add-button">Add Button</button>
  309.                     <button id="edit-button" style="display: none;">Save Button</button>
  310.                 </div>
  311.             </div>
  312.             <div id="config-settings-tab" class="tab-content">
  313.                 <button id="import-button">Import Config</button>
  314.                 <button id="export-button">Export Config</button>
  315.             </div>
  316.             <button id="close-ui">Close</button>
  317.         `;
  318.         document.body.appendChild(panel);
  319.  
  320.         document.querySelectorAll('.tab').forEach(tab => {
  321.             tab.addEventListener('click', () => {
  322.                 switchTab(tab.dataset.tab);
  323.             });
  324.         });
  325.  
  326.         document.getElementById('add-button').addEventListener('click', addNewButtonConfig);
  327.         document.getElementById('edit-button').addEventListener('click', editButtonConfig);
  328.         document.getElementById('close-ui').addEventListener('click', closeUI);
  329.         document.getElementById('import-button').addEventListener('click', importConfig);
  330.         document.getElementById('export-button').addEventListener('click', exportConfig);
  331.         document.getElementById('button-text-content').addEventListener('input', updateCharCounter);
  332.         document.getElementById('search-input').addEventListener('input', filterButtonConfigs);
  333.         populateButtonConfigs();
  334.     }
  335.  
  336.     function switchTab(tabId) {
  337.         document.querySelectorAll('.tab, .tab-content').forEach(el => {
  338.             el.classList.remove('active');
  339.         });
  340.         document.querySelector(`[data-tab="${tabId}"]`).classList.add('active');
  341.         document.getElementById(tabId).classList.add('active');
  342.  
  343.         const panel = document.querySelector('.custom-ui-panel');
  344.         if (tabId === 'config-list-tab') {
  345.             panel.classList.add('config-list-tab-active');
  346.         } else {
  347.             panel.classList.remove('config-list-tab-active');
  348.         }
  349.     }
  350.  
  351.     function populateButtonConfigs() {
  352.         const configsContainer = document.getElementById('button-configs');
  353.         configsContainer.innerHTML = '';
  354.         const configs = getButtonConfigurations();
  355.  
  356.         configs.buttons.forEach((buttonConfig, index) => {
  357.             const configDiv = document.createElement('div');
  358.             configDiv.className = 'draggable';
  359.             configDiv.dataset.index = index;
  360.             configDiv.innerHTML = `
  361.                 <div><strong>Text:</strong> ${buttonConfig.buttonText}</div>
  362.                 <div><strong>Color:</strong> ${buttonConfig.backgroundColor}</div>
  363.                 <div><strong>Condition:</strong> ${buttonConfig.condition}</div>
  364.                 <div><strong>Message:</strong> ${buttonConfig.text}</div>
  365.             `;
  366.  
  367.             const editButton = document.createElement('button');
  368.             editButton.textContent = 'Edit';
  369.             editButton.addEventListener('click', () => {
  370.                 selectForEdit(index);
  371.                 switchTab('config-edit-tab');
  372.             });
  373.             configDiv.appendChild(editButton);
  374.  
  375.             const deleteButton = document.createElement('button');
  376.             deleteButton.textContent = 'Delete';
  377.             deleteButton.addEventListener('click', () => deleteButtonConfig(index));
  378.             configDiv.appendChild(deleteButton);
  379.  
  380.             const moveUpButton = document.createElement('button');
  381.             moveUpButton.textContent = 'Up';
  382.             moveUpButton.addEventListener('click', () => moveButtonConfig(index, -1));
  383.             configDiv.appendChild(moveUpButton);
  384.  
  385.             const moveDownButton = document.createElement('button');
  386.             moveDownButton.textContent = 'Down';
  387.             moveDownButton.addEventListener('click', () => moveButtonConfig(index, 1));
  388.             configDiv.appendChild(moveDownButton);
  389.  
  390.             configsContainer.appendChild(configDiv);
  391.         });
  392.     }
  393.  
  394.     function filterButtonConfigs() {
  395.         const searchInput = document.getElementById('search-input').value.toLowerCase();
  396.         const searchBy = document.getElementById('search-select').value;
  397.         const configs = getButtonConfigurations();
  398.  
  399.         const filteredConfigs = configs.buttons.filter(buttonConfig => {
  400.             const fieldValue = buttonConfig[searchBy].toLowerCase();
  401.             return fieldValue.includes(searchInput);
  402.         });
  403.  
  404.         const configsContainer = document.getElementById('button-configs');
  405.         configsContainer.innerHTML = '';
  406.  
  407.         filteredConfigs.forEach((buttonConfig, index) => {
  408.             const configDiv = document.createElement('div');
  409.             configDiv.className = 'draggable';
  410.             configDiv.dataset.index = index;
  411.             configDiv.innerHTML = `
  412.                 <div><strong>Text:</strong> ${buttonConfig.buttonText}</div>
  413.                 <div><strong>Color:</strong> ${buttonConfig.backgroundColor}</div>
  414.                 <div><strong>Condition:</strong> ${buttonConfig.condition}</div>
  415.                 <div><strong>Message:</strong> ${buttonConfig.text}</div>
  416.             `;
  417.  
  418.             const editButton = document.createElement('button');
  419.             editButton.textContent = 'Edit';
  420.             editButton.addEventListener('click', () => {
  421.                 selectForEdit(index);
  422.                 switchTab('config-edit-tab');
  423.             });
  424.             configDiv.appendChild(editButton);
  425.  
  426.             const deleteButton = document.createElement('button');
  427.             deleteButton.textContent = 'Delete';
  428.             deleteButton.addEventListener('click', () => deleteButtonConfig(index));
  429.             configDiv.appendChild(deleteButton);
  430.  
  431.             const moveUpButton = document.createElement('button');
  432.             moveUpButton.textContent = 'Up';
  433.             moveUpButton.addEventListener('click', () => moveButtonConfig(index, -1));
  434.             configDiv.appendChild(moveUpButton);
  435.  
  436.             const moveDownButton = document.createElement('button');
  437.             moveDownButton.textContent = 'Down';
  438.             moveDownButton.addEventListener('click', () => moveButtonConfig(index, 1));
  439.             configDiv.appendChild(moveDownButton);
  440.  
  441.             configsContainer.appendChild(configDiv);
  442.         });
  443.     }
  444.  
  445.     function selectForEdit(index) {
  446.         const config = getButtonConfigurations().buttons[index];
  447.         document.getElementById('button-text').value = config.buttonText;
  448.         document.getElementById('button-color').value = config.backgroundColor;
  449.         document.getElementById('button-condition').value = config.condition;
  450.         document.getElementById('button-text-content').value = config.text;
  451.  
  452.         document.getElementById('add-button').style.display = 'block';
  453.         document.getElementById('edit-button').style.display = 'block';
  454.         document.getElementById('edit-button').setAttribute('data-edit-index', index);
  455.     }
  456.  
  457.     function deleteButtonConfig(index) {
  458.         const config = getButtonConfigurations();
  459.         config.buttons.splice(index, 1);
  460.         saveButtonConfigurations(config);
  461.         populateButtonConfigs();
  462.     }
  463.  
  464.     function moveButtonConfig(index, direction) {
  465.         const config = getButtonConfigurations();
  466.         const newIndex = index + direction;
  467.  
  468.         if (newIndex >= 0 && newIndex < config.buttons.length) {
  469.             const buttonConfig = config.buttons.splice(index, 1)[0];
  470.             config.buttons.splice(newIndex, 0, buttonConfig);
  471.             saveButtonConfigurations(config);
  472.             populateButtonConfigs();
  473.         }
  474.     }
  475.  
  476.     function addNewButtonConfig() {
  477.         const buttonText = document.getElementById('button-text').value;
  478.         const backgroundColor = document.getElementById('button-color').value;
  479.         const condition = document.getElementById('button-condition').value;
  480.         const text = document.getElementById('button-text-content').value;
  481.  
  482.         const config = getButtonConfigurations();
  483.         config.buttons.push({ buttonText, backgroundColor, condition, text });
  484.         saveButtonConfigurations(config);
  485.         populateButtonConfigs();
  486.         highlightButton(config.buttons.length - 1);
  487.         switchTab('config-list-tab');
  488.  
  489.         clearInputFields();
  490.     }
  491.  
  492.     function editButtonConfig() {
  493.         const index = parseInt(document.getElementById('edit-button').getAttribute('data-edit-index'), 10);
  494.         const buttonText = document.getElementById('button-text').value;
  495.         const backgroundColor = document.getElementById('button-color').value;
  496.         const condition = document.getElementById('button-condition').value;
  497.         const text = document.getElementById('button-text-content').value;
  498.  
  499.         const config = getButtonConfigurations();
  500.         config.buttons[index] = { buttonText, backgroundColor, condition, text };
  501.         saveButtonConfigurations(config);
  502.         populateButtonConfigs();
  503.         highlightButton(index);
  504.         switchTab('config-list-tab');
  505.  
  506.         document.getElementById('add-button').style.display = 'block';
  507.         document.getElementById('edit-button').style.display = 'none';
  508.  
  509.         clearInputFields();
  510.     }
  511.  
  512.     function clearInputFields() {
  513.         document.getElementById('button-text').value = '';
  514.         document.getElementById('button-text-content').value = '';
  515.     }
  516.  
  517.     function closeUI() {
  518.         document.querySelector('.custom-ui-panel').remove();
  519.     }
  520.  
  521.     function createConfigButton() {
  522.         const settingsPanel = document.querySelector('.settings-panel___IZSDs');
  523.         if (settingsPanel && !document.querySelector('#chat-config-button')) {
  524.             const configButton = document.createElement('button');
  525.             configButton.id = 'chat-config-button';
  526.             configButton.textContent = 'Edit Chat Buttons';
  527.             configButton.addEventListener('click', createUIPanel);
  528.             settingsPanel.appendChild(configButton);
  529.         }
  530.     }
  531.  
  532.     function applyButtonConfigurations() {
  533.         const configs = getButtonConfigurations();
  534.         document.querySelectorAll('.chat-box___mHm01').forEach(chatBox => {
  535.             configs.buttons.forEach(buttonConfig => {
  536.                 const conditionFunc = conditions[buttonConfig.condition];
  537.                 if (conditionFunc && conditionFunc(chatBox) && !chatBox.querySelector(`[data-button-text="${buttonConfig.buttonText}"]`)) {
  538.                     const button = document.createElement('button');
  539.                     button.className = 'custom-chat-button';
  540.                     button.innerText = buttonConfig.buttonText;
  541.                     button.style.backgroundColor = buttonConfig.backgroundColor;
  542.                     button.setAttribute('data-button-text', buttonConfig.buttonText);
  543.                     button.addEventListener('click', (event) => addCustomText(chatBox, buttonConfig.text, event));
  544.                     button.addEventListener('mousedown', (event) => {
  545.                         if (event.button === 0) { // Left mouse button
  546.                             let timer;
  547.                             const delay = 1000; // 1 second
  548.  
  549.                             timer = setTimeout(() => {
  550.                                 button.classList.remove('recent');
  551.                                 clearRecentButtonInfo();
  552.                             }, delay);
  553.  
  554.                             button.addEventListener('mouseup', () => {
  555.                                 clearTimeout(timer);
  556.                             }, { once: true });
  557.  
  558.                             button.addEventListener('mouseleave', () => {
  559.                                 clearTimeout(timer);
  560.                             }, { once: true });
  561.                         }
  562.                     });
  563.  
  564.                     const filterContainer = chatBox.querySelector('.tt-chat-filter');
  565.                     filterContainer.insertBefore(button, filterContainer.firstChild);
  566.                 }
  567.             });
  568.         });
  569.     }
  570.  
  571.     function addCustomText(chatBox, messageTemplate, event) {
  572.         const nameElement = chatBox.querySelector('.typography___Dc5WV');
  573.         const name = nameElement ? nameElement.textContent.trim() : 'Trader';
  574.         const message = messageTemplate.replace('{name}', name);
  575.  
  576.         navigator.clipboard.writeText(message).then(() => {
  577.             const textArea = chatBox.querySelector('textarea');
  578.             textArea.focus();
  579.             textArea.value = ''; // Clear the existing text
  580.             const startPos = textArea.selectionStart;
  581.             const endPos = textArea.selectionEnd;
  582.             textArea.setRangeText(message, startPos, endPos, 'end');
  583.             textArea.dispatchEvent(new Event('input', { bubbles: true }));
  584.             textArea.focus();
  585.             textArea.selectionStart = textArea.selectionEnd = startPos + message.length;
  586.  
  587.             // Remove the 'recent' class from all buttons
  588.             chatBox.querySelectorAll('.custom-chat-button').forEach(btn => {
  589.                 btn.classList.remove('recent');
  590.             });
  591.  
  592.             // Add the 'recent' class to the clicked button
  593.             event.target.classList.add('recent');
  594.  
  595.             // Save the recently clicked button information
  596.             const chatBoxName = chatBox.querySelector('.chat-box-header__name___jIjjM').textContent;
  597.             saveRecentButtonInfo(event.target.getAttribute('data-button-text'), chatBoxName);
  598.         });
  599.     }
  600.  
  601.     function applyRecentButtonClass() {
  602.         const recentButtonInfo = JSON.parse(localStorage.getItem('recentButtonInfo'));
  603.         if (recentButtonInfo) {
  604.             document.querySelectorAll('.chat-box___mHm01').forEach(chatBox => {
  605.                 const chatBoxName = chatBox.querySelector('.chat-box-header__name___jIjjM').textContent;
  606.                 if (chatBoxName === recentButtonInfo.chatBoxName) {
  607.                     const button = chatBox.querySelector(`[data-button-text="${recentButtonInfo.buttonText}"]`);
  608.                     if (button) {
  609.                         button.classList.add('recent');
  610.                     }
  611.                 }
  612.             });
  613.         }
  614.     }
  615.  
  616.     function importConfig() {
  617.         const input = document.createElement('input');
  618.         input.type = 'file';
  619.         input.accept = '.json';
  620.         input.onchange = (event) => {
  621.             const file = event.target.files[0];
  622.             const reader = new FileReader();
  623.             reader.onload = (e) => {
  624.                 const config = JSON.parse(e.target.result);
  625.                 saveButtonConfigurations(config);
  626.                 populateButtonConfigs();
  627.                 applyButtonConfigurations();
  628.             };
  629.             reader.readAsText(file);
  630.         };
  631.         input.click();
  632.     }
  633.  
  634.     function exportConfig() {
  635.         const config = getButtonConfigurations();
  636.         const blob = new Blob([JSON.stringify(config, null, 2)], { type: 'application/json' });
  637.         const url = URL.createObjectURL(blob);
  638.         const a = document.createElement('a');
  639.         a.href = url;
  640.         a.download = 'chatButtonConfig.json';
  641.         document.body.appendChild(a);
  642.         a.click();
  643.         document.body.removeChild(a);
  644.         URL.revokeObjectURL(url);
  645.     }
  646.  
  647.     function updateCharCounter() {
  648.         const textArea = document.getElementById('button-text-content');
  649.         const counter = document.getElementById('char-counter');
  650.         counter.textContent = textArea.value.length;
  651.     }
  652.  
  653.     function highlightButton(index) {
  654.         const configsContainer = document.getElementById('button-configs');
  655.         const buttonDiv = configsContainer.querySelector(`.draggable[data-index="${index}"]`);
  656.         if (buttonDiv) {
  657.             buttonDiv.classList.add('highlight');
  658.             buttonDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });
  659.             setTimeout(() => {
  660.                 buttonDiv.classList.remove('highlight');
  661.             }, 2000);
  662.         }
  663.     }
  664.  
  665.     addCSS(buttonCSS);
  666.  
  667.     const chatContainerObserver = new MutationObserver(function(mutations) {
  668.         mutations.forEach(function(mutation) {
  669.             createConfigButton();
  670.             applyButtonConfigurations();
  671.             applyRecentButtonClass();
  672.         });
  673.     });
  674.  
  675.     const chatContainer = document.querySelector('#chatRoot');
  676.     if (chatContainer) {
  677.         chatContainerObserver.observe(chatContainer, { childList: true, subtree: true });
  678.     }
  679.  
  680.     applyButtonConfigurations();
  681.     applyRecentButtonClass();
  682. })();