كيفيه برمجه اضافات جوجل كروم (الجزء الرابع) / Google Extention

Google Extention

سنتكلم اليوم عن امرين مهمين جدا لكل مطور تطبيقات لمتصفح جوجل كروم،هما الـ API و الرسائل التي من غير الممكن الإستغناء عنهما عند تطوير أي إضافة للمتصفح.
بطبيعة الحال يوفر جوجل كروم العديد من الوظائف عن طريق الـ API،لمن ﻻ يعرفها فهي اختصار لجملة Application Programming Interface،و هي تخص الوظائف التي يوفرها جوجل كروم أو يستخدمها في عمله و يتيح للمطور استخدامها و الإستفادة منها في تطبيقاته.
كما ذكرت قبل قليل،فإن كروم يوفر العديد من الوظائف و ﻻ يمكن بأي حال من الأحوال تغطيتها جميعا و لكن عليك الإطلاع على التوثيق الرسمي لها حتى تستطيع فهم آلية العمل مع معرفة كيفية الإستخدام.
يمكنك زيارة التوثيق الرسمي لها من هنا.

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

One-Time Request: سأعطيكم مثاﻻ بسيطا حتى تتضح الأمور،لو اردنا الإستفسار أو اخذ معلومات عن صفحة معينة،و نريد اخذ معلومات تخص الـ DOM الخاص بالصفحة...سنقوم بكتابة الكود التالي:

كود:

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
    switch(request.type) {
        case "dom-loaded":
            alert(request.data.myProperty);
        break;
    }
    return true;
});

يتم كتابة هذا الكود في صفحة الـ background(اعتقد أنكم تتذكرونها) و في ملف content سنضع الكود التالي ﻻستقبال المعلومات

كود:

window.addEventListener("load", function() {
    chrome.extension.sendMessage({
        type: "dom-loaded",
        data: {
            myProperty: "value"
        }
    });
}, true);

Long-lived Connection: يستخدم هذا النوع ﻹنشاء اتصال دائم،و ذلك عن طريق وضع الكود التالي في صفحة الـ content

كود:

var port = chrome.runtime.connect({name: "my-channel"});
port.postMessage({myProperty: "value"});
port.onMessage.addListener(function(msg) {
    // do some stuff here
});

كود:

و في صفحة الـ background نضع الكود التالي:

chrome.runtime.onConnect.addListener(function(port) {
    if(port.name == "my-channel"){
        port.onMessage.addListener(function(msg) {
            // do some stuff here
        });
    }
});

و هكذا نكون قد ختمنا هذه الدورة , و كالعادة لابد من التطبيق لتصبح متميز ...