بایگانیِ دستهٔ ‘برنامه نویسی فایرفاکس’

قبل از شروع:
برنامه نويسي فايرفاکس قسمت 0
برنامه نويسي فايرفاکس قسمت 1
برنامه نويسي فايرفاکس قسمت 2
در ابتدا لازم مي دانم به خاطر تاخيري که در آپديت اين قسمت رخ داد از تمام کساني که اين سري از آموزش هاي برنامه نويسي فايرفاکس را دنبال مي کردند عذر خواهي کنم.
در اين قسمت به دو مورد مي رسيم. اول از همه تگ در XUL که از مهمترين تگ ها به حساب مي آيد و بعد هم مي رويم سراغ بکارگيري جاوااسکريپت براي اکشن دادن به اينترفيس هايي که طراحي کرده ايم.
<overlay>
از اين تگ در مواردي استفاده مي کنيم که قصد داشته باشيم به قابليت هاي يک فايل XUL موجود اضافه کنيم. براي درک بهتر مثالي مي زنم. فرض کنيد مي خواهيد به مرورگر فايرفاکس تان کليد يا منو اضافه کنيد براي اين کار به سراغ استفاده از اين تگ مي رويم.
الان با هم فايل XUL مي نويسيم که يک منوي ديگر به راست کليک در صفحه اضافه کند(در ادامه قصد داريم از اين منو استفاده کنيم.) گفتيم که <overlay> براي اضافه کردن يک قابليت جديد استفاده مي شود. اما الان براي کارمان بايد منو را به کدام فايل XUL اضافه کنيم. پاسخ فايل Browser.xul است. اين فايل در واقع اينترفيس مرورگر فاير فاکس تان است. براي پيدا کردن اين فايل به دايرکتوري که فايرفاکس را در آن نصب کرده ايد برويد سپس در فولدر chrome فايل browser.jar را با نرم افزاري مشابه winzip از حالت فشرده خارج کنيد. حالا مي توانيد اين فايل را به اين آدرس بيابيد: Content\Browser\Browser.xul اگر اين فايل را با يک نمايش دهنده ي فايل هاي XUL مثل XUL Viewer افزونه Extension Developer که در قسمت 0 معرفي کرديم و حتي با خود فايرفاکس تان باز کنيد ظاهر مرورگر را بدون هيچ اکشني مي توانيد ببيند.
به برنامه ي خودمان برميگرديم. برنامه زير منو URL Picker… را به منو راست کليک اضافه مي کند.

<?xml version="1.0"?>
<overlay id="linkhandler_overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<popup id="contentAreaContextMenu">
<menuitem id="linkHandlerMenu" label="URL Picker..." />
</popup> 

</overlay>

فقط بايد دقت کنيد <«popup id=»contentAreaContextMenu»> همان تگ بکار رفته در فايل Browser.xul است که براي تعريف منو هاي راست کليک استفاده مي شود.
اجازه بدهيد به اين منوي اضافه شده اکشن هم بدهيم. قبلا هم گفتيم که براي اکشن دادن از جاوااسکريپت استفاده مي شود. به همان شکلي که در HTML فايل خارجي جاوااسکريپ را مشخص مي کنيم اين جا نيز به همان ترتيب عمل مي کنيم. از اينجا تقريبا مشابه کار HTML با جاواسکريپت است.

<script type="application/x-javascript"
src="chrome://linkhandler/content/browser_overlay.js" />

و menuitem را با خط زير جايگزين مي کنيم.

<menuitem id="linkHandlerMenu" label="URL Picker..."
      oncommand="newMessage(gContextMenu.linkURL);"/>

نوبت به نوشتن فايل جاوااسکريپت ميرسد. در همان فولدري که فايل XUL را ساخته ايم browser_overlay.js را هم ايجاد مي کنيم. و درون آن متن زير را کپي مي کنيم.

function newMessage(url){
	alert(url);
}

فايل ها را به همان روشي که در قسمت هاي قبلي شرحش آمد آمد بسته بندي کرده و براي افزودن به فايرفاکس آماده مي کنيم.
اين افزونه را مي توانيد از (اينجا) دانلود کنيد.
در قسمت نظرات پاسخگوي سؤالات احتمالي شما هستم.

