Universal Website Color Picker Tool

1// ==UserScript==
2// @name		Universal Website Color Picker Tool
3// @description		A powerful and universal color picker tool for web developers and designers. Easily select and apply any color from any website to customize your browsing experience or aid in web design. Includes an eyedropper for precise color selection.
4// @version		1.1.2
5// @match		*://*/*
6// @icon		data:image/svg+xml;charset=UTF-8;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIGZpdD0iIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiBmb2N1c2FibGU9ImZhbHNlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0yNi42OSAxOC41M2ExIDEgMCAwMC0xLjQtLjIxTDE2IDI1LjE3di4yOWExIDEgMCAwMTAgMS45MXYuMDVhMSAxIDAgMDAuNTktLjE5bDkuODgtNy4zYTEgMSAwIDAwLjIyLTEuNHoiIGZpbGw9InZhcigtLWNtLXN5cy1jb2xvci1sb2dvLWJsdWUtbWVkaXVtLXRvbmUsICM1Yzg1ZGUpIj48L3BhdGg+PHBhdGggZD0iTTE2IDI3LjM3YTEgMSAwIDAxMC0xLjkxdi0uMjlsLTkuMjgtNi44NWExIDEgMCAxMC0xLjE5IDEuNjFsOS44OCA3LjNhMSAxIDAgMDAuNi4xOXYtLjA1eiIgZmlsbD0idmFyKC0tY20tc3lzLWNvbG9yLWxvZ28tYmx1ZS1zb2Z0LXRvbmUsICM4NWE0ZTYpIj48L3BhdGg+PHBhdGggZD0iTTE2IDI0LjQ2YTIgMiAwIDEwMiAyIDIgMiAwIDAwLTItMnptMCAyLjkxYTEgMSAwIDAxMC0xLjkxIDEgMSAwIDExMCAxLjkxeiIgZmlsbD0idmFyKC0tY20tc3lzLWNvbG9yLWxvZ28tYmx1ZS1kZWVwLXRvbmUsICMzMzY3ZDYpIj48L3BhdGg+PHBhdGggZD0iTTggOC4xNWExIDEgMCAwMS0xLTFWNC42M2ExIDEgMCAwMTIgMHYyLjUxYTEgMSAwIDAxLTEgMS4wMXoiIGZpbGw9InZhcigtLWNtLXN5cy1jb2xvci1sb2dvLWJsdWUtc29mdC10b25lLCAjODVhNGU2KSI+PC9wYXRoPjxjaXJjbGUgY3g9IjcuOTciIGN5PSIxNi4wMSIgcj0iMS4wMSIgZmlsbD0idmFyKC0tY20tc3lzLWNvbG9yLWxvZ28tYmx1ZS1zb2Z0LXRvbmUsICM4NWE0ZTYpIj48L2NpcmNsZT48Y2lyY2xlIGN4PSI3Ljk3IiBjeT0iMTMuMDUiIHI9IjEuMDEiIGZpbGw9InZhcigtLWNtLXN5cy1jb2xvci1sb2dvLWJsdWUtc29mdC10b25lLCAjODVhNGU2KSI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iNy45NyIgY3k9IjEwLjEiIHI9IjEuMDEiIGZpbGw9InZhcigtLWNtLXN5cy1jb2xvci1sb2dvLWJsdWUtc29mdC10b25lLCAjODVhNGU2KSI+PC9jaXJjbGU+PHBhdGggZD0iTTI0IDExLjA3YTEgMSAwIDAxLTEtMVY3LjU2YTEgMSAwIDAxMiAwdjIuNTFhMSAxIDAgMDEtMSAxeiIgZmlsbD0idmFyKC0tY20tc3lzLWNvbG9yLWxvZ28tYmx1ZS1kZWVwLXRvbmUsICMzMzY3ZDYpIj48L3BhdGg+PGNpcmNsZSBjeD0iMjQuMDMiIGN5PSIxNi4wMiIgcj0iMS4wMSIgZmlsbD0idmFyKC0tY20tc3lzLWNvbG9yLWxvZ28tYmx1ZS1kZWVwLXRvbmUsICMzMzY3ZDYpIj48L2NpcmNsZT48Y2lyY2xlIGN4PSIyNC4wMyIgY3k9IjEzLjAyIiByPSIxLjAxIiBmaWxsPSJ2YXIoLS1jbS1zeXMtY29sb3ItbG9nby1ibHVlLWRlZXAtdG9uZSwgIzMzNjdkNikiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjI0LjAzIiBjeT0iNC42NCIgcj0iMS4wMSIgZmlsbD0idmFyKC0tY20tc3lzLWNvbG9yLWxvZ28tYmx1ZS1kZWVwLXRvbmUsICMzMzY3ZDYpIj48L2NpcmNsZT48cGF0aCBkPSJNMTYgMjBhMSAxIDAgMDEtMS0xdi0yLjU0YTEgMSAwIDAxMiAwVjE5YTEgMSAwIDAxLTEgMXoiIGZpbGw9InZhcigtLWNtLXN5cy1jb2xvci1sb2dvLWJsdWUtbWVkaXVtLXRvbmUsICM1Yzg1ZGUpIj48L3BhdGg+PGNpcmNsZSBjeD0iMTYiIGN5PSIyMS45MyIgcj0iMS4wMSIgZmlsbD0idmFyKC0tY20tc3lzLWNvbG9yLWxvZ28tYmx1ZS1tZWRpdW0tdG9uZSwgIzVjODVkZSkiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjE2IiBjeT0iMTMuNTIiIHI9IjEuMDEiIGZpbGw9InZhcigtLWNtLXN5cy1jb2xvci1sb2dvLWJsdWUtbWVkaXVtLXRvbmUsICM1Yzg1ZGUpIj48L2NpcmNsZT48Y2lyY2xlIGN4PSIxNiIgY3k9IjEwLjU2IiByPSIxLjAxIiBmaWxsPSJ2YXIoLS1jbS1zeXMtY29sb3ItbG9nby1ibHVlLW1lZGl1bS10b25lLCAjNWM4NWRlKSI+PC9jaXJjbGU+PHBhdGggZD0iTTIwIDE0LjA2YTEgMSAwIDAxLTEtMXYtMi41MmExIDEgMCAwMTIgMHYyLjUxYTEgMSAwIDAxLTEgMS4wMXoiIGZpbGw9InZhcigtLWNtLXN5cy1jb2xvci1sb2dvLWJsdWUtZGVlcC10b25lLCAjMzM2N2Q2KSI+PC9wYXRoPjxjaXJjbGUgY3g9IjIwLjAyIiBjeT0iNy41OSIgcj0iMS4wMSIgZmlsbD0idmFyKC0tY20tc3lzLWNvbG9yLWxvZ28tYmx1ZS1kZWVwLXRvbmUsICMzMzY3ZDYpIj48L2NpcmNsZT48Y2lyY2xlIGN4PSIyMC4wMiIgY3k9IjE4LjkyIiByPSIxLjAxIiBmaWxsPSJ2YXIoLS1jbS1zeXMtY29sb3ItbG9nby1ibHVlLWRlZXAtdG9uZSwgIzMzNjdkNikiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjIwLjAyIiBjeT0iMTUuOTciIHI9IjEuMDEiIGZpbGw9InZhcigtLWNtLXN5cy1jb2xvci1sb2dvLWJsdWUtZGVlcC10b25lLCAjMzM2N2Q2KSI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMTEuOTkiIGN5PSIxOC45MiIgcj0iMS4wMSIgZmlsbD0idmFyKC0tY20tc3lzLWNvbG9yLWxvZ28tYmx1ZS1zb2Z0LXRvbmUsICM4NWE0ZTYpIj48L2NpcmNsZT48Y2lyY2xlIGN4PSIxMS45OSIgY3k9IjEwLjU2IiByPSIxLjAxIiBmaWxsPSJ2YXIoLS1jbS1zeXMtY29sb3ItbG9nby1ibHVlLXNvZnQtdG9uZSwgIzg1YTRlNikiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjExLjk5IiBjeT0iNy41OSIgcj0iMS4wMSIgZmlsbD0idmFyKC0tY20tc3lzLWNvbG9yLWxvZ28tYmx1ZS1zb2Z0LXRvbmUsICM4NWE0ZTYpIj48L2NpcmNsZT48cGF0aCBkPSJNMTIgMTdhMSAxIDAgMDEtMS0xdi0yLjU0YTEgMSAwIDAxMiAwVjE2YTEgMSAwIDAxLTEgMXoiIGZpbGw9InZhcigtLWNtLXN5cy1jb2xvci1sb2dvLWJsdWUtc29mdC10b25lLCAjODVhNGU2KSI+PC9wYXRoPjwvc3ZnPg==
7// ==/UserScript==
8(function() {
9    'use strict';
10
11    function init() {
12        TM_addStyle(`
13            #rm-color-picker-button {
14                position: fixed;
15                top: 10px;
16                right: 10px;
17                z-index: 10000;
18                background-color: #007bff;
19                color: white;
20                border: none;
21                padding: 10px 15px;
22                border-radius: 5px;
23                cursor: pointer;
24                font-size: 16px;
25            }
26            #rm-color-picker-button:hover {
27                background-color: #0056b3;
28            }
29            #rm-color-picker-container {
30                position: fixed;
31                top: 60px;
32                right: 10px;
33                z-index: 10000;
34                background-color: white;
35                border: 1px solid #ccc;
36                padding: 10px;
37                border-radius: 5px;
38                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
39            }
40            #rm-color-input {
41                width: 100px;
42                height: 50px;
43                border: none;
44                padding: 0;
45            }
46        `);
47
48        const colorPickerButton = document.createElement('button');
49        colorPickerButton.id = 'rm-color-picker-button';
50        colorPickerButton.textContent = 'Pick Color';
51        document.body.appendChild(colorPickerButton);
52
53        const colorPickerContainer = document.createElement('div');
54        colorPickerContainer.id = 'rm-color-picker-container';
55        colorPickerContainer.style.display = 'none'; // Hidden by default
56        document.body.appendChild(colorPickerContainer);
57
58        const colorInput = document.createElement('input');
59        colorInput.type = 'color';
60        colorInput.id = 'rm-color-input';
61        colorPickerContainer.appendChild(colorInput);
62
63        colorPickerButton.addEventListener('click', () => {
64            colorPickerContainer.style.display = colorPickerContainer.style.display === 'none' ? 'block' : 'none';
65        });
66
67        colorInput.addEventListener('input', (event) => {
68            document.body.style.backgroundColor = event.target.value;
69            console.log('Background color changed to:', event.target.value);
70        });
71    }
72
73    init();
74})();