تصميم إضافة “extension”لمتصفح Google Chrome

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

أولا من الجدير بالذكر أن الإضافات في الجوجل كروم أو كما يسمونها ال “Extensions” هي خاصية جديده لم يتم إعتمادها للعامة بعد، حيث (كما يبدو) سوف يبدأ تطبيقها من النسخه الرابعه، وبما أن النسخه الثالثة من المتصفح تم إصدارها قبل فتره قريبه. ولكن الخبر السار هنا أن النسخة الرابعه التي يجري تطويرها بالإمكان تنزيلها، وهي كما تسمى نسخة المطورين و يمكن الحصول عليها من هذا الرابط، و هناك بعض المعلومات و الملاحظات عنها هنا طبعا نحن نقصد ال Dev channel وليس ال Beta.

حسنا لنبدأ العمل، و البداية دائما من خلال تحديد الهدف، وهدفنا في هذا الدرس هو إضافة للبحث في الإنترنت. ببساطة كما في الصوره (صورة أبلغ من ألف كلمة) :

ببساطة هذا ما نريد الحصول عليه، مربع نص و خسمة أزرار عند كتابة نص في مربع النص و الضغط على زر أحد محركات البحث أو المواقع، أو عند الضغط على Enter، يتم فتح Tab جديده تحتوي على نتائج البحث عن الكلمة التي تمت كتابتها داخل مربع النص!

لنبدأ...، أول ما عليك عمله هو تثبيت نسخة المطورين من Google Chrome لكي تستطيع تشغيل و التعامل مع الإضافات.

ثانيا قم بإنشاء مجلد (في أي مكان على الجهاز) لكي تضع الملفات الآزمه بداخله، و قم أولا بإنشاء الملف manifest.json ، داخل هذا الملف سوف نقوم بكتابة معلومات أساسية عن الإضافة، سنضع الكود التالي داخل الملف:

{

   “name”: “Search Tool bar Extension”,

   “Version” : “1.0”,

   “description” : “This tool bar enables you to make search in the main search engines”

   “toolstrips”: [

      “search_toolstrips.html”

   ]

}

كما نرى يحتوي الملف على بعض المعلومات الأساسية عن الإضافة، مثل الأسم و الإصدار و الوصف، و في النهاية توجد خاصية ال toolstrips و التي تعبر عن الملف\ات التي سوف تحتوي معلومات عن عناصر التحكم التي سوف تحتويها الإضافة (مثل الأزار و مربعات النص...) إضافة إلى الأكواد الرئيسية للإضافة. كما نلاحظ فإن معلومات هذه العناصر و الكود سوف يتم تخزينها في ملف طبعا من الواضح أنه من المفروض أن نقوم بإنشاء هذا الملف (في نفس المجلد السابق) ، حسنا لنبدأ بالكود التالي الذي يعبر عن مربع النص الذي نريد إضافته (ليس عليك إضافة وسوم html و body...):

<div class="toolstrip-text" >

  <input type="text" id="SearchBox" value="Search!">

</div>

هنا قمنا بإنشاء بإنشاء مربع نص داخل div طبعا كما نلاحظ أن ال Class المستخدم هو toolstrip-text و هو أحد ال class الخاصة بإضافات الجوجل كروم. من الجيد أن نذكر هنا أننا نريد تنفيذ السيناريو التالي مع مربع النص: عندما يضغط المستخدم بالماوس على مربع النص يتم مسح النص الموجود داخل مربع النص (من أجل إتاحة كتابة نص جديد)، وعندما يضغط خارج مربع النص (عند فقد التركيز، أي الحدث onblur) يتم فحص مربع النص إذا كان لا يحتوي على شيئ يتم إعادة كلمة “Search!”.

لعمل ذلك سوف نقوم بربط مربع النص مع مجموعه من الدوال التي سوف تقوم بهذه المهمة (طبعا هنا نتحدث عن ال JavaScript) إذن قم بتغير وسم مربع النص ليكون بالشكل التالي:

