☰

Golden Gate GUI

Inject a GUI to execute custom JavaScript on any webpage

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

  1. // ==UserScript==
  2. // @name         Golden Gate GUI
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.6
  5. // @description  Inject a GUI to execute custom JavaScript on any webpage
  6. // @author       Your Name
  7. // @match        *://*/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // Create the GUI HTML
  15.     const guiHTML = `
  16.         <div class="window" id="goldenGateGui">
  17.             <div class="title-bar">
  18.                 <span>Golden Gate</span>
  19.                 <div class="window-controls">
  20.                     <span id="minimize">-</span>
  21.                     <span id="maximize">&#9633;</span>
  22.                     <span id="close">X</span>
  23.                 </div>
  24.             </div>
  25.             <div class="content">
  26.                 <textarea id="codeArea" placeholder="Enter your code here..."></textarea>
  27.             </div>
  28.             <div class="actions">
  29.                 <button id="injectBtn">Inject</button>
  30.             </div>
  31.         </div>
  32.     `;
  33.  
  34.     // Add styles for the GUI
  35.     const style = document.createElement('style');
  36.     style.textContent = `
  37.         body {
  38.             position: relative;
  39.         }
  40.         #goldenGateGui {
  41.             background-color: #FFA500;
  42.             border-radius: 10px;
  43.             box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  44.             width: 400px;
  45.             overflow: hidden;
  46.             position: fixed;
  47.             top: 20px;
  48.             right: 20px;
  49.             z-index: 10000;
  50.             font-family: Arial, sans-serif;
  51.             cursor: move;
  52.             transition: top 0.2s ease, left 0.2s ease;
  53.         }
  54.  
  55.         .title-bar {
  56.             background-color: #FFB732;
  57.             padding: 10px;
  58.             display: flex;
  59.             justify-content: space-between;
  60.             align-items: center;
  61.             color: black;
  62.             font-weight: bold;
  63.             border-bottom: 2px solid #FFA500;
  64.         }
  65.  
  66.         .window-controls span {
  67.             margin-left: 10px;
  68.             cursor: pointer;
  69.         }
  70.  
  71.         .content {
  72.             padding: 20px;
  73.             background-color: #FFD699;
  74.         }
  75.  
  76.         textarea {
  77.             width: 100%;
  78.             height: 150px;
  79.             border: none;
  80.             resize: none;
  81.             padding: 10px;
  82.             box-sizing: border-box;
  83.             border-radius: 5px;
  84.             background-color: #FFE4B5;
  85.         }
  86.  
  87.         .actions {
  88.             padding: 10px;
  89.             background-color: #FFB732;
  90.             display: flex;
  91.             justify-content: center;
  92.         }
  93.  
  94.         button {
  95.             padding: 10px 20px;
  96.             border: none;
  97.             background-color: white;
  98.             color: black;
  99.             font-weight: bold;
  100.             border-radius: 5px;
  101.             cursor: pointer;
  102.             transition: background-color 0.3s;
  103.         }
  104.  
  105.         button:hover {
  106.             background-color: #f2f2f2;
  107.         }
  108.  
  109.         button:disabled {
  110.             background-color: #ccc;
  111.             cursor: not-allowed;
  112.         }
  113.     `;
  114.     document.head.appendChild(style);
  115.  
  116.     // Insert the GUI into the page
  117.     const guiContainer = document.createElement('div');
  118.     guiContainer.innerHTML = guiHTML;
  119.     document.body.appendChild(guiContainer);
  120.  
  121.     // Add dragging functionality
  122.     const gui = document.getElementById('goldenGateGui');
  123.     let isDragging = false;
  124.     let offsetX, offsetY;
  125.  
  126.     function startDrag(event) {
  127.         isDragging = true;
  128.         offsetX = (event.clientX || event.touches[0].clientX) - gui.getBoundingClientRect().left;
  129.         offsetY = (event.clientY || event.touches[0].clientY) - gui.getBoundingClientRect().top;
  130.         gui.style.transition = 'none'; // Disable transition during drag
  131.     }
  132.  
  133.     function drag(event) {
  134.         if (isDragging) {
  135.             requestAnimationFrame(() => {
  136.                 const clientX = event.clientX || event.touches[0].clientX;
  137.                 const clientY = event.clientY || event.touches[0].clientY;
  138.                 gui.style.left = (clientX - offsetX) + 'px';
  139.                 gui.style.top = (clientY - offsetY) + 'px';
  140.             });
  141.         }
  142.     }
  143.  
  144.     function endDrag() {
  145.         if (isDragging) {
  146.             isDragging = false;
  147.             gui.style.transition = 'top 0.2s ease, left 0.2s ease'; // Smooth transition after drag
  148.         }
  149.     }
  150.  
  151.     gui.addEventListener('mousedown', startDrag);
  152.     document.addEventListener('mousemove', drag);
  153.     document.addEventListener('mouseup', endDrag);
  154.  
  155.     gui.addEventListener('touchstart', startDrag);
  156.     document.addEventListener('touchmove', drag);
  157.     document.addEventListener('touchend', endDrag);
  158.  
  159.     // Button functionality
  160.     document.getElementById('injectBtn').addEventListener('click', function() {
  161.         const codeToInject = document.getElementById('codeArea').value.trim();
  162.  
  163.         if (codeToInject) {
  164.             try {
  165.                 // Inject the code into the current page
  166.                 const script = document.createElement('script');
  167.                 script.textContent = codeToInject;
  168.                 document.body.appendChild(script);
  169.                 document.body.removeChild(script); // Remove script element after execution
  170.  
  171.                 // Disable the button after injecting
  172.                 document.getElementById('injectBtn').disabled = true;
  173.  
  174.             } catch (e) {
  175.                 alert('Error executing code: ' + e.message);
  176.             }
  177.         } else {
  178.             alert('Please enter some code to inject.');
  179.         }
  180.     });
  181.  
  182.     // Add functionality to the window controls
  183.     document.getElementById('minimize').addEventListener('click', function() {
  184.         document.querySelector('.content').style.display = 'none';
  185.         document.querySelector('.actions').style.display = 'none';
  186.     });
  187.  
  188.     document.getElementById('maximize').addEventListener('click', function() {
  189.         document.querySelector('.content').style.display = 'block';
  190.         document.querySelector('.actions').style.display = 'flex';
  191.     });
  192.  
  193.     document.getElementById('close').addEventListener('click', function() {
  194.         document.getElementById('goldenGateGui').remove();
  195.     });
  196. })();