ایجاد برنامه افزودنی کروم: راهنمای گام به گام

اگر یک سوال از شما بپرسم، آیا تا به حال از Grammarly یا Ad Blocker در هنگام مرور کروم یا به عنوان مثال هر مرورگری مانند Firefox یا Edge استفاده کرده اید؟ پاسخ شما بله خواهد بود، و آنها چه هستند؟ به آنها Extensions گفته می شود. بنابراین در این وبلاگ، شما را راهنمایی می کنم که چگونه افزونه کروم خود را از ابتدا بسازید.

اکستنشن چیست و چرا باید از آنها استفاده کنیم؟

قبل از شروع کدنویسی، اجازه دهید بفهمیم که یک پسوند چیست. این یک برنامه کوچک است که در HTML، CSS و جاوا اسکریپت نوشته شده است و از طریق API (Application Programming Interface) ارائه شده توسط آن مرورگر با مرورگر تعامل می کند تا عملکردهای خاصی مانند Adblocker یا Password Manager را برای بهبود تجربه مرور شما اضافه کند.

می‌توانیم از آنها برای سفارشی‌سازی یا افزودن قابلیت‌هایی که توسط مرورگرها ارائه نشده‌اند استفاده کنیم. می‌توانید این برنامه‌های افزودنی را از فروشگاه‌های وب مربوطه مرورگر خود پیدا کنید، برای مثال فروشگاه وب Chrome برای Chrome، افزونه‌ها برای فایرفاکس.

می‌توانید بر اساس نیازهای خاص خود مانند بهره‌وری، مدیریت رمز عبور، مسدودکننده تبلیغات، کنترل‌کننده سرعت ویدیو و موارد دیگر، افزونه‌ای را انتخاب کنید.

برای ایجاد تمدید چه مواردی لازم است؟

خوب برای ایجاد یک برنامه افزودنی به سه چیز نیاز دارید، اجازه دهید به طور خلاصه در مورد چه چیزهایی صحبت کنیم:

• ایده: برنامه افزودنی شما قرار است چه کاری انجام دهد، ویژگی ها و عملکردهای اصلی آن چه خواهد بود؟ در این صورت، ما قصد داریم یک افزونه بسازیم که تنها وظیفه آن حذف هر عنصری از یک وب سایت با کلیک بر روی آن است. بیایید اسمش را پاک کن بخش بگذاریم

• سپس، یک پوشه توسعه تنظیم کنید: یک پوشه اختصاصی در رایانه خود ایجاد کنید تا فایل های برنامه افزودنی خود را سازماندهی کنید. نام آن پوشه را به عنوان Section Eraser بگذارید (در صورت تمایل می توانید هر نامی را انتخاب کنید، فقط این نام مشخص می کند که ما قرار است چه چیزی بسازیم)

• مبانی Html، CSS و جاوا اسکریپت به عنوان اینها چیزهایی هستند که ما برای کدنویسی افزونه کروم خود استفاده خواهیم کرد.

کدگذاری برنامه افزودنی ما

• کد vs را باز کنید و به پوشه پاک کن بخش خود بروید. سپس این فایل ها را ایجاد کنید:

• popup.html: این فایل HTML رابط کاربری پنجره بازشوی برنامه افزودنی شما را نشان می دهد که با کلیک کاربران بر روی نماد برنامه افزودنی ظاهر می شود. این یک برنامه افزودنی بسیار ابتدایی است که فقط یک عنوان و یک دکمه دارد، هیچ چیز جالبی نیست

فایل json. Manifest و چرا در ساخت برنامه افزودنی Chrome شما بسیار مهم است؟

بعد، باید یک فایل manifest.json ایجاد کنیم. این فایل هنگام ایجاد یک افزونه کروم یک جزء حیاتی است. این به عنوان یک فایل پیکربندی عمل می کند که اطلاعات ضروری در مورد پسوند شما را به مرورگر ارائه می دهد.

بیایید اجزای اصلی این فایل را درک کنیم:

