شاید شما هم دوست داشته باشید افزونه های خودتون رو واس مرورگر توسعه بدید چه این افزونه برای استفاده شخصی شما باشه چه یه افزونه که بخواهید منتشرش کنید تا بقیه هم استفاده کنید
برای توسعه افزونه شما به همون چیزایی نیاز دارید که توی توسعه فرانت اند به کار میبرید یعنی html css و javascript خودمون
من این اموزش رو از روی سایت MDN تهیه کردم و خب همون افزونه ای که خودشون ساختن رو باهم میسازیم اما وقتی شما کلیت کار رو یاد بگیرید هر افزونه ای دلتون بخواد میتونید بسازید
تو مرحله اول کار ما یه دایرکتوری برای پروژمون میسازیم . اسم پروژه ما borderify عه و ما یه دایرکتوری هم به همین اسم میسازیم :
mkdir borderify && cd borderify
حالا توی این دایکتوری باید یه فایل جیسون بسازیم که یجورایی شناسنامه افزونه محسوب میشه اسم این فایل هم باید manifest.json باشه و محتویات زیر رو توش بزارید تا هر خط رو جداگونه بگم که چیه و چیکار میکنه :
خط اول میشه ورژن manifest که همون 2 بزارید باشه
خط دوم میشه اسم افزونمون و خط سوم ورژن افزونه خودمون که با هر اپدیت طبیعتا بالاتر میره
خط بعدی هم همونطور که از اسمش معلومه توضیحاتی درباره افزونه و کارایی اونه
بعد اون icons رو داریم که چنتا ایکون با سایز های مختلف میگیره مثلا اینجا سایز 48*48 رو گذاشتیم
اما قسمت بعدی که یه مقدار جالب تر میشه content_scripts هستش که به فایرفاکس میگه تا چه اسکریپت هایی رو لود کنه. در واقع کلید matches میگه تو سایت هایی که ادرسوشون با این پترن اوکیه بیا اسکریپت رو لود کن و پترنه هم همه پیچ ها و ساب دامین های mozilla.org رو در بر میگیره و کلید js هم همون فایل اسکریپت ماس که باید لود بشه. (اخر کار لینک هایی رو میزارم که اگه خواستید بیشتر بدونید مطالعه کنید)
همونطور که گفتم میتونید ایکون هایی با سایز های مختلفی بزارید مثلا ما برای مانیتور هایی با رزولوشن های بالاتر یه ایکون 96*96 هم میزاریم :
حالا باید فایل borderify.js که بالا تو فایل جیسون صداش زدیم رو بسازیم و کدامون رو توش بنویسیم
فایل رو میسازیم و کد زیر رو توش قرار میدیم تا یه حاشیه قرمز برای صفحاتی که مچ هستن بیاد :
document.body.style.border = "5px solid red"
خب حالا توسعه تموم شد و الان یه افزونه داریم که میشه نصبش کرد و کار کنه
در اخر کار پروژه ما باید به صورت زیر باشه
اما برای اینکه نصبش کنیم اول برید تو فایرفاکس و about:debuging رو باز کنید و از بخش سمت چپ this firefox رو باز کنید
بعد روی Load Temporary Add-on… کلیک کنید و فایل manifest.json رو انتخاب کنید و افزونتون نصب میشه و تو لیست افزونه ها میاد
حالا اگه سایت موزیلا رو باز کنید یه حاشیه قرمز رنگ میبینید
خیلی ممنون که تا اینجای اموزش با من همراه بودین این فقط یه افزونه ساده بود و صد در صد دنیای افزونه ها وسیع تر از ایناس اگه خواستید در این باره پست های بیشتری بزارم و افزونه های حرفه ای تری بسازیم میتونید کامنت بدید
منبع :
