كيف حالكم مع متصفح جوجل كروم؟
سنتكلم اليوم عن امرين مهمين جدا لكل مطور تطبيقات لمتصفح جوجل كروم،هما الـ 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
});
}
});
أعلم تماما بأني لم أشرح كثيرا و لكن سيتم شرحها بالتفصيل في الجانب التطبيقي ﻷنها أمور برمجية لن تستطيع فهمها إن لم تكن تمتلك خبرة بسيطة مع لغة الجافاسكريبت.
إن شاء الله في الدروس المقبلة سأشرح شرحا دقيقا لكل ما جاء في هذا الدرس و الدروس السابقة عن طريق تطبيق ما جاء في كل الدروس لتطوير إضافة بسيطة لمتصفح جوجل كروم…إلى ذلكم الحين استودعكم الله،دمتم بود،سلام