الموقع تحت التجريب

الثلاثاء، 21 يناير 2014

برمجة إضافات كروم-الجزء الثالث

8:58 ص

شاركها

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

أدوات المطورين Developer Tools: تمكنك هته الخاصية من إضافة ألسنة جديدة لتطبيقك و بالتالي يمكنك جعل اﻹضافة تعمل ﻷكثر من مرة،حتى تستطيع استخدام هته الخاصية عليك إنشاء صفحة ويب جديدة و بعدها تطلبها في ملف manifest.json كاﻵتي:
"devtools_page": "devtools.html"
في داخل الملف نقوم بتضمين ملف الأكواد البرمجية الخاصة بالجافاسكريبت كالتالي:
كما تلاحظون علينا انشاء ملف جديد بإسم devtools.js:يمكنكم تسميته كما تشاؤون و لكن عليكم تغيير الإسم عند القيام بتضمين الملف.في ملف الجافاسكريبت ضع الكود التالي

chrome.devtools.panels.create(
    "TheNameOfYourExtension",
    "img/icon16.png",
    "index.html",
    function() {

    }
); 
أعتقد أن الكود بسيط و مفهوم و ﻻ يحتاج لشرح دقيق،فلا شيء مبهم فيه...لننتقل إلى نقطة أخرى...

الـ Omnibox:
متصفح جوجل كروم يتيح لنا إصدار أوامر كتابية له لتنفيذها،هذه الأوامر هي في اﻷصل كلمات مفتاحية تم وضعها من قبل مبرمجي الإضافات.
يتم تعريف الكلمات المفتاحية في ملف manifest.json و تتم العملية كالأتي:
"omnibox": { "keyword" : "yeah" }
تلاحظون بأنه تم تعريف omnibox على أنه مصفوفة(قاموس).يتم تعريف الكلمات المفتاحية في ملف الخلفية Background-تتذكرونه- كاﻵتي:
chrome.omnibox.onInputChanged.addListener(function(text, suggest) {
    suggest([
      {content: text + " one", description: "the first one"},
      {content: text + " number two", description: "the second entry"}
    ]);
});
chrome.omnibox.onInputEntered.addListener(function(text) {
    alert('You just typed "' + text + '"');
});
لو قمنا بكتابة yeah في المتصفح لتحصلنا على التالي:


 نكتفي بهذا القدر لهذا اليوم،في الدروس المقبلة سنتعرف إن شاء الله على أشياء جديدة و سنبدأ بالواجهة البرمجية Application Programming Interface و المعروفة اختصارا بالـ API 

0 التعليقات:

إرسال تعليق