☰

iPort Paste Chrome OS

Adds a modern, draggable GUI for copying and pasting text on Chrome OS.

  1. // ==UserScript==
  2. // @name         iPort Paste Chrome OS
  3. // @namespace    http://yournamespace.example.com
  4. // @version      1.0
  5. // @description  Adds a modern, draggable GUI for copying and pasting text on Chrome OS.
  6. // @author       Your Name
  7. // @match        *://*/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // Create a container div for the GUI
  15.     const guiContainer = document.createElement('div');
  16.     guiContainer.innerHTML = `
  17.         <div id="greasyforkDragHandle" style="background-color: #3498db; height: 30px; cursor: move; display: flex; justify-content: space-between; align-items: center; border-top-left-radius: 15px; border-top-right-radius: 15px;">
  18.             <h1 style="margin: 0; padding: 10px; background-color: transparent; color: white; font-size: 18px;">iPort Paste Chrome OS</h1>
  19.             <button id="greasyforkCloseButton" style="background: none; border: none; color: white; font-size: 20px; padding: 0 10px; cursor: pointer;">&times;</button>
  20.         </div>
  21.         <div id="greasyforkContent" style="padding: 20px;">
  22.             <div style="display: flex; flex-direction: column;">
  23.                 <textarea id="greasyforkInput" rows="4" cols="30" placeholder="Paste your text here..." style="resize: none; padding: 10px; background-color: #f2f2f2; border: none; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;"></textarea>
  24.                 <button id="greasyforkCopyButton" style="padding: 10px; background-color: #007BFF; color: white; border: none; cursor: pointer; margin-top: 10px; transition: background-color 0.3s; border-radius: 15px;">Copy Text</button>
  25.                 <button id="greasyforkDeleteButton" style="padding: 10px; background-color: #e74c3c; color: white; border: none; cursor: pointer; margin-top: 10px; transition: background-color 0.3s; border-radius: 15px;">Delete Text</button>
  26.                 <button id="greasyforkPasteButton" style="padding: 10px; background-color: #27ae60; color: white; border: none; cursor: pointer; margin-top: 10px; transition: background-color 0.3s; border-radius: 15px;">Paste</button>
  27.             </div>
  28.         </div>
  29.         <div id="settingsBar" style="background-color: #3498db; color: white; text-align: center; cursor: pointer; padding: 5px; border-radius: 0 0 15px 15px;">Settings</div>
  30.         <div id="settingsPane" style="display: none; background-color: #f2f2f2; padding: 10px; border-radius: 0 0 15px 15px;">
  31.             <h3>GUI Color</h3>
  32.             <input type="color" id="guiColorPicker" value="#3498db">
  33.             <h3>Coding Mode</h3>
  34.             <label for="codingModeToggle">Enable Coding Mode:</label>
  35.             <input type="checkbox" id="codingModeToggle">
  36.             <h3>Bold Text</h3>
  37.             <label for="boldTextToggle">Enable Bold Text:</label>
  38.             <input type="checkbox" id="boldTextToggle">
  39.             <h3>Text Size</h3>
  40.             <input type="range" id="textSizeInput" min="8" max="48" value="16">
  41.             <span id="textSizeLabel">16px</span>
  42.             <h3>Text Color</h3>
  43.             <input type="color" id="textColorPicker" value="#000000">
  44.             <h3>Font Family</h3>
  45.             <select id="fontSelector">
  46.                 <option value="Arial, sans-serif">Arial</option>
  47.                 <option value="Verdana, sans-serif">Verdana</option>
  48.                 <option value="Georgia, serif">Georgia</option>
  49.                 <option value="Times New Roman, serif">Times New Roman</option>
  50.                 <option value="Courier New, monospace">Courier New</option>
  51.             </select>
  52.         </div>
  53.     `;
  54.  
  55.     // Add styles for the container
  56.     guiContainer.style.position = 'fixed';
  57.     guiContainer.style.top = '100px';
  58.     guiContainer.style.right = '10px';
  59.     guiContainer.style.backgroundColor = '#f2f2f2'; // Change the background color of the GUI
  60.     guiContainer.style.borderRadius = '15px'; // Rounded corners for the GUI container
  61.     guiContainer.style.border = '2px solid #3498db'; // Add an outline to the GUI container
  62.     guiContainer.style.boxShadow = '0px 0px 10px rgba(0,0,0,0.3)';
  63.     guiContainer.style.zIndex = '9999';
  64.     guiContainer.style.width = '300px';
  65.     guiContainer.style.userSelect = 'none';
  66.  
  67.     // Add styles for the drag handle
  68.     const dragHandle = guiContainer.querySelector('#greasyforkDragHandle');
  69.     dragHandle.style.cursor = 'move';
  70.  
  71.     // Make the GUI movable
  72.     let isDragging = false;
  73.     let offsetX, offsetY;
  74.     dragHandle.addEventListener('mousedown', (e) => {
  75.         isDragging = true;
  76.         offsetX = e.clientX - guiContainer.getBoundingClientRect().left;
  77.         offsetY = e.clientY - guiContainer.getBoundingClientRect().top;
  78.     });
  79.  
  80.     document.addEventListener('mousemove', (e) => {
  81.         if (isDragging) {
  82.             guiContainer.style.top = (e.clientY - offsetY) + 'px';
  83.             guiContainer.style.left = (e.clientX - offsetX) + 'px';
  84.         }
  85.     });
  86.  
  87.     document.addEventListener('mouseup', () => {
  88.         isDragging = false;
  89.     });
  90.  
  91.     // Toggle settings pane
  92.     const settingsBar = guiContainer.querySelector('#settingsBar');
  93.     const settingsPane = guiContainer.querySelector('#settingsPane');
  94.     settingsBar.addEventListener('click', function() {
  95.         settingsPane.style.display = settingsPane.style.display === 'block' ? 'none' : 'block';
  96.     });
  97.  
  98.     // Handle GUI color change
  99.     const guiColorPicker = guiContainer.querySelector('#guiColorPicker');
  100.     guiColorPicker.addEventListener('input', function() {
  101.         const newColor = guiColorPicker.value;
  102.         guiContainer.style.backgroundColor = newColor;
  103.         dragHandle.style.backgroundColor = newColor;
  104.         settingsBar.style.backgroundColor = newColor;
  105.     });
  106.  
  107.     // Handle Coding Mode toggle
  108.     const codingModeToggle = guiContainer.querySelector('#codingModeToggle');
  109.     const inputText = guiContainer.querySelector('#greasyforkInput');
  110.  
  111.     codingModeToggle.addEventListener('change', function() {
  112.         if (codingModeToggle.checked) {
  113.             inputText.style.color = 'green'; // Set text color to green when Coding Mode is enabled
  114.             inputText.setAttribute('spellcheck', 'false'); // Disable spellcheck
  115.         } else {
  116.             inputText.style.color = 'black'; // Set text color back to black when Coding Mode is disabled
  117.             inputText.removeAttribute('spellcheck'); // Enable spellcheck
  118.         }
  119.     });
  120.  
  121.     // Handle Bold Text toggle
  122.     const boldTextToggle = guiContainer.querySelector('#boldTextToggle');
  123.     boldTextToggle.addEventListener('change', function() {
  124.         if (boldTextToggle.checked) {
  125.             inputText.style.fontWeight = 'bold'; // Set text to bold when Bold Text is enabled
  126.         } else {
  127.             inputText.style.fontWeight = 'normal'; // Set text to normal weight when Bold Text is disabled
  128.         }
  129.     });
  130.  
  131.     // Update the text size, text color, and font family
  132.     const textSizeInput = guiContainer.querySelector('#textSizeInput');
  133.     const textColorPicker = guiContainer.querySelector('#textColorPicker');
  134.     const textSizeLabel = guiContainer.querySelector('#textSizeLabel');
  135.     const fontSelector = guiContainer.querySelector('#fontSelector');
  136.  
  137.     textSizeInput.addEventListener('input', function() {
  138.         const newSize = textSizeInput.value + 'px';
  139.         inputText.style.fontSize = newSize;
  140.         textSizeLabel.textContent = newSize;
  141.     });
  142.  
  143.     textColorPicker.addEventListener('input', function() {
  144.         const newColor = textColorPicker.value;
  145.         inputText.style.color = newColor;
  146.     });
  147.  
  148.     fontSelector.addEventListener('change', function() {
  149.         const selectedFont = fontSelector.value;
  150.         inputText.style.fontFamily = selectedFont;
  151.     });
  152.  
  153.     // Add click event listener to the "Copy Text" button
  154.     const copyButton = guiContainer.querySelector('#greasyforkCopyButton');
  155.     copyButton.addEventListener('click', function() {
  156.         inputText.select();
  157.         document.execCommand('copy');
  158.         alert('Text copied to clipboard!');
  159.     });
  160.  
  161.     // Add click event listener to the "Paste" button
  162.     const pasteButton = guiContainer.querySelector('#greasyforkPasteButton');
  163.     pasteButton.addEventListener('click', async function() {
  164.         const clipboardText = await navigator.clipboard.readText();
  165.         inputText.value = clipboardText;
  166.         inputText.style.color = 'black'; // Set the text color to black
  167.         inputText.style.fontWeight = 'normal'; // Set the font weight to normal
  168.         inputText.select(); // Select the pasted text to make it visible
  169.         inputText.focus(); // Ensure the textarea is focused after pasting
  170.     });
  171.  
  172.     // Add click event listener to the "Delete Text" button
  173.     const deleteButton = guiContainer.querySelector('#greasyforkDeleteButton');
  174.     deleteButton.addEventListener('click', function() {
  175.         inputText.value = ''; // Clear the textarea
  176.     });
  177.  
  178.     // Append the GUI container to the document body
  179.     document.body.appendChild(guiContainer);
  180. })();