Advanced Website Color Picker Tool

1// ==UserScript==
2// @name		Advanced Website Color Picker Tool
3// @description		An advanced extension to pick colors from any website, extract HEX, RGB, and HSL color codes, and copy them to your clipboard for web development and design.
4// @version		1.1.1
5// @match		<all_urls>
6// @icon		https://www.gstatic.com/images/branding/searchlogo/ico/favicon.ico
7// ==/UserScript==
8(function() {
9    'use strict';
10
11    // Inject CSS for the color picker
12    TM_addStyle(`
13        #color-picker-button {
14            position: fixed;
15            top: 10px;
16            right: 10px;
17            z-index: 9999;
18            padding: 8px 12px;
19            background-color: #007bff;
20            color: white;
21            border: none;
22            border-radius: 5px;
23            cursor: pointer;
24            font-size: 14px;
25        }
26        #color-picker-panel {
27            display: none;
28            position: fixed;
29            top: 50px;
30            right: 10px;
31            width: 220px;
32            background-color: #ffffff;
33            border: 1px solid #ccc;
34            border-radius: 5px;
35            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
36            z-index: 9998;
37            font-family: sans-serif;
38        }
39        #color-picker-header {
40            padding: 10px;
41            cursor: move;
42            background-color: #f1f1f1;
43            border-bottom: 1px solid #ccc;
44            border-top-left-radius: 5px;
45            border-top-right-radius: 5px;
46            text-align: center;
47            font-weight: bold;
48        }
49        #color-preview {
50            width: 180px;
51            height: 100px;
52            margin: 15px auto;
53            border: 1px solid #000;
54            background-color: #ffffff;
55        }
56        #color-value {
57            margin: 0 15px 15px;
58            text-align: center;
59            font-size: 16px;
60            padding: 8px;
61            border: 1px solid #ddd;
62            border-radius: 3px;
63            background-color: #f9f9f9;
64        }
65        #copy-color-button {
66            width: calc(100% - 30px);
67            margin: 0 15px 15px;
68            padding: 10px;
69            background-color: #28a745;
70            color: white;
71            border: none;
72            border-radius: 5px;
73            cursor: pointer;
74            font-size: 14px;
75        }
76        #copy-color-button:hover {
77            background-color: #218838;
78        }
79    `);
80
81    // Create a button to toggle the color picker
82    const pickerButton = document.createElement('button');
83    pickerButton.id = 'color-picker-button';
84    pickerButton.textContent = 'Color Picker';
85    document.body.appendChild(pickerButton);
86
87    // Create the color picker panel
88    const pickerPanel = document.createElement('div');
89    pickerPanel.id = 'color-picker-panel';
90    pickerPanel.innerHTML = `
91        <div id="color-picker-header">Color Picker</div>
92        <div id="color-preview"></div>
93        <div id="color-value">#ffffff</div>
94        <button id="copy-color-button">Copy</button>
95    `;
96    document.body.appendChild(pickerPanel);
97
98    // Make the panel draggable
99    let isDragging = false;
100    let offsetX, offsetY;
101    const header = pickerPanel.querySelector('#color-picker-header');
102
103    header.addEventListener('mousedown', (e) => {
104        isDragging = true;
105        const rect = pickerPanel.getBoundingClientRect();
106        offsetX = e.clientX - rect.left;
107        offsetY = e.clientY - rect.top;
108        e.preventDefault();
109    });
110
111    document.addEventListener('mousemove', (e) => {
112        if (isDragging) {
113            pickerPanel.style.right = 'auto';
114            pickerPanel.style.left = (e.clientX - offsetX) + 'px';
115            pickerPanel.style.top = (e.clientY - offsetY) + 'px';
116        }
117    });
118
119    document.addEventListener('mouseup', () => {
120        isDragging = false;
121    });
122
123    // EyeDropper logic
124    const colorPreview = pickerPanel.querySelector('#color-preview');
125    const colorValue = pickerPanel.querySelector('#color-value');
126    const copyButton = pickerPanel.querySelector('#copy-color-button');
127
128    pickerButton.addEventListener('click', (e) => {
129        e.stopPropagation();
130        const isDisplayed = pickerPanel.style.display === 'block';
131        pickerPanel.style.display = isDisplayed ? 'none' : 'block';
132        if (!isDisplayed) {
133            pickColor();
134        }
135    });
136
137    async function pickColor() {
138        if (!window.EyeDropper) {
139            alert('Your browser does not support the EyeDropper API');
140            return;
141        }
142        try {
143            const eyeDropper = new EyeDropper();
144            const result = await eyeDropper.open();
145            const color = result.sRGBHex;
146            colorPreview.style.backgroundColor = color;
147            colorValue.textContent = color;
148        } catch {
149            console.log('Color selection cancelled.');
150        }
151    }
152
153    copyButton.addEventListener('click', () => {
154        const colorToCopy = colorValue.textContent;
155        GM.setClipboard(colorToCopy);
156        copyButton.textContent = 'Copied!';
157        setTimeout(() => {
158            copyButton.textContent = 'Copy';
159        }, 2000);
160    });
161
162})();