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

آموزش ساخت سریع افزونه برای گوگل کروم : ساخت افزونه برای سایت خود!

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

نحوه درست کردن افزونه گوگل کروم برای سایت (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 را بزنید.

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

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

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

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

حمایت مالی

اگر از مطلب منتشر شده رضایت دارید، می توانید جهت حمایت انزل وب و ادامه روند انتشار محتوا در صفحه حمایت مالی ما در زرین پال یا ریمیت مبلغ دلخواه مد نظر خود را پرداخت و ارسال کنید. از همراهی شما صمیمانه سپاسگزاریم.

مطالب مرتبط

آموزش 15 روش حل مشکل دانلود نکردن گوگل کروم کامپیوتر
آموزش ۱۵ روش حل مشکل دانلود نکردن گوگل کروم کامپیوتر
آموزش تصویری تغییر زبان گوگل به فارسی ، انگلیسی و...
آموزش تصویری تغییر زبان موتور جستجو گوگل به فارسی ، انگلیسی و…
آموزش تصویری ادامه دانلود فایل ناقص در گوگل کروم
آموزش تصویری ۲ روش‌ ادامه دانلود فایل ناقص در گوگل کروم
آموزش حل مشکل استفاده زیاد مرورگر گوگل کروم از CPU
آموزش حل مشکل استفاده زیاد مرورگر گوگل کروم از CPU

نظرات

  • علی says:

    سلام خسته نباشید من ی افزونه کروم دارم که ورژن مانیفست اون۲ هست و کد هاشو از مانیفست ورژن ۲ به ۳ اپدیت کردم ولی به مشکل خوردم لطفا کمکم کنید ۰۹۰۴۴۷۶.. تلگرام لطفا کمکم کنید

  • شهاب says:

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

  • احمد says:

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

    • aminsalam598 says:

      سلام شما درباره بیشتر توضیح دهید:شما می تونید برای موزیلا فایر فاکس یک افزونه بسازید و بعد با یک خورده دستکاری برای کروم تبدیلش کنید
      فقط نیازه برید توی سایت موزیلا و یاد بگیرید

  • Ferdos says:

    میشه لطفا عکس قسمت جاوا اسکریپ رو ینی popup.js رو کامل بزارین خیلی بهش احتیاج دارم

  • .... says:

    مردشور تک تکتون رو ببرن که نمیگید فایل رو کدوم قبرستونی باید سیو کنیم اکر خودمون بخوایم استفاده کنیم

  • aminnima46 says:

    ایا سایتی هست ایده ساختExtension دریافت و ان بسازد

    • احسان says:

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