اگر علاقه مند به توسعه افزونه فایرفاکس هستید اما نمی دانید از کجا شروع کنید، به جای درستی آمده اید! در این پست شما را به صورت گام به گام در فرآیند کدنویسی یک افزونه ساده فایرفاکس راهنمایی می کنیم!
دقیقا چی میسازیم؟
ما یک برنامه افزودنی موقت ساده ایجاد خواهیم کرد – افزونه ای که فقط شما به آن دسترسی دارید، به عنوان مثال، کاربران نهایی نمی توانند از برنامه افزودنی استفاده کنند. این راهی است برای آزمایش اینکه آیا برنامه افزودنی شما کار می کند و مشکلاتی را پیدا می کند. من ممکن است پست دیگری در مورد نحوه آپلود آن برای افراد دیگر بگذارم، اما در حال حاضر، این روش برای شماست که از پسوند استفاده کنید.
پیوند به راهنمای رسمی موزیلا فایرفاکس ‘نصب موقت’ برای برنامه های افزودنی!
اکنون برای مراحل ایجاد پسوند:
- راه اندازی محیط توسعه
- ایجاد فایل مانیفست
- افزودن یک پنجره پاپ آپ
- پیوست کردن قابلیت جاوا اسکریپت به یک دکمه
- برنامه افزودنی خود را در فایرفاکس بارگیری کنید
بیایید شروع کنیم~!
مرحله 1 – راه اندازی محیط توسعه
بدیهی است که باید فایرفاکس را روی کامپیوتر خود نصب کنید. همچنین برای نوشتن کد خود به یک ویرایشگر کد مانند Visual Studio Code یا Sublime Text نیاز دارید. من قصد دارم از VS Code استفاده کنم.
در ویرایشگر کد خود، یک پوشه جدید ایجاد کنید که در آن فایل های پسوند خود را ذخیره کنید. می توانید نام این پوشه را هر چه دوست دارید بگذارید. برای این مثال، من آن را “افزونه فایرفاکس” می نامم. همچنین توصیه می کنم فایل های زیر را در پوشه اضافه کنید:
- index.html (یا در این مورد فایل popup.html)
- تصویر آیکون با فرمت‌های png. یا jpg. یا فرمت‌های مشابه
- manifest.json – در مرحله بعد در مورد آن صحبت شد
- script.js
مرحله 2 – ایجاد یک فایل مانیفست
مهمترین فایلی که در هنگام ایجاد پسوند فکر می‌کنم، فایل مانیفست JSON است. این فایل حاوی ابرداده‌های مربوط به پسوند شما، از جمله نام، نسخه و مجوزهای آن است. در پوشه جدید خود، یک فایل جدید به نام ایجاد کنید manifest.json.
این ساختار کلی فایل است. اندازه آیکونی که باید داشته باشید اندازه تصویر 48×48 پیکسل است و سپس می توانید دیگران را برای پاسخگویی به اندازه صفحه نمایش داشته باشید، من فقط یک مورد اضافی اضافه کردم. این browser_action بخشی شامل تصویر آیکون پیش فرض است که یک نماد در نوار ابزار فایرفاکس و فایل html پاپ آپ نمایش داده می شود. که در scripts، جایی است که ما کد جاوا اسکریپت را برای اجرا اضافه می کنیم.
مرحله 3 – افزودن یک پنجره بازشو
کد به سادگی متن “Hello World” و یک دکمه در مرکز پنجره را نمایش می دهد. من فرض می‌کنم شما در HTML و CSS خود خوب هستید، بنابراین من در اینجا زیاد وارد جزئیات نمی‌شوم، اما CSS در تگ‌های سبک درون تگ‌های head قرار دارد و چیزی که ما می‌توانیم ببینیم بین تگ‌های بدنه است – ” سلام جهان» و «مرا کلیک کن!» دکمه.
فراموش نکنید که تگ اسکریپت را در انتهای تگ بدنه قرار دهید تا به فایل script.js در پوشه شما پیوند داده شود و شامل شود. “scripts”: [“script.js”] در manifest.json برای کد جاوا اسکریپت.
مرحله 4 – قابلیت اتصال جاوا اسکریپت به یک دکمه
باز هم، امیدوارم جاوا اسکریپت بسیار ابتدایی داشته باشید. این کد اساساً شنونده رویداد را با شناسه به دکمه اضافه می کند myBtn (که دکمه ای است که روی آن “من را کلیک کنید!”). وقتی روی دکمه کلیک می‌شود، متن عنوان 1 را از «Hello World» به «دکمه کلیک شد!» تغییر می‌دهد.
و آن را! تمام قسمت کد نویسی تمام شد و اکنون برای شما آپلود می شود تا از آن استفاده کنید~!
مرحله 5 – برنامه افزودنی خود را در فایرفاکس بارگیری کنید
فایرفاکس را باز کنید و تایپ کنید about:debugging در نوار آدرس با این کار صفحه ابزارهای توسعه دهنده فایرفاکس باز می شود. کلیک کنید بر روی This Firefox بخش سمت چپ صفحه، سپس کلیک کنید Load Temporary Add-on. به پوشه پسوند خود بروید و فایل manifest.json را انتخاب کنید.
افزونه اکنون در فایرفاکس بارگذاری شده است! روی نماد در نوار ابزار کلیک کنید تا پنجره پاپ آپ خود را ببینید!
هر زمان که تغییراتی در برنامه افزودنی ایجاد می‌کنید، به صفحه ابزار توسعه‌دهنده فایرفاکس برگردید، روی دکمه «بارگذاری مجدد» در بخش برنامه افزودنی خود کلیک کنید و تغییرات باید نشان داده شوند!
امیدوارم این پست برای شما مفید بوده باشد و الهام بخش شما برای ایجاد برنامه افزودنی فایرفاکس خود باشد! 👩🏾💻
به یاد داشته باشید، مهمترین چیز این است که سرگرم شوید و ایده های مختلف را آزمایش کنید – با رنگ ها یا اندازه ها یا کد جاوا اسکریپت بازی کنید! از امتحان کردن چیزهای جدید و کشف نترسید!!
پیوندهای اضافی که به من کمک کرد یاد بگیرم:
با تشکر برای خواندن! 😎
