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

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

البدء في استخدام ملحقات الويب أسهل مما تعتقد! إذا كنت تعرف JavaScript، فالأمر سهل للغاية — مجرد مسألة تعلم واجهة برمجة تطبيقات جديدة. ففي نهاية المطاف، لا تزال جافا سكريبت في جوهرها.

هذه المقالة عبارة عن ملحق لـ: دليل ملحقات Chrome: الذاكرة الثقيلة إلى الجاهزية للإنتاج

جدول المحتويات

• امتدادات الويب 101
• تحليل البيان:
• إنشاء أداة تنزيل صور بسيطة
• وظيفة التنزيل:
• نحن على استعداد لاختبار الامتداد الخاص بنا
• تحميل الامتداد
• خاتمة

ملحقات الويب 101

تشبه ملحقات الويب التعديلات، ولكنها مخصصة للمتصفحات. يمكنك تخصيص سلوك المتصفح بشكل كامل - فكر في AdBlock - أو كيف يبدو، مثل سمات Mozilla.

للبدء، قم بإنشاء مجلد جديد!

كل ما تحتاجه هو ملف Manifest.json. إنها الوظيفة الرئيسية ولكن لملحقات الويب. إنه الملف الأول الذي يبحث عنه المتصفح!

{
    "manifest_version": 3,
    "name": "img-downl",
    "version": "1.0",
    "description": "image ac?",
    "content_scripts": [
        {
            "matches": [""],
            "js": ["content.js"]
        }
    ],
    "permissions": [
        "activeTab"
    ]
}

يحتوي البيان على جميع البيانات الوصفية الخاصة بامتدادك. إنها الطريقة التي تفهم بها المتصفحات امتدادك وما يمكنها فعله.

كسر البيان:

• "الإصدار_الظاهر": 3، يخبر هذا المتصفح بإصدار واجهة برمجة التطبيقات (API) الذي ستستخدمه. نظرًا لأن الإصدار 2 هو الإصدار السابق، فإن الإصدار 3 (V3) هو أحدث واجهة برمجة تطبيقات. إنه أكثر أمانًا وأداءً، وقد انتقلت معظم المتصفحات، بما في ذلك Chrome، إلى الإصدار 3 فقط.

أحد الاختلافات الرئيسية هو الانتقال من البرامج النصية الثابتة في الخلفية إلى العاملين في الخدمة. تم تشغيل البرامج النصية الخلفية في الإصدار 2 طوال عمر الامتداد بالكامل (أثناء قيام المستخدم بالتصفح)، ومن هنا جاء الجانب "المستمر". في الإصدار الثالث، يتم تشغيلها فقط عند الضرورة!

• نصوص المحتوى: يتم إدخال البرامج النصية للمحتوى في صفحة الويب نفسها. في ملحقنا الصغير، سيتم إدراج content.js في أي عنوان URL يطابق "matches": [""]. لذا، عندما تتصفح إلى أي عنوان URL أو تفتح علامة تبويب جديدة، سيتم إدخال content.js في الصفحة وتشغيله.

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

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

إنشاء أداة تنزيل صور بسيطة

مستعد؟

هذا الامتداد مستوحى من دورة تدريبية حول رؤية الكمبيوتر أخذتها منذ فترة. لقد طُلب منا تنفيذ أداة لتنزيل الصور من بحث Google.

ملاحظة: لا أقترح تشغيل هذا الامتداد في جميع الأوقات إلا إذا كنت تريد تنزيل الصور في كل مرة تتصفح فيها.

في نفس المجلد الذي يحتوي على ملف Manifest.json، أنشئ content.js والصق ما يلي:

async function processAllImages() {
    const images = document.querySelectorAll('img');
    let count = 0;
    for (const img of images) {
        const url = img.src;
        const filename = `image${count  }.png`; // Generate a filename for each image
        try {
            await downloadImage(url, filename);
            console.log(`Downloaded ${filename}`);
        } catch (error) {
            console.error(`Error downloading image from ${url}:`, error);
        }
    }
}
// Run the function to process and download images
processAllImages();

تذكر أنه يتم إدخال نص برمجي للمحتوى في صفحة الويب. على سبيل المثال، عند الانتقال إلى example.com، سيتم تشغيل ProcessAllImages.

كل ما يفعله هو التقاط جميع عناصر الصورة وتمريرها إلى وظيفة التنزيل:

const images = document.querySelectorAll('img');

وظيفة التحميل:

async function downloadImage(url, filename) {
    return new Promise((resolve, reject) => {
        fetch(url)
            .then(response => {
                if (!response.ok) throw new Error('Network response was not ok.');
                return response.blob();
            })
            .then(blob => {
                const a = document.createElement('a');
                a.href = URL.createObjectURL(blob);
                a.download = filename;
                a.style.display = 'none';
                document.body.appendChild(a);
                a.click();
                URL.revokeObjectURL(a.href); // Clean up the object URL
                document.body.removeChild(a);
                resolve();
            })
            .catch(error => reject(error));
    });
}

ملاحظة: هذا سيعمل فقط مع الصور الثابتة. قد تكون الصور الديناميكية والمحملة ببطء تالفة، وهذا شيء يمكنك التعامل معه في التكرارات المستقبلية.

نحن على استعداد لاختبار امتدادنا

أنا أستخدم Brave، الذي يعتمد على Chrome، ولكن العملية متشابهة عبر المتصفحات.

للاختبار، تحتاج إلى تمكين وضع المطور في المتصفح الذي اخترته.

جارٍ تحميل الامتداد

يجب أن يعمل هذا الامتداد، بدون تغيير، في Mozilla أيضًا لأننا لا نعتمد على مساحة اسم Chrome.

شجاع:

              اكتب Brave://extensions/ في شريط العناوين.        

              تمكين وضع المطور.      

              قم بتحميل الامتداد عن طريق تحديد المجلد.
             

   Chrome وEdge: اتبع الخطوات المشابهة لـ Brave.

         (chrome://extensions/ أو edge://extensions/)

خاتمة

التعديلات - التعديلات ممتعة! قد يكون هذا الامتداد بسيطًا، ولكنه يعرض الأساسيات للبدء. تمتلك Mozilla’s MDN موردًا مثاليًا لتعزيز معرفتك بامتدادات الويب (سواء امتدادات الويب العامة أو الخاصة بالمتصفح).

تذكر: قم بإيقاف تشغيل الامتداد أو إلغاء تثبيته عند الانتهاء لتجنب التنزيلات غير المرغوب فيها.

أو الأفضل من ذلك...

التحدي: اكتشف طريقة لتلقي الإدخال (تلميح: النقر والرمز والبرنامج النصي للخلفية) وتشغيل وظيفة معالجة الصور فقط عندما ينقر المستخدم على زر.