Simple Color Picker

Overview -------- Simple Color Picker is a lightweight and user-friendly browser extension designed to help users quickly capture and copy colors from their screen. With a clean and intuitive interface, it allows you to pick a color using the built-in EyeDropper API, display the selected color in both HEX and RGB formats, and automatically copy the color code to your clipboard. Key Features ------------ Easy Color Picking: Click the "Pick Color" button to activate the EyeDropper tool and select any color on your screen. Detached Popup Mode: The extension opens in a detachable window for a better user experience and allows you to drag the window to any position on your screen. Real-time Display: Once a color is selected, its HEX value is shown as the background color in a display area, along with its numeric RGB equivalent. Clipboard Integration: The selected color code is automatically copied to the clipboard, making it convenient to use in other applications. Responsive Design: The extension ensures smooth operation and proper styling even when the window is resized or moved. How It Works ------------ Initialization: When the extension loads, the ColorPicker class checks whether it should open in a detached window or run normally in the popup mode. 2. Detached Window Handling: If the extension is launched from the popup and not already detached, it creates a new browser window with specific dimensions and closes the original popup. User Interaction: In the detached window, a drag-handle is provided to reposition the window conveniently. The main interaction is through the "Pick Color" button. 4. Color Selection Process: Upon clicking the button, the extension uses the EyeDropper API to allow the user to pick a color. The obtained color is then converted into a HEX and an RGB value. Display and Copy: The background color of the display area is updated with the selected color. Additionally, the HEX value and RGB value are both shown on the interface, and the HEX code is copied to the clipboard for immediate use. 6. Error Handling: Any errors during the color picking process are logged, ensuring reliable operation under various circumstances. Permissions & Manifest ----------------------- The extension is built using Manifest V3 and requests the necessary permissions, such as accessing active tabs, clipboard writing, and managing windows and tabs. This ensures a secure and efficient integration with the browser environment. Usage ----- Click the extension icon in the browser toolbar. The popup will launch and immediately detach into a new window if applicable. Use the "Pick Color" button to activate the EyeDropper tool and select a color from any part of your screen. Enjoy the automatically copied color code and the displayed color values in both HEX and RGB formats. This simple yet powerful extension is perfect for designers, developers, or anyone who frequently works with colors and needs quick and accurate color information.