• manifest_version: نسخه فرمت فایل مانیفست را مشخص می کند. در حال حاضر نسخه 3 است.
• name: نام برنامه افزودنی شما.
• نسخه: شماره نسخه افزونه شما.
• توضیحات: شرح مختصری از آنچه برنامه افزودنی شما انجام می دهد.
• icons: شیئی که نمادهای مورد استفاده برای افزونه شما را در اندازه های مختلف تعریف می کند.
• مجوزها: آرایه ای که مجوزهای مورد نیاز برنامه افزودنی شما را فهرست می کند، مانند دسترسی به برگه ها یا وب سایت های خاص. مجوزهای مورد نیاز را بر اساس عملکرد برنامه افزودنی خود مشخص کنید.
• action: رفتار عملکرد مرورگر برنامه افزودنی را مشخص می کند (معمولاً نماد نمایش داده شده در نوار ابزار مرورگر).
• default_popup: فایل HTML که وقتی کاربر روی نماد برنامه افزودنی کلیک می کند، به عنوان پنجره بازشو عمل می کند.
• default_icon: شیئی که نماد پیش فرض برنامه افزودنی شما را در اندازه های مختلف تعریف می کند
• scripts: آرایه ای از فایل های جاوا اسکریپت که اسکریپت پس زمینه را تشکیل می دهند.
• background: اسکریپت پس زمینه ای را که در پس زمینه اجرا می شود و کنترل می شود را مشخص می کند

بعد، باید سه فایل js popup.js content.js و background.js ایجاد کنیم.

بیایید با a شروع کنیم popup.js فایل این فایل اصلی ما خواهد بود

این کد منتظر می ماند تا DOM به طور کامل بارگیری شود (رویداد DOMContentLoaded) و سپس یک شنونده رویداد کلیک را به دکمه ای با شناسه “دکمه انتخاب” اضافه می کند. وقتی روی دکمه کلیک می‌شود، اطلاعات مربوط به برگه فعال را بازیابی می‌کند و پیامی به اسکریپت محتوای موجود در آن برگه می‌فرستد که نشان می‌دهد یک بخش باید انتخاب شود (بار پیام { selectSection: true }). برای کسب اطلاعات بیشتر می توانید به بخش برنامه نویس Chrome API مراجعه کنید.

بعدی است content.js فایل اسکریپت‌های محتوا، فایل‌های جاوا اسکریپتی هستند که وقتی برنامه افزودنی در صفحات وب خاص فعال می‌شود یا با الگوهای URL خاصی مطابقت دارد، توسط مرورگر به صفحات وب تزریق می‌شوند. در مورد ما، تشخیص یک رویداد کلیک در بخشی از یک وب سایت و سپس حذف آن بخش است

بعدی است background.js ما این کد را مورد بحث قرار داده ایم، بنابراین در حال حاضر قرار نیست بحث کنیم

می‌توانید یک استایل به برنامه افزودنی خود اضافه کنید. این به شما بستگی دارد. پس از آن تعدادی آیکون برای برنامه افزودنی خود اضافه کنید که اندازه های خاصی مانند 16*16,48*48,128*128 دارند و مطمئن شوید که jpg یا png هستند.

اکنون که با بخش کدگذاری تمام شد، اجازه دهید افزونه خود را بررسی و آزمایش کنیم، اما قبل از حرکت به جلو، اجازه دهید نگاهی به ساختار پوشه نهایی خود بیندازیم.

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

• مرورگر کروم را باز کنید و chrome://extensions/ را در بخش URL خود تایپ کنید. صفحه افزونه کروم را باز می کند.

• اکنون روی Developer Mode در سمت راست صفحه کلیک کنید. همانطور که در تصویر بالا می بینید سه دکمه به شما می دهد

• اکنون بر روی دکمه بارگیری بدون بسته بندی کلیک کنید، یک صفحه بازشو باز می شود که از شما می خواهد پوشه برنامه های افزودنی خود را که حاوی تمام فایل هایی است که در مورد آنها صحبت کرده ایم آپلود کنید. آنها را آپلود کنید

• پس از مدتی افزونه خود را (در تصویر بالا مشاهده کنید) در این صفحه به همراه سایر افزونه هایی که قبلاً نصب کرده اید مشاهده خواهید کرد.

• برای بررسی، هر وب سایتی را باز کنید، سپس بر روی آیکون افزونه خود کلیک کنید، سپس با یک دکمه پنجره برنامه افزودنی شما باز می شود، اکنون روی آن دکمه کلیک کنید، پس از آن روی هر قسمت از آن وب سایت کلیک کنید و جادو را ببینید، آن بخش را حذف کرده است.

توجه: می توانید از این کد برای ایجاد پسوند خود استفاده کنید.

تبریک می گویم! شما با موفقیت فرآیند گام به گام ایجاد یک افزونه کروم را یاد گرفتید. حالا ادامه دهید و چند پسوند جالب ایجاد کنید و آن را با دیگران به اشتراک بگذارید

اگر تا اینجا ساخته اید، از خواندن شما متشکریم، به اشتراک بگذارید و مشترک شوید تا در آینده مطالب بیشتری از این قبیل دریافت کنید

با من در شبکه های اجتماعی ارتباط برقرار کنید:

لینکدین

توییتر

Github