├── background.js ├── images ├── picker_16.png ├── picker_32.png └── picker_48.png ├── manifest.json ├── options.html ├── popup.css ├── popup.html └── popup.js /background.js: -------------------------------------------------------------------------------- 1 | let color = 'red'; 2 | 3 | chrome.runtime.onInstalled.addListener(() => { 4 | chrome.storage.sync.set({ color }); 5 | }); 6 | -------------------------------------------------------------------------------- /images/picker_16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codersgyan/color-picker-chrome-extension/3311c7edc2986248fca3319153c94e92f9d85fa0/images/picker_16.png -------------------------------------------------------------------------------- /images/picker_32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codersgyan/color-picker-chrome-extension/3311c7edc2986248fca3319153c94e92f9d85fa0/images/picker_32.png -------------------------------------------------------------------------------- /images/picker_48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codersgyan/color-picker-chrome-extension/3311c7edc2986248fca3319153c94e92f9d85fa0/images/picker_48.png -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Color picker", 3 | "description": "A color picker extension", 4 | "version": "1.0", 5 | "manifest_version": 3, 6 | "background": { 7 | "service_worker": "background.js" 8 | }, 9 | "permissions": [ 10 | "storage", 11 | "activeTab", 12 | "scripting" 13 | ], 14 | "options_page": "options.html", 15 | "action": { 16 | "default_popup": "popup.html" 17 | }, 18 | "icons": { 19 | "16": "/images/picker_16.png", 20 | "32": "/images/picker_32.png", 21 | "48": "/images/picker_48.png" 22 | } 23 | } -------------------------------------------------------------------------------- /options.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

Here you can have your detailed UI

7 | 8 | -------------------------------------------------------------------------------- /popup.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #f1f5f9; 3 | } 4 | .wrapper { 5 | width: 300px; 6 | text-align: center; 7 | } 8 | .changeColorBtn { 9 | width: 200px; 10 | outline: none; 11 | border: none; 12 | border-radius: 2px; 13 | padding: 5px; 14 | background: #facc15; 15 | cursor: pointer; 16 | } 17 | .colorGrid { 18 | display: inline-block; 19 | width: 20px; 20 | height: 20px; 21 | border-radius: 2px; 22 | } 23 | .selectedColor { 24 | display: flex; 25 | align-items: center; 26 | margin-top: 20px; 27 | } 28 | 29 | .colorValue { 30 | margin-left: 5px; 31 | font-weight: bold; 32 | } 33 | -------------------------------------------------------------------------------- /popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8 |

Welcome to my color picker

9 | 10 |

11 | 12 | 13 |

14 |

15 | 16 | 17 | -------------------------------------------------------------------------------- /popup.js: -------------------------------------------------------------------------------- 1 | const btn = document.querySelector('.changeColorBtn'); 2 | const colorGrid = document.querySelector('.colorGrid'); 3 | const colorValue = document.querySelector('.colorValue'); 4 | 5 | btn.addEventListener('click', async () => { 6 | chrome.storage.sync.get('color', ({ color }) => { 7 | console.log('color: ', color); 8 | }); 9 | let [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); 10 | 11 | chrome.scripting.executeScript( 12 | { 13 | target: { tabId: tab.id }, 14 | function: pickColor, 15 | }, 16 | async (injectionResults) => { 17 | const [data] = injectionResults; 18 | if (data.result) { 19 | const color = data.result.sRGBHex; 20 | colorGrid.style.backgroundColor = color; 21 | colorValue.innerText = color; 22 | try { 23 | await navigator.clipboard.writeText(color); 24 | } catch (err) { 25 | console.error(err); 26 | } 27 | } 28 | } 29 | ); 30 | }); 31 | 32 | async function pickColor() { 33 | try { 34 | // Picker 35 | const eyeDropper = new EyeDropper(); 36 | return await eyeDropper.open(); 37 | } catch (err) { 38 | console.error(err); 39 | } 40 | } 41 | --------------------------------------------------------------------------------