در این آموزش، ما به طور کامل نحوه ایجاد یک افزونه برای فایرفاکس را مورد بررسی قرار میدهیم که به کاربر این امکان را میدهد تا هشدارها را در زمانهای مشخص با متن دلخواه ایجاد کند. ما راههای ایجاد یک افزونه ابتدایی، افزودن یک پنجره پاپآپ و یک صفحه تنظیمات، افزودن دسترسیها، ذخیره اطلاعات، ارسال هشدارها و ایجاد یک اسکریپت پسزمینه برای ارسال هشدارها را پوشش خواهیم داد.
برای این آموزش، نیازی به تجربهای قبلی در ایجاد افزونههای فایرفاکس یا هر افزونه مرورگر دیگری ندارید. شما تنها باید چند مبحث اساسی جاوااسکریپت را بدانید. کد این آموزش را میتوانید در مخزن GitHub اینجا پیدا کنید و همچنین افزونه ایجاد شده را در اینجا منتشر میشود.
راهاندازی افزونه فایرفاکس ما
گام اول برای ایجاد یک افزونه فایرفاکس ایجاد فایل manifest.json است. این فایل تنها فایل مورد نیاز برای یک افزونه فایرفاکس است. فرمت اساسی یک فایل manifest.json شامل کلیدهای زیر است:
– name: نام افزونه به صورت slug مانند my-extension.
– version: نسخه فعلی افزونه. هنگام بهروزرسانی هر چیزی در افزونه، شما باید این نسخه را بهروزرسانی کنید، بنابراین توصیه میشود که با یک مقدار کم شروع کنید.
– manifest_version: در زمان نوشتن این متن، فایرفاکس تنها از Manifest V2 پشتیبانی میکند، بنابراین مقدار این کلید باید 2 باشد. با این حال، اگر در آینده پشتیبانی از V3 اضافه شود، مقدار میتواند 3 نیز باشد.
اینها فیلدهای اجباری برای هر افزونه هستند. دو فیلد زیر اختیاری اما توصیه میشوند:
{
“name”: “personalized-alarms”,
“version”: “0.0.1”,
“description”: “Create personalized alarms”,
“manifest_version”: 2,
“icons”: {
“16”: “assets/images/icon16.png”,
“32”: “assets/images/icon32.png”,
“48”: “assets/images/icon48.png”,
“128”: “assets/images/icon128.png”
}
}
– description: یک توضیح کوتاه برای افزونه که هدف آن را توضیح دهد.
– icons: یک لیست از آیکونهای اندازههای مختلف. این آیکونها در تنظیمات، نوارابزار مرورگر و سایر مکانها نیز استفاده میشوند. اندازههای توصیهشده برای افزودن 16پیکسل، 32پیکسل، 48پیکسل و 128پیکسل هستند.
برای افزونه خود، با ایجاد یک پوشه به نام firefox-alarms-addon شروع کنید. سپس یک manifest.json با محتوای زیر اضافه کنید:
“`json
{
“name”: “personalized-alarms”,
“version”: “0.0.1”,
“description”: “Create personalized alarms”,
“manifest_version”: 2,
“icons”: {
“16”: “assets/images/icon16.png”,
“32”: “assets/images/icon32.png”,
“48”: “assets/images/icon48.png”,
“128”: “assets/images/icon128.png”
}
}
“`
همانطور که مشاهده میشود، کلید icons یک شی با کلیدهای اندازه فایل و مسیر به آن است. مسیر نسبت به ریشه افزونه است، که جایی است که manifest.json قرار دارد. برای این آموزش، من از یک آیکون دانلود شده از سرویس iconscout توسط Emoji توییتر استفاده میکنم که میتوانم اندازههای مختلف مورد نیاز را دانلود کنم.
اگر دنبال میکنید، این فایلها را از مخزن ما دریافت کنید و در دایرکتوری مناسب (assets/images/) قرار دهید.
بارگذاری افزونه در فایرفاکس برای تست افزونه فایرفاکس ما و قابلیت اشکالزدایی آن قبل از بارگذاری آن به هاب توسعهدهندگان موزیلا، فایرفاکس را باز کنید، سپس گزینهها و تمها را از منوی راست انتخاب کنید یا از میانبر ctrl + shift + A استفاده کنید. سپس بر روی آیکون “تنظیمات” کنار مدیریت افزونههای شما کلیک کرده و گزینه “اضافه کردن افزونهها به حالت اشکالزدایی” را انتخاب کنید.
صفحه جدیدی برای افزونههای موقت باز خواهد شد.
بر روی دکمه “بارگذاری افزونه موقت” کلیک کرده و فایل manifest.json را که به تازگی ایجاد کردهاید را انتخاب کنید. اگر همه چیز به درستی انجام شده باشد، افزونه ایجاد شده جدید را با اطلاعاتی در مورد آن و آیکونی که در manifest.json مشخص کردیم، مشاهده خواهید کرد.
افزونه هشدارهای شخصی
افزودن یک پنجره پاپآپ افزونههای فایرفاکس میتوانند به روشهای مختلفی قابل دسترس باشند و یکی از آنها افزودن یک صفحه پاپآپ است. هنگام افزودن یک صفحه پاپآپ، آیکون افزونه شما در نوارابزار ظاهر خواهد شد و هنگامی که کاربر بر روی آن کلیک میکند، صفحه پاپآپی که شما مشخص کردهاید نمایش داده میشود.
ما از صفحه پاپآپ برای نمایش لیست هشدارهای آتی و یک لینک برای افزودن یک هشدار جدید که کاربر را به صفحه تنظیمات میبرد (درباره آن در بخش بعد صحبت خواهیم کرد)، استفاده خواهیم کرد.
یک فایل popup.html با محتوای زیر در ریشه پروژه ایجاد کنید:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personalized Alarms</title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body class="p-3">
<h1>Upcoming Alarms</h1>
<ul class="list-group" id="alarmsList">
</ul>
<div class="mt-3">
<a href="#" class="link-primary" id="optionsLink">Add an Alarm</a>
</div>
<script src="assets/js/jquery.min.js"></script>
</body>
</html>
همانطور که مشاهده میشود، این تنها یک سند HTML است. همچنین bootstrap.min.css را به assets/css اضافه کرده و آن را در اینجا لینک کردهایم، و jquery.min.js را زیر assets/js/jquery.min.js اضافه کرده و همچنین آن را لینک کردهایم. این دو کتابخانه فقط برای آسان کردن کارها است، اما نیازی به استفاده از آنها واقعی نیست. شما میتوانید آنها را از مخزن ما اینجا و اینجا دریافت کنید.
در محتوای صفحه، ما لیست هشدارهای آتی را نمایش میدهیم و یک لینک به صفحه تنظیمات اضافه میکنیم.
مرحله بعد برای کار کردن با پاپآپ اضافه کردن موارد زیر به manifest.json است:
"browser_action": {
"default_popup": "popup.html",
"browser_style": true
}
browser_action یک شی است که دارای چند گزینه است، اما تنها یک گزینه اجباری دارد که default_popup است که مسیر نسبی به پاپآپ از دایرکتوری ریشه افزونه است. browser_style اجباری نیست.
