☰

Useless Things Series: Color Finder

This script enables users to find colors on any webpage by simply pressing 'Ctrl' + '.'. Once activated, a button labeled 'Color Finder' appears. Clicking this button reveals a rectangular color picker. Users can then utilize a pen icon to select colors and explore their corresponding RGB, HSL, or HEX codes.

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

  1. // ==UserScript==
  2. // @name         Useless Things Series: Color Finder
  3. // @version      1
  4. // @description  This script enables users to find colors on any webpage by simply pressing 'Ctrl' + '.'. Once activated, a button labeled 'Color Finder' appears. Clicking this button reveals a rectangular color picker. Users can then utilize a pen icon to select colors and explore their corresponding RGB, HSL, or HEX codes.
  5. // @match        *://*/*
  6. // @grant        none
  7. // @license      MIT
  8. // @namespace https://greasyfork.org/users/1126616
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     var menu = null;
  15.     var colorFinderButton = null;
  16.     var colorPicker = null;
  17.     var isColorPickerVisible = false;
  18.  
  19.     menu = document.createElement('div');
  20.     menu.style.position = 'fixed';
  21.     menu.style.top = '10px';
  22.     menu.style.left = '10px';
  23.     menu.style.zIndex = '9999';
  24.     menu.style.display = 'none'; // Initially hidden
  25.     document.body.appendChild(menu);
  26.  
  27.     colorFinderButton = document.createElement('button');
  28.     colorFinderButton.textContent = 'Color Finder';
  29.     colorFinderButton.style.padding = '8px 16px';
  30.     colorFinderButton.style.backgroundColor = '#007bff';
  31.     colorFinderButton.style.color = '#fff';
  32.     colorFinderButton.style.border = 'none';
  33.     colorFinderButton.style.borderRadius = '8px';
  34.     colorFinderButton.style.cursor = 'pointer';
  35.     colorFinderButton.style.fontSize = '16px';
  36.     colorFinderButton.style.fontWeight = 'bold';
  37.     colorFinderButton.style.transition = 'background-color 0.3s ease';
  38.     menu.appendChild(colorFinderButton);
  39.  
  40.     colorFinderButton.addEventListener('mouseenter', function() {
  41.         colorFinderButton.style.backgroundColor = '#0056b3';
  42.     });
  43.  
  44.     colorFinderButton.addEventListener('mouseleave', function() {
  45.         colorFinderButton.style.backgroundColor = '#007bff';
  46.     });
  47.  
  48.     document.addEventListener('keydown', function(event) {
  49.         if (event.ctrlKey && event.key === '.') {
  50.             toggleMenu();
  51.         }
  52.     });
  53.  
  54.     colorFinderButton.addEventListener('click', function() {
  55.         if (!colorPicker) {
  56.             createColorPicker();
  57.         }
  58.         toggleColorPicker();
  59.     });
  60.  
  61.     function toggleMenu() {
  62.         if (menu.style.display === 'none') {
  63.             menu.style.display = 'block';
  64.         } else {
  65.             menu.style.display = 'none';
  66.         }
  67.     }
  68.  
  69.     function createColorPicker() {
  70.         colorPicker = document.createElement('input');
  71.         colorPicker.type = 'color';
  72.         colorPicker.style.position = 'fixed';
  73.         colorPicker.style.top = '50px'; // Adjust position as needed
  74.         colorPicker.style.left = '10px';
  75.         colorPicker.style.zIndex = '9999';
  76.         colorPicker.style.display = 'none';
  77.         document.body.appendChild(colorPicker);
  78.     }
  79.  
  80.     function toggleColorPicker() {
  81.         if (isColorPickerVisible) {
  82.             hideColorPicker();
  83.         } else {
  84.             showColorPicker();
  85.         }
  86.     }
  87.  
  88.     function showColorPicker() {
  89.         colorPicker.style.display = 'block';
  90.         isColorPickerVisible = true;
  91.     }
  92.  
  93.     function hideColorPicker() {
  94.         colorPicker.style.display = 'none';
  95.         isColorPickerVisible = false;
  96.     }
  97.  
  98. })();