قبل از شروع:
برنامه نويسي فايرفاکس قسمت 0
برنامه نويسي فايرفاکس قسمت 1
همانطور که قول داده بوديم الان نوبت به آموزش XUL مي رسد، آموزش XUL سعي مي کنم عملي و به همراه يک مثال جلو ببريم. مثالي که براي اين جا انتخاب کردم اينترفيس يک افزونه است که با ستفاده از سايت TinyURL آدرس هاي بلند را به URL کوتاه شده توسط سايت TinyURL تبديل مي کند. اميدوارم با انتخاب اين مثال موافق باشيد. با توضيحاتي مختصر در مورد کليت زبان XUL به سراغ طراحي اينترفيس افزونه مورد نظرمان که اسمش را TinyURL Creator گذاشتم مي رويم.
XUL يا (XML User-interface Language) براي توسعه سريع تر و راحت تر مرورگر فايرفاکس ايجاد شد. اين زبان که بر پايه زبان XML ايجاد شده تمامي ويژگي هاي XML را نيز شامل مي شود. به طور مثال زبان هاي ديگر XML و نيز HTML را مي توان به داخل آن وارد کرد. XUL را مي توان به راحتي به زبان هاي ديگر ترجمه کرد براي استايل XUL مي توان از CSS استاندارد بدون اعمال هيچگونه تغييري استفاده کرد که اين را مي توان مزيت بزرگي براي آن بشمار آورد. Cross-platform بودن آن از ساير برتري هاي آن است که آن را قابل حمل کرده است.
قبل از شروع بايد يادآوري کنم که براي استفاده از آموزش ها در زمينه ي XUL بايستي از قبل HTML بلد باشيد و يا حداقل اطلاعات کلي در زمينه ي XML و CSS داشته باشيد.

  • المنت هاي XUL بايتي به صورت کوچک نوشته شوند، XUL به مانند XML و بر خلاف HTML حساس به حروف يا Case-sensetive است.
  • مقدار المنت ها بايستي در کوتيشن قرار بگيرند. حتي اگر عدد باشند.

window
هر اينترفيس XUL داراي حداقل يک تگ ريشه با نام window است. اين تگ را مي توانيد همانند تگ <HTML> در فايل هاي html تصور کنيد البته نه کاملا…

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window
    id="TUCreator-window"
    title="TinyURL Creator"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 ...
</window>

بياييد با هم المنت هاي تگ window را با هم بررسي کنيم.
مقدار المنت id براي ارجاع به اين تگ توسط جاوااسکريپت استفاده مي شود. پس بايد در کل XUL مقدار آن منحصر به فرد باشد.
Title همان نقشي را که در html دارد را اينجا هم دارد و عنوان بالاي Window را مي نويسد با اين تفاوت که اينجا بر خلاف html تگ جداگانه اي نيست و به عنوان المنت تگ window بکار مي رود.
xmlns هم namespace افزونه هاي فايرفاکس هست که هميشه مقدار http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul به آن داده مي شود.
به جاي … هم ادامه تگ ها که همه زير مجموعه تگ window هستند در ادامه خواهند آمد.
براي طراحي اينترفيس
TinyURL Creator به دو ورودي متن يکي براي ورود Long URL و يکي براي URL کوتاه شده توسط TinyURL احتياج داريم. هر کدام از اين ورودي ها به يک Label احتياج دارند و همچنين يک کليد براي دستور ايجاد URL جديد نياز است که به طاراحي آن ها مي پردازيم.

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window
    id="TUCreator-window"
    title="TinyURL Creator"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<label control="LongLabel" value="Long URL: " style="font-weight:bold;"/>
<textbox id="LongURL" value="http://"/> 

<label control="TinyURL"  value="TinyURL: " style="font-weight:bold;"/>
<textbox id="TinyURL" value="" readonly="true" /> 

<button id="tinyCreate" label="Create"/> 
</window>

ابتدا بياييد با هم نتايج کد بالا ببينيم سپس کد را با هم بررسي خواهيم کرد. کد را هم از (اينجا) دريافت کنيد.



Label

از تگ Label براي درج متن در پنجره هاي XUL استفاده مي شود. المنت هاي استفاده شده value که نوشته ي متن را مشخص مي کند و style که استايل متن را يا استفاده از CSS مشخص مي کند.
textbox
تگ ورودي متن. المنت id براي ارجاع به جاوااسکريپت، value براي مقدار پيشفرض و از المنت readonly که براي تعيين قابليت اديت بودن اين قسمت توسط کاربر استفاده مي شود.
button
تگ Button براي درج کليد استفاده مي شود. در اينجا تنها ما از دو المنت id براي نامگذاري و value براي برچسب کليد استفاده کرديم.
لازم به ذکر است که تگ هاي بالا مي توانند المنت هاي ديگري را نيز بگيرند که در جاي لازم از آن ها استفاده خواهيم کرد.
در ادامه دو تگ ديگر را نيز معرفي خواهيم کرد که براي اصلاح ظاهر اينترفيس بکار ميرود تگ vbox و تگ hbox عملکرد اين تگ ها بدين شکل مي باشد که عناصر ما بين تگ hbox به صورت افقي مرتب مي شوند و بالعکس عناصر مابين تگ vbox به صورت عمودي مرتب مي گردند. همانطور که در کد و شکل بالا نيز ديديد در صورت عدم استفاده از اين تگ ها عناصر ما به صورت عمودي مرتب مي شوند .
کد مرتب شده را از (اينجا) و شکل حاصله را در زير ببينيد.