<div class="toolstrip-text" >

  <input type="text" id="SearchBox" value="Search!" onfocus="textBoxOnFocus()" onblur="textBoxO
nBlur()" onkeydown="textBoxOnKeyDown(event)">

</div>

إذا بذلك قمنا بربط الحدث onfocus مع دالة داخل كود ال JavaScript ونفس الشي مع الحدثين onblur و onkeydown. و بما أننا ذكرنا ال JavaScript سوف نقوم بوضع وسم خاص به في بداية الملف:

 

<

script type="text/javascript" src="SearchJs.js"/>

من الواضح أننا سوف نقوم بوضع أكود الجافا سكربت في ملف SearchJs.js لذا قم بإنشاء هذا الملف في مجلد الإضافة و إبدأ بكتابة الدالتين التاليتين، التان تقومان بوظيفة ال onfocus و onblur:

 

[color= #003366; font-weight: bold;]function textBoxOnFocus[color= #009900;]([color= #009900;])[color= #009900;]{

   document.[color= #006600;]getElementById[color= #009900;]([color= #3366CC;]'SearchBox'[color= #009900;]).[color= #006600;]value[color= #339933;]=[color= #3366CC;]''[color= #339933;];

[color= #009900;]}

 

 

[color= #003366; font-weight: bold;]function textBoxOnBlur[color= #009900;]([color= #009900;])[color= #009900;]{

   [color= #000066; font-weight: bold;]if[color= #009900;](document.[color= #006600;]getElementById[color= #009900;]([color= #3366CC;]'SearchBox'[color= #009900;]).[color= #006600;]value[color= #339933;]==[color= #3366CC;]''[color= #009900;])

   [color= #009900;]{

     document.[color= #006600;]getElementById[color= #009900;]([color= #3366CC;]'SearchBox'[color= #009900;]).[color= #006600;]value[color= #339933;]=[color= #3366CC;]'Search!'[color= #339933;];

   [color= #009900;]}

[color= #009900;]}

 

[color= #003366; font-weight: bold;]function textBoxOnKeyDown[color= #009900;](e[color= #009900;])[color= #009900;]{	

[color= #009900;]}

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

الآن سوف نقوم بإنشاء زر خاص بكل محرك، حيث سوف نعبر عن ذلك الزر بصورة. بحث مثل هذا في جوجل يساعد على إيجاد صور مناسبة للأزرار (إحرص على إنتقاء صور من نوع Gif أو png مع خلفيات شفافة). الآن في داخل ملف search_toolstrips.html قم بإضافة الوسوم التالية من أجل إنشاء الزر:

<div class="toolstrip-button" onclick="search('Google')">

  <img src="google.gif"/>

</div>

وبنفس الطريقة مع باقي الأزرار:

<div class="toolstrip-button"  onclick="search('Yahoo')">

  <img src="yahoo.gif"/>

</div>

 

<div class="toolstrip-button"  onclick="search('Bing')">

  <img src="bing.gif"/>

</div>

 

<div class="toolstrip-button"  onclick="search('Wiki')">

  <img src="wiki.png"/>

</div>

 

<div class="toolstrip-button"  onclick="search('YouTube')">

  <img src="youtube.png"/>

</div>

عليك ملاحظة أن تريتيب العناصر في الكود تنعكس على ترتيب ظهورها ضمن شريط الإضافة.

كما قلنا سابقا فإن المطلوب هو عندما نكتب شيئا في مربع النص و نضغط على أحد الأزرار يتم فتح Tab جديد فيها نتائج البحث في ذلك الموقع. إذا لتنفيذ ذلك سوف نقوم بعمل دالة بإسم search سوف تقوم هذه الدالة بإستقبال إسم محرك البحث على شكل نص. طبعا إستدعاء هذه الدالة سوف يتم في الحدث onclick الخاص بالزر (وهذا سبب وجود onclick="search('...') في وسوم الأزرار).

الآن لنلقي نظره على الدالة search():

[color= #003366; font-weight: bold;]function search[color= #009900;](site[color= #009900;])

[color= #009900;]{

   [color= #000066; font-weight: bold;]switch [color= #009900;]([color= #003366; font-weight: bold;]true[color= #009900;])

   [color= #009900;]{

     [color= #000066; font-weight: bold;]case [color= #009900;](site[color= #339933;]==[color= #3366CC;]"Google"[color= #009900;]) [color= #339933;]|| [color= #009900;](site[color= #339933;]==[color= #3366CC;]"Bing"[color= #009900;])[color= #339933;]:

       window.[color= #000066;]open[color= #009900;]([color= #3366CC;]'http://www.'[color= #339933;]+ site [color= #339933;]+[color= #3366CC;]'.com/search?&q=' [color= #339933;]+ document.[color= #006600;]getElementById[color= #009900;]([color= #3366CC;]'SearchBox'
[color= #009900;]).[color= #006600;]value[color= #009900;])[color= #339933;];

       [color= #000066; font-weight: bold;]break[color= #339933;];

 

     [color= #000066; font-weight: bold;]case [color= #009900;](site[color= #339933;]==[color= #3366CC;]"Yahoo"[color= #009900;])[color= #339933;]:

       window.[color= #000066;]open[color= #009900;]([color= #3366CC;]'http://search.yahoo.com/search?p=' [color= #339933;]+ document.[color= #006600;]getElementById[color= #009900;]([color= #3366CC;]'SearchBox'[color= #009900;]).[color= #006600;]v
alue[color= #009900;])[color= #339933;];

       [color= #000066; font-weight: bold;]break[color= #339933;];

 

     [color= #000066; font-weight: bold;]case [color= #009900;](site[color= #339933;]==[color= #3366CC;]"Wiki"[color= #009900;])[color= #339933;]:

       window.[color= #000066;]open[color= #009900;]([color= #3366CC;]'http://en.wikipedia.org/w/index.php?title=Special:Search&search=' [color= #339933;]+ documen
t.[color= #006600;]getElementById[color= #009900;]([color= #3366CC;]'SearchBox'[color= #009900;]).[color= #006600;]value[color= #009900;])[color= #339933;];

       [color= #000066; font-weight: bold;]break[color= #339933;];

 

     [color= #000066; font-weight: bold;]case [color= #009900;](site[color= #339933;]==[color= #3366CC;]"YouTube"[color= #009900;])[color= #339933;]:

       window.[color= #000066;]open[color= #009900;]([color= #3366CC;]'http://www.youtube.com/results?search_query=' [color= #339933;]+ document.[color= #006600;]getElementById[color= #009900;]([color= #3366CC;]'Se
archBox'[color= #009900;]).[color= #006600;]value[color= #009900;])[color= #339933;];

       [color= #000066; font-weight: bold;]break[color= #339933;];

 

   [color= #009900;]}

 

[color= #009900;]}

دالة بسيطة جدا، تستقبل قيمة في المتغير site (القيمة عبارة عن سلسلة نصية تحتوي إسم محرك البحث). بعدها نستعمل ال switch لكي نفحص قيمة المتغير site، فإذا كانت تحمل القيمة ‘Google’ أو ‘Bing’ يتم فتح صفحة جديدة في المتصفح بإستخدام الدالة document.open() ويتم إرسال سلسلة نصية تحتوي على ال Url للموقع الذي سوف يتم الإتجاه إليه في هذه الصفحة. بشكل عام المواقع التي تقدم خدمات للعامة تقوم بتطوير واجهات برمجية API لكي يسهل التعامل مع خدماتهم من قبل البرامج و التطبيقات الأخرى. في حالتنا هنا لن نتحدث عن أو نستعمل ال APIs الخاصة بالمواقع، ولكن سوف نستخدم طريقة بسيطة أخرى لكي نتعامل و نحصل على خدمات المواقع التي سوف نتعامل معها. للتوضيح بشكل أكبر، دعنا نفترض أننا نريد أن نعمل بحث عن كلمة في محرك جوجل ولكن بدون الدخول إلى صفحة الجوجل الرئيسية وكتابة كلمة البحث و من بعدها الضغط على زر البحثز لعمل ذلك بإمكننا ببساطة ملاحظة ال URL الذي ينتج بعد قيامنا بعملية البحث بالطريقة الإعتيادية (لنستعمل الكلمة TEST):

من خلال ملاحظة ال Query String نتوصل أنه بإمكاننا عمل بحث دون الدخول إلى الصفحة. إضافة كلمة البحث التي نريدها مكان كلمة TEST و بعد ذلك نسخ الرابط إلى المتصفح و التوجه إلى إليه، فسوف تظهر لنا صفحة النتائج الخاصة بكلمة البحث تلك. :) (أرجو أن يكون الكلام واضحا) طبعا نفس الكلام ينطبق على المواقع الأخرى (عملية بحث بسيطة في كل من تلك المواقع بالإمكان التعرف على طريقة التعامل مع الرابط).

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

 

window.[color= #000066;]open[color= #009900;]([color= #3366CC;]'http://www.'[color= #339933;]+ site [color= #339933;]+[color= #3366CC;]'.com/search?&q=' [color= #339933;]+ document.[color= #006600;]getElementById[color= #009900;]([color= #3366CC;]'SearchBox'[color= #009900;]).[color= #006600;]value
[color= #009900;])[color= #339933;];

حيث يتم فتح نافذة جديده بالرابط المرسل، المكون من ‘http://www.’ و إسم الموقع المخزن في المتغير site و بعدها ‘.com/search?&q=’ و من ثم يتم إرفاق كلمة البحث الموجوده في مربع النص الذي يحمل ال id = 'SearchBox'.

الآن بعد جاهزية الدالة Search()، لم يتبقى علينا إلا تجهيز الدالة textBoxOnKeyDown()، حيث قلنا أننا نريد أن يستجيب مربع النص عندما نقوم بالضغط على زر Enter بحيث ينفذ عملية البحث في جوجل:

[color= #003366; font-weight: bold;]function textBoxOnKeyDown[color= #009900;](e[color= #009900;])[color= #009900;]{

   [color= #003366; font-weight: bold;]var keynum [color= #339933;]= e.[color= #006600;]which[color= #339933;];

   [color= #000066; font-weight: bold;]if[color= #009900;](keynum[color= #339933;]==[color= #3366CC;]"13"[color= #009900;])[color= #009900;]{

     search[color= #009900;]([color= #3366CC;]'Google'[color= #009900;])[color= #339933;];

   [color= #009900;]}

[color= #009900;]}

حيث تستقبل الدالة من النظام المتغير e الذي يحتوي على معلومات عن الزر المضغوط، و يمكن الوصول لهذا الزر من خلال الخاصية which (هذه الدالة خاصة بالأوبرا و السفاري و الكروم، وهناك غيرها للمتصفحات الأخرى). بعد ذلك نفحص فيما إذا كانت قيمة المتغير الذي يعبرعن الزر المضغوط = 13 (أي Enter)، إذا كان كذلك يتم إستدعاء الدالة Search ويتم إرسال القيمة ‘Google’ لها.

بهذا نكون قد إنتهينا من برمجة الإضافة الأولى لمتصفح الكروم..

الآن لتركيب هذه الإضافة و تجربتها على المتصفح (نسخة المطورين طبعا) أكتب chrome://extensions/ في شريط العنوان للمتصفح، بعد ذلك إضغط على زر Load unpacked extension… و انتقل إلى المجلد الذي قمت بوضع الملفات بداخله. ستلاحظ ظهور شريط الإضافة التي قمنا بتطويرها (في حال عدم وجود أخطاء في الكود).

:happy:

و الله ولي التوفيق...

خلدون خالد – الفريق العربي للبرمجة.

ملفات الكود و الملفات الآخرى في المرفقات..

SearchToolBar.zip

نسخة pdf عن الملف:

Search_Toolbar.pdf

صراحة لم أعرف في أي قسم أضع هذا الدرس، فقمت بوضعه هنا :)