مقدمة

في منشور المدونة هذا، سنستكشف كيفية إنشاء ملحق متصفح بسيط ولكنه قوي لمنتقي الألوان. يتيح هذا الامتداد للمستخدمين اختيار الألوان بسهولة من شاشتهم، وعرض سجل الألوان المختارة، وإدارة لوحة الألوان الخاصة بهم من خلال تفاعلات بسيطة.

نظرة عامة على المشروع

يوفر ملحق Color Picker واجهة سهلة الاستخدام من أجل:

• اختر الألوان من الشاشة باستخدام EyeDropper API.
• عرض تاريخ الألوان المختارة.
• نسخ رموز الألوان إلى الحافظة.
• مسح كافة الألوان المختارة.

سمات

• اختيار الألوان: استخدم EyeDropper API لتحديد الألوان من أي جزء من شاشتك.
• سجل الألوان: احتفظ بقائمة من الألوان المختارة مع سهولة الوصول إليها.
• نسخ الحافظة: نسخ رموز الألوان بسرعة إلى الحافظة.
• مسح الكل: إزالة جميع الألوان من السجل بنقرة واحدة.

التقنيات المستخدمة

• HTML: ترميز النافذة المنبثقة للامتداد.
• CSS: تصميم النافذة المنبثقة وعناصرها.
• جافا سكريبت: يتعامل مع انتقاء الألوان وعرض سجل الألوان وإدارة عمليات الحافظة.
• EyeDropper API: يسمح باختيار الألوان من الشاشة.
• التخزين المحلي: يخزن الألوان المختارة عبر الجلسات.

هيكل المشروع

1. HTML (index.html): يحتوي على بنية واجهة منتقي الألوان.
2. CSS (style.css): تحديد أنماط النافذة المنبثقة وعناصرها.
3. JavaScript (script.js): يدير الوظائف مثل اختيار الألوان وعرضها والتفاعل مع التخزين المحلي.
4. البيان (manifest.json): يحدد البيانات الوصفية للإضافة وتكوينها.

تثبيت

لاختبار الامتداد محليًا:

1. حفظ الملفات في الدليل.
2. افتح Chrome وانتقل إلى chrome://extensions/.
3. تمكين "وضع المطور" (التبديل في أعلى اليمين).
4. انقر فوق "تحميل غير مضغوط" وحدد دليل المشروع الخاص بك.

الاستخدام

1. انقر فوق الزر "اختيار اللون" في النافذة المنبثقة للإضافة لتنشيط منتقي الألوان.
2. اختيار لون من أي مكان على الشاشة.
3. عرض الألوان المختارة في النافذة المنبثقة وانقر على أي لون لنسخ الكود الخاص به إلى الحافظة.
4. انقر على "مسح الكل" لإزالة كافة الألوان من السجل.

شرح الكود

HTML

    
    


    

        

            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);

CSS

@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";
}

العرض المباشر

يمكنك اختبار الامتداد محليًا باتباع تعليمات التثبيت أعلاه. بمجرد التثبيت، ستسمح لك النافذة المنبثقة للامتداد باختيار الألوان وإدارة سجل الألوان الخاص بك.

خاتمة

يوضح ملحق Color Picker كيفية دمج EyeDropper API في ملحق المتصفح، مما يوفر للمستخدمين أداة سهلة الاستخدام لاختيار الألوان وإدارتها. سواء كنت مصممًا أو مجرد شخص يستمتع بالعمل مع الألوان، يمكن لهذا الملحق تحسين سير عملك.

الاعتمادات

• EyeDropper API: يوفر وظيفة اختيار الألوان من الشاشة.
• خط Poppins: يستخدم لتصميم النص في النافذة المنبثقة.

مؤلف

أبهيشيك جورجار هو مطور ويب متخصص متحمس لإنشاء تطبيقات ويب عملية وعملية. اطلع على المزيد من مشاريعه على GitHub.