اميدوارم از اين قسمت استفاده برده باشيد. در قسمت هاي آينده به تکميل اين افزونه خواهيم پرداخت.
دنبال کار مي گردم:دانشجوي سال آخر رشته ي IT

طراحي سايت: (PHP, MySQL) و (ASP.NET, SQL Server) و HTML و CSS و …

برنامه نويسي: VB.NET

پست الکترونيکي:ehsan.shariaty@gmail.com

امرسان ياهو: ehsan_shariaty

در اين قسمت به کمک هم اولين افزونه را ايجاد مي کنيم.
همانطور که در قسمت قبل نيز گفتيم هر فايل XPI از چند فايل و فولدر تشکيل شده است. در زير نمودار فايل ها و فولدر هاي ضروري براي يک افزونه ي ساده مي بينيد:

<ext path>\
          install.rdf
          chrome. manifest
          chrome\
                          content\

از فايل install.rdf براي فراهم آوردن اطلاعات کلي در مورد افزونه ي فايرفاکس در هنگام نصب استفاده مي شود. اين فايل شامل متا ديتايي است که افزونه را معرفي مي کند و اطلاعاتي در مورد ايجاد آن مي دهد. بياييد براي اولين اکستنشن خود install.rdf را ايجاد کنيم و از روي آن توضيحات لازم را بدهيم:

<?xml version="1.0"?>

<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em="http://www.mozilla.org/2004/em-rdf#">

<Description about="urn:mozilla:install-manifest">
<em:id>ehsan.shariaty@gmail.com</em:id>
<em:version>1.0</em:version>
<em:type>2</em:type>

<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>1.5</em:minVersion>
<em:maxVersion>3.0</em:maxVersion>
</Description>
</em:targetApplication>

<em:name>IT Start</em:name>
<em:description>ITStart Firefox Extension Tutorials</em:description>
<em:creator>Ehsan Shariaty</em:creator>
<em:homepageURL>https://itstart.wordpress.com</em:homepageURL>
</Description>
</RDF>

محتويات بالا را در فايلي با نام install.rdf ذخيره کنيد.
توضيح بخش اول:
id: اين مقدار منحصر به فرد افزونه ي شما را معرفي مي کند. براي سادگي کار و به طور معمول براي اين قسمت آدرس ايميل استفاده مي کنند تا مطمئن شوند که اين مقدار در افزونه ي ديگري استفاده نشده است.
version: در اين بخش نسخه ي افزونه تان را تعيين مي کند در اين جا ما نسخه ي افزونه مان را 1.0 مي ناميم هر چند معمول آن است که نسخه ي نرم افزار ها را با شماره هاي زير 1.0 شماره مي دهند.
type: اين مقدار صحيح نوع addon که نصب مي شود را مشخص مي کند. هميشه اين مقدار براي افزونه ها 2 است.
توضيح بخش دوم:
<em:id> اين بخش تعيين مي کند که افزونه ما براي کدام نرم افزار نوشته شده است.چون در اينجا افزونه ما تنها براي فايرفاکس است اين مقدار GUID هميشه برابر مقدار ثابت {ec8030f7-c20a-464f-9b0e-13a3a9e97384} مي باشد.
<em:minVersion> و <em:maxVersion> در اين دو خط به سادگي به فايرفاکس مي گويد که اين افزونه براي کدامين نسخه ها نوشته شده و تنها در اين بازه نصب شود. ما اين جا تعيين کرده ايم که افزونه مان بر روي نسخه هاي ما بين 1.5 تا 3.0 نصب شود.
توضيح قسمت سوم:
name: اين قسمت نام افزونه را مشخص مي کند. اين نام در رابط گرافيکي فايرفاکس استفاده خواهد شد.
description: توضيحي درباره ي کارايي افزونه در اين بخش قرار مي گيرد. اين توضيح نيز در رابط گرافيکي فايرفاکس براي توصيف آن استفاده مي شود.
creator: نام ايجاد کننده ي افزونه در اين بخش قرار مي گيرد. ايجاد کننده ي اين افزونه Ehsan Shariaty است. 🙂
homepageURL: اگر افزونه url دارد در اين بخش بايد قرار گيد.بعد از ايجاد و ذخيره ي install.rdf نوبت به chrome.manifest مي رسد. اين فايل را ايجاد و دو خط زير را به آن بيافزائيد.

