!Opera extensions ‏قل مرحبا لـ

By idev007

From Opera 15 onward, Opera 11 & 12’s extension format is no longer supported, and instead, we’ve switched to Chromium’s extension model. Check out our new documentation for developing extensions for Opera 15 and higher and start building your own extensions.

مقدمة

هذا المقالة تأخذك خلال الخطوات الأساسية لإنشاء أول إضافة لك (Extensions or Add-on). ستقوم بإنشاء زر (button) على شريط الأدوات لـ Opera، عندما يتم الضغط علية سيقوم بعرض نافذة منبثقة تحمل في داخلها الرسالة "!Hello World". الإضافات في Opera يتم كتابتها باستخدام معايير الويب العادية، كل ما تحتاجه للبدا هو نسخة من Opera 11 ومحرر النصوص المفضل لديك.

الإعدادات تبع الإضافة

أولاً، ستقوم بإنشاء ملف الإعدادات، الذي يحتوي على البيانات الوصفية (meta data) التي تصف الإضافة. هنا يتم وضع بعض معلومات مثل اسم الإضافة، اسم الكاتب و الأيقونة التي ستظهر في مدير الإضافات (Extension Manager). الإضافات في Opera تستخدم الـ W3C Widgets packaging and configuration format، والتي قد تكون مألوفة لديك من Opera Widgets.

أمض قدماً وقم بإنشاء ملف الإعدادات على النحو التالي:

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" id="http://www.example.org/helloworld">
	<name>Hello extensions!</name>
	<description>A simple hello world example</description>
  	<author href="yourURL" email="yourEMail">Enter your name here</author>
  	<icon src="hello.png"/>
</widget>

قم بحفظ الملف باسم config.xml في مجلد مستقل، وليكن "oexten".

إنشاء أيقونة الإضافة

ربما قد لاحظت عنصر الـ icon element tag) icon) في ملف الإعدادات. يقوم هذا العنصر بتعيين أيقونة في مدير الإضافات و موقع الإضافات في Opera. من المفضل إنشاء أيقونة بإبعاد 64×64 بكسل.

قم بتحميل أيقونة hello.png وقم بحفظها في مجلد قم بتسميته "icons" داخل مجلد "oexten"، الذي قمنا بإنشائه سابقاً.

إنشاء زر (button) على شريط أدوات Opera

بعد أن قمت بوضع الإعدادات للإضافة، يمكنك البدا في إنشاء الشفرة (code) الفعلية. إنشاء زر، والذي سيتم إضافته إلى شريط الأدوات. يمكن القيام بذلك على النحو التالي:

<!doctype html>
<html lang="en">
  <head>
    <script>
       window.addEventListener("load", function(){
        var theButton;
        var ToolbarUIItemProperties = {
          title: "Hello World",
          icon: "hello-button.png",
          popup: {
            href: "popup.html",
            width: 110,
            height: 30
          }
        }
        theButton = opera.contexts.toolbar.createItem(ToolbarUIItemProperties);
        opera.contexts.toolbar.addItem(theButton);
      }, false);
    </script>
  </head>
  <body>
  </body>
</html>

قم بحفظ الملف باسم index.html في مجلد "oexten"

إي إضافة للـ Opera تحتاج ملف البدا (start file)، عاده يسمى index.html. يمكنك تغيير اسم الملف لكن يحب أن تخصص ذلك في ملف الإعدادات باستخدام عنصر الـ <src content="" />. هذا الملف عبارة عن قالب HTML مع سكربت الذي يقوم بإنشاء عنصر واجهة المستخدم (UI elements). عنصر الـ body لا يتم استخدامه.

السكربت سينشئ زر على شريط الأدوات مع عدة خواص (properties). أيضا سينشئ تلميح (tooltip) مع أيقونة 18×18 بكسل. أيضا سينشئ نافذة منبثقة للزر مع الحجم المحدد, مع صلة الى حيث تم تعيين النافذة المنبثقة (UI).

يمكنك تحميل hello-button.png icon وحفظها في المجلد الرئيسي "oexten"

إنشاء نافذة منبثقة

لقد قمت بإنشاء زر سابقاً، وقمت بتعيين قياس النافذة المنبثقة، لم يبق لك سوى إنشاء المحتوي الذي ستعرضه النافذة المنبثقة. المحتوى مجرد مستند HTML، يمكنك أاستخدام ما يحلوا لك JavaScript، CSS، HTML أو أي من التقنيات الأخرى التي تستخدمها عادتاً مع مستند HTML عادي. ستقوم بإنشاء صفحة تحتوي على "!hello world" فقط هذا الجملة:

<!doctype html>
<html lang="en">
  <head>
  	<title>Hello World!</title>
  	<style>
  		h1 {
  			font: 14px helvetica, arial, sans-serif;
  			text-align: center;
  		 }
  	</style>
  </head>
  <body>
  	<h1>Hello World!</h1>
  </body>
</html>

قم بحفظ الملف باسم popup.html في مجلد "oexten".

تغليف وتثبيت الإضافة

لحد الآن لديك إضافة شبه منتهية. بينما تقوم بالتطوير، يمكنك سحب ملف config.xml إلى Opera وسيقوم بتثبيتها في وضع التطوير (Developer Mode). يسمح لك ذلك بتعديل الملفات وتحديث الإضافة بضغطة زر فقط، بدلاً من باستمرار إزالة وإعادة تثبيت الإضافة.

إذا أنت راضي عن العمل الذي قمت بة وأصبح جاهز للنشر، لم يتبقى سوى تحديد كل الملفات وضغطهم. بعد أن تقوم بذلك, يجب أن تعيد تسمية لاحقة الملف المضغوط إلى HelloExtension.oex ( دائماً تذكر تغيير لاحقة الملف المضغوط ) وبهذا أصبحت الإضافة جاهزة لاختبارها.

ملاحظة:

يجب أن تتأكد عند ضغط الملفات أن الملفات والمجلدات تبع الإضافة موجودين في الـ root في الملف المضغوط، وليس بداخل مجلد، ولضمان ذلك، يجب أن تقوم بضغط الملفات من داخل مجلد الإضافة، وليس ضغط مجلد الإضافة نفسه.

يمكنك تحميل HelloExtension الإضافة النهائية.

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

This article is licensed under a Creative Commons Attribution 3.0 Unported license.