☰

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 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Useless Things Series: Color Finder
// @version      1
// @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.
// @match        *://*/*
// @grant        none
// @license      MIT
// @namespace https://greasyfork.org/users/1126616
// ==/UserScript==

(function() {
    'use strict';

    var menu = null;
    var colorFinderButton = null;
    var colorPicker = null;
    var isColorPickerVisible = false;

    menu = document.createElement('div');
    menu.style.position = 'fixed';
    menu.style.top = '10px';
    menu.style.left = '10px';
    menu.style.zIndex = '9999';
    menu.style.display = 'none'; // Initially hidden
    document.body.appendChild(menu);

    colorFinderButton = document.createElement('button');
    colorFinderButton.textContent = 'Color Finder';
    colorFinderButton.style.padding = '8px 16px';
    colorFinderButton.style.backgroundColor = '#007bff';
    colorFinderButton.style.color = '#fff';
    colorFinderButton.style.border = 'none';
    colorFinderButton.style.borderRadius = '8px';
    colorFinderButton.style.cursor = 'pointer';
    colorFinderButton.style.fontSize = '16px';
    colorFinderButton.style.fontWeight = 'bold';
    colorFinderButton.style.transition = 'background-color 0.3s ease';
    menu.appendChild(colorFinderButton);

    colorFinderButton.addEventListener('mouseenter', function() {
        colorFinderButton.style.backgroundColor = '#0056b3';
    });

    colorFinderButton.addEventListener('mouseleave', function() {
        colorFinderButton.style.backgroundColor = '#007bff';
    });

    document.addEventListener('keydown', function(event) {
        if (event.ctrlKey && event.key === '.') {
            toggleMenu();
        }
    });

    colorFinderButton.addEventListener('click', function() {
        if (!colorPicker) {
            createColorPicker();
        }
        toggleColorPicker();
    });

    function toggleMenu() {
        if (menu.style.display === 'none') {
            menu.style.display = 'block';
        } else {
            menu.style.display = 'none';
        }
    }

    function createColorPicker() {
        colorPicker = document.createElement('input');
        colorPicker.type = 'color';
        colorPicker.style.position = 'fixed';
        colorPicker.style.top = '50px'; // Adjust position as needed
        colorPicker.style.left = '10px';
        colorPicker.style.zIndex = '9999';
        colorPicker.style.display = 'none';
        document.body.appendChild(colorPicker);
    }

    function toggleColorPicker() {
        if (isColorPickerVisible) {
            hideColorPicker();
        } else {
            showColorPicker();
        }
    }

    function showColorPicker() {
        colorPicker.style.display = 'block';
        isColorPickerVisible = true;
    }

    function hideColorPicker() {
        colorPicker.style.display = 'none';
        isColorPickerVisible = false;
    }

})();