استفاده از افزونه های مختلف در مرورگر ها به امری کاربردی تبدیل شده است. وجود یک افزونه برای یک وبسایت یا وبلاگ می تواند موجب بالا رفتن ترافیک سایت و افزایش تعامل شود. امروز در کلاسیک وب قصد داریم نحوه ساخت افزونه برای گوگل کروم را به شما آموزش دهیم تا برای سایت و وبلاگ خودتان افزونه طراحی کنید.

نحوه درست کردن افزونه گوگل کروم برای سایت (Google Chrome Extensions)

How to Create a Chrome Extension for Website

ساخت افزونه برای گوگل کروم برای کسانی که زبان های HTML و CSS را بلد باشند کار بسیار آسانی خواهد بود. اگر هم به این زبان های طراحی وب مسلط نیستید نگران نباشید. پس از طی چند مرحله ساده قادر به ایجاد افزونه برای کروم خواهید بود که به طور مثال فید RSS را از وبلاگ یا وبسایت شما روی مرورگر نمایش می دهد که موجب افزایش بیننده های شما می شود. لازم به ذکر است که یادگیری این زبان ها ساده بود و اگر آن ها را بلد نیستید، به شما حتماً پیشنهاد می کنیم که به فراگیری آن ها بپردازید.

افزونه کروم چیست؟

برنامه هایی به عنوان extensions یا افزونه طراحی شده اند که روی مرورگر های شما (مثل گوگل کروم) نصب می شوند. این برنامه ها در زمینه وب به شما قابلیت هایی را ارئه می دهند که با سرعت بالا و کلیک روی آن ها کار مورد نظر را بدون حرکت اضافه ای انجام می دهند. اگر قبلا از این افزونه ها استفاده نکرده اید، می توانید لیستی از آن ها را در فروشگاه کروم ببینید. برای آموزش ساخت افزونه گوگل کروم با ما همراه باشید.

قبل از دانلود افزونه ها مطلب چگونه از امنیت و سالم بودن افزونه کروم قبل از دانلود و نصب مطمئن شویم؟ را حتماً مطالعه کنید.

چه افزونه ای بسازیم؟

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

همچنین می توانید مطالعه ۷ افزونه کاربردی برای گذاشتن پسورد روی بوک مارک (Bookmark) کروم، با بهترین افزونه های پسورد بوک مارک آشنا شوید.

ساخت افزونه برای گوگل کروم

اول از هر کاری برای ساخت افزونه کروم باید یک ویرایشگر HTML را دانلود کنید. برنامه Notepad++ در این زمینه کاربردی می باشد که یک برنامه رایگان و منبع باز برای ویندوز است. اگر از مک استفاده می کنید، به شما برنامه Komodo Edit را پیشنهاد می دهیم. این برنامه ها کد های اولیه اچ تی ام ال و.. را در خود دارند و با ویرایش آن ها می توانید فایل مورد نظر خود را بسازید.

حال باید فرمت اولیه فایل خود را به وجود بیاورید. برای نوشتن پلاگین برای کروم، ویرایشگر را باز کنید و چهار فایل جدید ایجاد کنید. نام های آن ها را manifest.json, popup.html, popup.css, popup.js قرار دهید و آن ها را خالی بگذارید.

حال فایل manifest.json را که ایجاد کرده اید را باز کنید. فایل manifest.json شما با تهیه توضیحات به گوگل کروم اعلام می کنید که افزودنی مورد نظر چه کارهایی انجام می دهد و چه مجوز هایی لازم دارد. در کد های این مطلب باید نام، توضیحات و uکس زمینه پیش فرض را به همراه عنوان برای افزونه خود وارد کنید. سعی کنید توصیفی دقیق از افزونه خود را ثبت کنید و آن را ذخیره نمایید. مجوز های لازم را هم در این زمینه باید وارد کنید، مثلا اگر می خواهید یک فیلم پخش کنید باید اجازه کنترل ActiveTab را داشته باشید.

در هنگام نصب افزونه به نصب کننده راجب مجوز های برنامه توضیح داده می شود که باید برای نصب تایید کند.

حال نوبت popup.html است. عنوان برنامه افزودنی خود را در کد مشخص شده در تصویر اضافه کنید. این صفحه به افزودنی شما متصل می شود و هنگامی که روی آیکون کلیک شود، این پنجره ظاهر می شود. برای مثال ما این صفحه را برای ایجاد محتوای RSS برای فید وبسایت ایجاد می کنیم.

حال به سراغ فایل popup.js بروید. قسمت myfeedurl را با آدرس URL مورد نظر خود (مثل آدرس RSS Feed) جایگزین نمایید.

در فایل popup.css شما باید ظاهر پنحره پاپ آپ را تهیه نمایید. سعی کنید بسته به نیاز های خود، صفحه ای زیبا و کارآمد طراحی کنید.

۸ افزونه مجبوب برای مدیریت کار ها را می توانید در مطلب ۸ افزونه محبوب Task Manager برای مدیریت کارها در گوگل کروم بخوانید.

اکنون به یک آیکون برای نمایش افزونه خود نیاز دارید. تصویر شما باید با فرمت PNG باشد و در ۴ ابعاد ۱۲۸×۱۲۸, ۶۴×۶۴, ۴۸×۴۸ و ۲۶×۲۶ طراحی شود. نام آن ها را به ترتیب ۱۲۸٫png, 64.png, 48.png و icon.png قرار دهید.

حالا طراحی افزونه به پایان رسید. برای تست افزونه ها با وارد کردن آدرس chrome://extensions در مرورگر و فعال کردن Developer Mode برنامه خود را تست کنید.

فعال کردن Developer Mode کروم را قبلا در مطلب دانلود و ذخیره کردن افزونه های مرورگر گوگل کروم به شما آموزش دادیم.

سپس همه این فایل ها را بعد از ذخیره کردن، داخل یک پوشه قرار دهید. سپس آن ها را به صورت Zip فشرده کنید و در فروشگاه کروم (Chrome WebStore) برای دانلود قرار دهید.

بعد از آپلود کامل فایل فرمی را هم برای معرفی بهتر افزونه باید پر کنید. بعد از این کار لینک دانلود افزونه را در وبسایت و وبلاگ خود به اشتراک بگذارید. برای این کار در صفحه افزونه ها Add New Item را بزنید.

پس از گذشت مدتی برای قرار گرفتن می توانید افزونه خود را داخل فروشگاه کروم ببینید. انجام همه این کار ها با داشتن اطلاعات پایه راجب طراحی صفحات وب حدود ۲۰ دقیقه طول می کشد. اما اگر کمی اطلاعات خود را افزایش دهید و وقت بیشتری را صرف کنید، قطعاً می توانید افزونه هایی حرفه ای تر و بهتر بسازید.

همچنین اگر دنبال راهی برای جلوگیری از هک فیشینگ توسط افزونه های مخرب هستید، پیشنهاد می کنیم مطلب کاربردی ترین افزونه ها برای جلوگیری از هک فیشینگ در گوگل کروم را هم مورد مطالعه قرار دهید.

نظرات و پیشنهادات شما؟

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