content sample chrome/content/
overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul

اين دو خط به فايرفاکس مي گويد که محتويات اين افزونه کجاست و از کجا بايد آن ها را اجرا کنيد.
حال مي رسيم به محتواي اصلي اولين افزونه مان يعني فايل sample.xul که در مسير chrome/content/ قرار گرفته است. فايل را باز کنيد و برنامه زير را به آن اضافه کنيد:

<?xml version="1.0"?>
<overlay id="sample"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<statusbar id="status-bar">
<statusbarpanel id="my-panel" label="Hello,FIREFOX and hTTp://iTsTaRt.WoRdPrEsS.cOm"/>
</statusbar>
</overlay>

اين بخش اصلي افزونه ي ما است که به زبان XUL نوشته شده است. در قسمت اول xmlns مقدار ثابتي هست که در تمامي افزونه ها به وجود دارد و آن را namespace افزونه هاي فايرفاکس مي نامند. در بخش مياني نيز به فايرفاکس مي گويد که در در نوار وضعيت عبارت Hello,FIREFOX and hTTp://iTsTaRt.WoRdPrEsS.cOm را چاپ کن.
در اين جا کار ساخت اولين افزونه به پايان رسيد اين فايل و فولدر ها را با ZIP فشرده کرده و سپس پسوند فايل ايجاد شده را به XPI تغيير دهيد.
خسته نباشيد کار ايجاد اويلين افزونه تان به پايان رسيد آن را در فارفاکستان بکشيد تانصب گردد. اين افزونه را از (اينجا) دانلود کنيد.
در ادامه به آموختن XUL خواهيم پرداخت.

دنبال کار می گردم: (دانشجوی سال آخر رشته ی IT)

طراحی سایت: (PHP, MySQL) و (ASP.NET, SQL Server) و HTML و CSS و …
برنامه نویسی: VB.NET

پست الکترونیکی: ehsan.shariaty@gmail.com
پیامرسان یاهو:
ehsan_shariaty

اگر خدا بخواهد و یاری کند قصد دارم در این جا یکسری پست های آموزشی پشت سر هم و مداوم در زمینه ی برنامه نویسی فایرفاکس و نحوه ی نوشتن افزونه های فایرفاکس بگذارم.
سعی خواهم کرد که آموزش ها گام به گام و همراه مثال های زیاد و متنوع باشند که یاددگیری آن را آسان کند. در طول آموزش علاوه بر آموزش نوشتن افزونه ها ساختار چند افزونه را هم بررسی خواهیم کرد و به کمک همدیگر سعی خواهیم کرد تا در طول آموزش افزونه ای را هم ایجاد کنیم که آموزش ها صرفا تئوری محض نبوده و جنبه ی عملی هم پیدا کند.در همین ابتدای کار لازم است یکسری کلیات را راجع به این افزونه ها بدانیم:

  • هر افزونه ی فایرفاکس از تعدادی فایل و فولدر تشکیل شده که همگی در فایلی فشرده شده با پسوند XPI (زیپی تلفظ کنید) قرار دارند. فایل های XPI در واقع همان فایل های فشرده شده با الگوریتم ZIP هستند که پسوندشان را به این نام تغییر داده اند.
  • اینترفیس افزونه ها با XUL (زول تلفظ کنید) طراحی می کنند و برای اکشن های لازم از جاوااسکریپت استفاده می شود. برای یاددگیری جاوااسکریپت می توانید از (اینجا) و یا سایر منابع استفاده کنید البته هر جا لازم باشد همین جا توضیحات لازم را می آوریم.
  • XUL کوتاه شده XML User Interface است برای طراحی اینترفیس افزونه ها استفاده می شود سادگی XUL به همان اندازه ی یاددگیری HTML و تگ های آن است. در حالی که کارایی آن به آن به اندازه ی SWT و حتی بیش تر از آن است. آموزش XUL در قسمت های بعدی خواهد آمد.
  • برای نوشتن افزونه ها ابزارهایی متعددی ارائه شده اند اما به نظر من بهترین آن ها افزونه ی Extension Developer است که ابزارهایی برای نوشتن  جاوااسکریپت و XUL و تست آن ها فراهم آورده و شما را تا تکمیل افزونه تان همراهی خواهد کرد. Extension Developer را از (اینجا) نصب کنید.

ادامه دارد…

دنبال کار می گردم: دانشجوی سال آخر رشته ی IT

طراحی سایت: (PHP, MySQL) و (ASP.NET, SQL Server) و HTML و CSS و …
برنامه نویسی: VB.NET

پست الکترونیکی: ehsan.shariaty@gmail.com
پیامرسان یاهو:
ehsan_shariaty