آموزش ساخت افزونه فایرفاکس به ساده‌ترین شکل

با انتشار افزونه Emeil.ir برای این سایت، برخی دوستان درخواست کردند که آموزش ساخت این افزونه رو هم به ما بگید. ما هم قول دادیم و طبق درخواستی که این دوستان عزیز داشتند سعی کنیم تا امروز آموزشی ساده به سبک همین افزونه آموزش دهیم که شما هم بتونید در حد توان خودتون افزونه‌هایی رو که دوست دارید بسازید.
در ابتدا باید بگم اگر بخواهید همین کدهایی که در ادامه مثال می‌زنیم استفاده کنید و فقط آن‌ها رو تغییر بدید بی شک که کار سختی در پیش ندارید ولی در کل برای ساخت چنین افزونه‌هایی بهتر است حتماً زبان اچ تی‌ام‌ال، جاوا اسکریپت و سی‌اس‌اس را در حد متوسط بدونید اگه بیشتر بدونید که چه بهتر! می‌تونید بهتر از این‌ها هم بسازید.

برای ساخت افزونه، سایت فایرفاکس امکانی رو فراهم کرده که بشه با اون افزونه‌های خودش را ساخت. به کمک ابزار Build Add-ons در سایت فایرفاکس شما می‌تونید به راحتی در سریع‌ترین زمان افزونه‌های خود رو نوشته، تبدیل و‌‌ همان لحظه تست کنید.

پیش نیاز‌ها:
– در سایت فایرفاکس عضو شوید و وارد اکانت خود شوید. فراموش نکنید که پس از تکمیل فرم عضویت لینک فعال سازی به ایمیل شما فرستاده می‌شود. عضویت در سایت به چند دلیل برای شما می‌تونه مفید باشه هم می‌تونید افزونه‌ها و تم‌هایی که می‌سازید رو در صورت وجود هیچ گونه مشکلی ثبت کنید و هم می‌تونید از امکانات سایت فایرفاکس به طور کامل‌تر استفاده کنید.
– مورد بعدی، برای اینکه بتونید از ابزار Build Add-ons استفاده کنید باید افزونه Add-on Builder Helper در فایرفاکس نصب کنید.
– زبان اچ تی‌ام‌ال، جاوا اسکریپت و سی‌اس‌اس هم خودتون می‌دونید که بدون فهمیدن این‌ها نمی‌شه کاری کرد.
– نرم افزار WinRAR هم برای مراحل پایانی و کارهای تکمیلی لازم می‌شه اون رو نصب کنید.

چگونگی ساخت افزونه:
– به صفحه Build Add-ons بروید و در منوی بالا بر روی Sing in کلیک کنید و در صفحه‌ای که براتون باز می‌شه بر روی Sing in with Persona کلیک کنید و ایمیلی که در سایت افزونه‌های فایرفاکس عضو شدید اینجا وارد کنید و بر روی Next کلیک کنید و صبر کنید تا ایمیل شما شناسایی شود.

– مجدد از منوی بالا گزینه Create/Add-on رو انتخاب کنید تا افزونه ساز شما اجرا شود.
– در اینجا شما سه بخش Lib، Data و Libraries دارید.

در پوشه اول یعنی Lib شما به طور پیش فرض یه فایل جاوای main.js دارید. این فایل قلب افزونه و نقطه ورودی برای افزونه‌هاست زمانی که افزونه نصب و اجرا می‌شود در واقع شما با استفاده از این فایل می‌تونید شکل افزونه رو مشخص کنید که به صورت ابزارک، پنجره‌ای یا به هر طریقی که مدنظر دارید باشد.

ما افزونه Emeil.ir رو به صورت ابزارک (پاپ آپ) آماده کرده‌ایم که کد آن به صورت زیر می‌باشد:

//// Emeil.ir Addon – www.hoorsheed.com /////
var data = require(“sdk/self”).data;
var aia_port = require(“sdk/panel”).Panel({
width: 530,
height: 500,
contentURL: data.url(‘popup.html’)
});
require(“sdk/widget”).Widget({
label: “Emeil.ir – Disposable Temprorary Minute Mail Address”,
id: “aia-link-widget”,
contentURL: data.url(“emeil48.png”),
panel: aia_port
});
aia_port.on(“show”, function() {
aia_port.port.emit(“show”);
loadDoc(‘http://www.emeil.ir/?t=gadget’);
});

function loadDoc(link)
{
require(“sdk/request”).Request({
url: link,
onComplete: function(response) {
console.log(“loadDoc onComplete”);
aia_port.port.emit(“portfolio”, response.text);
}
}).get();
console.log(“loadDoc()” + link);
}

در این کد width و height به ترتیب عرض و ارتفاع ابزارک ما هستند. در خط contentURL ما آدرس صفحه‌ای را مشخص می‌کنیم که زمان اجرای افزونه کدام صفحه باز شود که این صفحه داخل پوشه دوم یعنی Data قرار دارد. ما فایلی رو با نام دلخواه به طور مثال popup.html طراحی کرده و برای متغییر contentURL تعریف می‌کنیم. این فایل رو به کمک یکی از نرم افزارهای طراحی وب یا با استفاده از Notepad با کدی که در ادامه هست در کامپیوترتون ایجاد کنید. فقط برای تطابق متغییرها این فایل رو با پسوند html ذخیره کنید.

در بخش require این کد ما مشخصات افزونه که مهم‌ترین آن‌ها label و contentURL است که به ترتیب نام نمایشی و آیکون افزونه در نوار افزونه فایرفاکس هستند رو تعیین می‌کنیم. برای آیکون هم یه عکس png با اندزه ۴۸ پیکسل آماده و در پوشه Data اضافه می‌کنیم.

در بخش بعدی آدرس loadDoc رو‌‌ همان آدرس نسخه موبایل سایت Emeil.ir تعیین می‌کنیم و فایل رو ذخیره می‌کنیم تا کار ما با فایل main. js تمام شود.

– در پوشه Data که در حال حاضر دو فایل popup.html و emeil48.png رو باید در آن قرار دهیم با کلیک بر روی + در کنار پوشه‌ Data این دو فایل رو آپلود و اضافه می‌کنیم.

محتویات فایل popup.html رو به صورت زیر کدنویسی می‌کنیم؛ در اینجا شما می‌تونید به طور همزمان از CSS نیز استفاده کنید:

<!doctype html>
<html>
<head>
<title>Emeil.ir – Disposable Temprorary Minute Mail Address</title>
</head>
<body>
<iframe src=”http://www.emeil.ir/?t=gadget” width=”500px” height=”500px” frameborder=”0″></iframe>
</body>
</html>

خُب، یه فریم ایجاد کرده و در آدرس فریم مجدداً نسخه موبایل سایت Emeil.ir را قرار می‌دهیم که با کلیک بر روی آیکون افزونه، همین صفحه یا فریم به کاربر نمایش داده شود. توجه کنید عرض و ارتفاع این فریم نسبت به عرض و ارتفاعی که در فایل main. js است متفاوت و کوچک‌تر است.

– در پوشه Libraries به طور خودکار آخرین نسخه SDK فایرفاکس وجود دارد که همین باعث می‌شود که با آخرین نسخه فایرفاکس سازگار باشد.

تموم شد، خسته نباشید! افزونه ما تقریباً آماده است و فقط یه سری تغییرات کوچیک از لحاظ ظاهری لازمه که روش انجام شود.
– در صفحه افزونه ساز، بر روی آیکون چرخ‌دنده کلیک کنید تا کادر تغییر اطلاعات افزونه باز شود:

در اینجا Add-on Name و Add-on Description که به ترتیب نام و توضیحات افزونه در صفحه افزونه‌های فایرفاکس است رو تغییر می‌دهیم و ذخیره می‌کنیم.
– سپس بر روی فلشی که در کنار آیکون ذخیره است کلیک کنید و نسخه افزونه رو مشخص کنید.

– بر روی دانلود (دکمه‌ی دومی) کلیک کنید بعد از اینکه در کامپیوترتون دانلود شد بر روی فایل افزونه راست کلیک و Rename رو انتخاب کرده و پسوند آن رو از xpi به zip تغییر دهید و به یک پوشه‌ی خالی انتقال دهید و بعد روی آن راست کلیک کرده و با کلیک بر روی Extract Here محتویات افزونه رو استخراج کنید.

– دو عکس با نام‌های icon.png و icon64.png با هر نرم افزار گرافیکی که راحت‌ترید آماده و در پوشه‌ای که همین حالا ایجاد کردید، کپی کنید. دقت کنید عکس اولی باید ۴۸ پیکسل و دومی ۶۴ پیکسل باشد.
– دوباره تمام محتویات پوشه رو به غیر از فایل فشرده انتخاب کنید و روی آنها راست کلیک کرده و با کلیک بر روی Add to archive مجدد فایلی با فرمت zip ایجاد کنید.
– و در آخر روی فایل فشرده جدید راست کلیک و با کلیک بر روی Rename فرمت فایل رو از zip به xpi تغییر دهید تا فایل فشرده تبدیل به افزونه فایرفاکس شود.

حالا دیگه افزونه ما کاملِ کامل شد. فقط برای اینکه این مطلب زیاد طولانی نشه ثبت افزونه در سایت فایرفاکس رو به‌عهده خودتون میذارم که البته دلخواه‌ست می‌تونید ثبت رسمی هم نکنید.

تاریخ انتشار: ۲۰ مرداد ۱۳۹۲
تاپیک: فایرفاکس