परिचय

इस ब्लॉग पोस्ट में, हम जानेंगे कि एक सरल लेकिन शक्तिशाली कलर पिकर ब्राउज़र एक्सटेंशन कैसे बनाया जाए। यह एक्सटेंशन उपयोगकर्ताओं को अपनी स्क्रीन से आसानी से रंग चुनने, चुने गए रंगों का इतिहास देखने और सरल इंटरैक्शन के साथ अपने रंग पैलेट को प्रबंधित करने की अनुमति देता है।

परियोजना अवलोकन

कलर पिकर एक्सटेंशन एक उपयोगकर्ता-अनुकूल इंटरफ़ेस प्रदान करता है:

• आईड्रॉपर एपीआई का उपयोग करके स्क्रीन से रंग चुनें।
• चुने गए रंगों का इतिहास देखें।
• रंग कोड को क्लिपबोर्ड पर कॉपी करें।
• सभी चुने गए रंग साफ़ करें।

विशेषताएँ

• रंग चुनना: अपनी स्क्रीन के किसी भी हिस्से से रंग चुनने के लिए आईड्रॉपर एपीआई का उपयोग करें।
• रंग इतिहास: आसान पहुंच के साथ चुने गए रंगों की एक सूची बनाए रखें।
• क्लिपबोर्ड कॉपी: रंग कोड को तुरंत क्लिपबोर्ड पर कॉपी करें।
• सभी साफ़ करें: एक क्लिक से इतिहास से सभी रंग हटा दें।

प्रयुक्त प्रौद्योगिकियाँ

• HTML: एक्सटेंशन के पॉपअप के लिए मार्कअप।
• सीएसएस: पॉपअप और उसके तत्वों के लिए स्टाइलिंग।
• जावास्क्रिप्ट: रंग चुनने, रंग इतिहास प्रदर्शित करने और क्लिपबोर्ड संचालन का प्रबंधन संभालता है।
• आईड्रॉपर एपीआई: स्क्रीन से रंग चुनने की अनुमति देता है।
• localStorage: स्टोर ने सभी सत्रों के अनुसार रंग चुने।

परियोजना संरचना

1. HTML (index.html): रंग पिकर इंटरफ़ेस के लिए संरचना शामिल है।
2. सीएसएस (style.css): पॉपअप और उसके तत्वों को स्टाइल करता है।
3. जावास्क्रिप्ट (स्क्रिप्ट.जेएस): रंग चुनने, उन्हें प्रदर्शित करने और स्थानीय भंडारण के साथ इंटरैक्ट करने जैसी कार्यक्षमता का प्रबंधन करता है।
4. मैनिफ़ेस्ट (manifest.json): एक्सटेंशन के मेटाडेटा और कॉन्फ़िगरेशन को परिभाषित करता है।

इंस्टालेशन

स्थानीय स्तर पर एक्सटेंशन का परीक्षण करने के लिए:

1. फ़ाइलों को एक निर्देशिका में सहेजें।
2. क्रोम खोलें और chrome://extensions/ पर नेविगेट करें।
3. "डेवलपर मोड" सक्षम करें (ऊपर दाईं ओर टॉगल करें)।
4. "अनपैक्ड लोड करें" पर क्लिक करें और अपनी प्रोजेक्ट निर्देशिका चुनें।

प्रयोग

1. रंग पिकर को सक्रिय करने के लिए एक्सटेंशन पॉपअप में "रंग चुनें" बटन पर क्लिक करें।
2. स्क्रीन पर कहीं से भी एक रंग चुनें।
3. पॉपअप में चुने गए रंग देखें और उसके कोड को क्लिपबोर्ड पर कॉपी करने के लिए किसी भी रंग पर क्लिक करें।
4. इतिहास से सभी रंग हटाने के लिए "सभी साफ़ करें" पर क्लिक करें।

कोड स्पष्टीकरण

एचटीएमएल

    
    


    

        

            Pick Color
        
        

            

                
Picked colors
                Clear All
            
            

        
    

जावास्क्रिप्ट

const colorPickerBtn = document.querySelector("#color-picker");
const clearAll = document.querySelector(".clear-all");
const colorList = document.querySelector(".all-colors");
const pickedColors = JSON.parse(localStorage.getItem("picked-colors") || "[]");

const copyColor = (elem) => {
    elem.innerText = "Copied";
    navigator.clipboard.writeText(elem.dataset.color);
    setTimeout(() => elem.innerText = elem.dataset.color, 1000);
}

const showColor = () => {
    if (!pickedColors.length) return;
    colorList.innerHTML = pickedColors.map(color => `
        

${color}

`).join(""); document.querySelector(".picked-colors").classList.remove("hide"); document.querySelectorAll(".color").forEach(li => { li.addEventListener("click", e => copyColor(e.currentTarget.lastElementChild)); }); } showColor(); const activateEyeDropper = () => { document.body.style.display = "none"; setTimeout(async () => { try { const eyeDropper = new EyeDropper(); const { sRGBHex } = await eyeDropper.open(); navigator.clipboard.writeText(sRGBHex); if (!pickedColors.includes(sRGBHex)) { pickedColors.push(sRGBHex); localStorage.setItem("picked-colors", JSON.stringify(pickedColors)); showColor(); } } catch (error) { alert("Failed to copy the color code!"); } document.body.style.display = "block"; }, 10); } const clearAllColors = () => { pickedColors.length = 0; localStorage.setItem("picked-colors", JSON.stringify(pickedColors)); document.querySelector(".picked-colors").classList.add("hide"); } clearAll.addEventListener("click", clearAllColors); colorPickerBtn.addEventListener("click", activateEyeDropper);

सीएसएस

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
.popup {
  width: 350px;
  background: #fff;
}
.popup :where(.picker, header, .all-colors) {
  display: flex;
  align-items: center;
}
.popup .picker {
  padding: 30px 0;
  background: #E3F2FD;
  justify-content: center;
}
.picker #color-picker {
  border: none;
  outline: none;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 5px;
  background: #5372F0;
  transition: 0.3s ease;
}
#color-picker:hover {
  background: #2c52ed;
}
.picked-colors {
  margin: 10px 15px;
}
.picked-colors header {
  justify-content: space-between;
}
header .title {
  font-size: 1rem;
}
header .clear-all {
  cursor: pointer;
  font-size: 0.9rem;
  color: #5372F0;
}
header .clear-all:hover {
  color: #143feb;
}
.picked-colors.hide {
  display: none;
}
.picked-colors .all-colors {
  flex-wrap: wrap;
  list-style: none;
  margin: 10px 0 15px;
}
.all-colors .color {
  display: flex;
  cursor: pointer;
  margin-bottom: 10px;
  width: calc(100% / 3);
}
.all-colors .rect {
  height: 21px;
  width: 21px;
  display: block;
  margin-right: 8px;
  border-radius: 5px;
}
.all-colors .color span {
  font-size: 0.96rem;
  font-weight: 500;
  text-transform: uppercase;
  font-family: "Open sans";
}

लाइव डेमो

आप ऊपर दिए गए इंस्टॉलेशन निर्देशों का पालन करके स्थानीय रूप से एक्सटेंशन का परीक्षण कर सकते हैं। एक बार इंस्टॉल हो जाने पर, एक्सटेंशन का पॉपअप आपको रंग चुनने और अपना रंग इतिहास प्रबंधित करने की अनुमति देगा।

निष्कर्ष

यह कलर पिकर एक्सटेंशन दर्शाता है कि आईड्रॉपर एपीआई को ब्राउज़र एक्सटेंशन में कैसे एकीकृत किया जाए, जो उपयोगकर्ताओं को रंग चयन और प्रबंधन के लिए एक आसान टूल प्रदान करता है। चाहे आप एक डिज़ाइनर हों या रंगों के साथ काम करने का आनंद लेने वाले व्यक्ति हों, यह एक्सटेंशन आपके वर्कफ़्लो को बढ़ा सकता है।

क्रेडिट

• आईड्रॉपर एपीआई: स्क्रीन से रंग चुनने की कार्यक्षमता प्रदान करता है।
• पॉपिन फ़ॉन्ट: पॉपअप में टेक्स्ट को स्टाइल करने के लिए उपयोग किया जाता है।

लेखक

अभिषेक गुर्जर एक समर्पित वेब डेवलपर है जो व्यावहारिक और कार्यात्मक वेब एप्लिकेशन बनाने का शौक रखता है। GitHub पर उनके और प्रोजेक्ट देखें।