عرفان عطارزاده
عرفان عطارزاده
خواندن ۴ دقیقه·۵ سال پیش

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

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

با این که خیلی علاقه به مقدمه‌نویسی ندارم و ترجیح میدم سریع سراغ اصل مطلب بروم ولی چند بندی مجبورم برای کسانی که با این موضوع آشنایی ندارند توضیحاتی ارائه کنم.

* توجه: این نوشته، بخش اول و به نوعی آشنایی با افزونه کروم و قابلیت‌هایی‌ست که می‌تواند ارائه کند. به زودی آموزش برنامه‌نویسی اکستنشن کروم را برای شما عزیزان قرار خواهم داد.

مقدمه (آشنایی با افزونه‌های کروم یا همان Chrome Extensions)

همان‌طور که می‌دانید مرورگر (browser) کروم (Chrome) یکی از محبوب‌ترین ابزارهای ساختِ گوگل برای مرور صفحات وب به شمار می‌رود؛ به طوری که حداقل نیمی از کاربران اینترنت از آن استفاده می‌کنند. (بسته به مرجعی که آمار را ارائه کرده، این میزان در سال ۲۰۱۹ چیزی بین ۴۸٪ الی ۶۵٪ کاربران را شامل می‌شود.)

از طرفی وقتی چیزی خیلی پرطرفدار باشد، برایش ابزارها و خدماتی جانبی ایجاد خواهد شد. برای مثال در فضای غیردیجیتال، کنار یک مرکز خرید یا شهربازی، رستوران‌ها و کافه‌های زیادی دائر می‌شوند یا به بیانی دیگر به این مراکز تفریحی، مراکز خدماتی جداگانه‌ای «افزوده» می‌شوند. خُب به تعبیر ما، این خدمات، افزونه‌هایی هستند برای آن محل اصلی.

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

آیا افزونه‌های کروم ساخته گوگل است؟

بگذارید با همان زبان مثالی این سؤال را پاسخ دهم. یک شهربازی قاعدتاً سازنده و مالکی دارد. این مالک می‌تواند خودش، رستوران یا کافه‌ای هم درون شهربازی یا اطرافش دائر کند. همچنین ‌می‌تواند محل‌هایی را درون شهربازی برای رستوران‌ها و کافه‌داران اختصاص داده و به آن‌ها اجاره‌اش دهد. حالت سوم هم این‌که خودِ رستوران یا کافه، محلی را در کنار شهربازی خریده و به کسب و کار خود مشغول شود.

خب کروم هم که ساخته گوگل است، شبیه همان شهربازی‌ست. افزونه‌های کروم (Chrome extensions) می‌توانند ساختِ خودِ گوگل باشند (مثل Google Keep Chrome Extension) یا ساخته شرکت‌های دیگر نظیر Grammarly.

افزونه کروم چه کارهایی انجام می‌دهد؟

خُب این سؤال هم اگر به صورت «افزونه کروم چه کارهایی انجام نمی‌دهد؟» مطرح شده بود احتمالاً منطقی‌تر به نظر می‌رسید. چون تقریباً طیف وسیعی از خدمات را شامل می‌شود. افزونه کروم شبیه یک سایت کوچک در کنار تمامی صفحات اینترنتی که مشاهده می‌کنید قابل استفاده است. اگر تا به حال افزونه‌ای نصب نکردید حتماً یکی از آن‌ها را امتحان کنید.

* این که گفتم مانند یک سایت کوچک به دو علت زیر بود:

  1. معمولاً بیشتر اکستنشن‌ها (افزونه‌ها) دارای یک ظاهر کاربری هستند که با کلیک کردن روی آیکون‌شان در سمت راست بالای مرورگر باز می‌شوند که شامل فایل‌های HTML, CSS و JavaScript هستند.
  2. همان‌طور که یک سایت با دریافت و ارسال اطلاعات، خدماتی را برای ما فراهم می‌کند، اکستنشن کروم هم همان قابلیت‌ها را داراست.

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



کروم وب استور - Chrome Web Store
کروم وب استور - Chrome Web Store

قابلیت‌های افزونه کروم (کروم اکستنشن - Chrome Extension)

پیش از این گفتم که افزونه کروم می‌تواند در کنار تمامی صفحاتی که ما در وب مشاهده می‌کنیم حضور داشته باشد. اما شاید این سؤال برای شما پیش آمده که این حضور چه کارایی یا تأثیری روی صفحات وب خواهد داشت. خُب برای توضیح این موضوع یادآوری می‌کنم که حضور آیکون افزونه در سمت راست بالای مرورگر کروم، به خاطر دسترسی همیشگی شما به آن است. اما فقط دسته‌ای از افزونه‌ها، مستقل از وب‌سایتی که مشاهده می‌کنید عمل می‌کنند. مثلاً افزونه‌ای را در نظر بگیرید که مهم‌ترین اخبار ۲۴ ساعت گذشته را از سراسر وب جمع می‌کند و شما با بازکردن آن (به وسیله کلیک روی آیکون افزونه) لیست اخبار را دریافت خواهید کرد. این افزونه کاری ندارد که شما در کدام سایت هستید یا اصلاً صفحه‌ای را باز کردید یا خیر؛ چون مستقل عمل می‌کند.

اما افزونه دیگری مثل Grammarly که در بالاتر معرفی شد، برعکس افزونه خبرخوان، با محتوای سایتی که مشاهده می‌کنید سر و کار دارد. یعنی اگر در گوگل‌داکز مشغول تایپ کردن باشید، این افزونه غلط‌های نگارشی شما را (به زبان انگلیسی) اصلاح می‌کند. پس مستقل از محتوای صفحه نیست. این تیپ افزونه‌ها این قابلیت را دارند که ظاهر سایتی که مشاهده می‌کنید عوض کنند. (نظیر فونت‌ها، رنگ‌ها و تمام چیزهایی که به نوعی به HTML, CSS یا JavaScript مربوط است.)

اکستنشن کروم همچنین این قابلیت را دارند که در پس‌زمینه (‌Background) اجرا شده و کارهایی را انجام دهند که در ظاهر قابل مشاهده نیست. مثل تغییر ip یا عوض کردن اطلاعات ارسالی به سمت سرور و... که بسیار متنوع‌اند.

افزونه کروم را از کجا و چگونه نصب کنیم؟

افزونه‌های کروم یا همان اکستنشن‌ها را می‌توانید از طریق سایت فروشگاه وب کروم (Chrome Web Store) دانلود و نصب نمایید. یادتان باشد که اکستنشن کروم فقط روی مرورگرهایی که بر پایه کرومیوم نوشته شده باشند قابلیت نصب را دارد. از جمله: گوگل کروم، کرومیوم، ماکروسافت اج جدید، اُپرا.




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


فهرست نوشته‌های من درباره اکستنشن کروم:

  1. پیش‌قسمت: چگونه اکستنشن کروم بسازیم؟ (آشنایی با افزونه کروم)
  2. چگونه اکستنشن کروم بسازیم؟‌ (قسمت اول)
برنامه نویسیکرومافزونهاکستنشنوب استور
برنامه‌نویس و طراح وب؛ یه نقطه توی دنیا که دوست داره تأثیرگذار باشه.
شاید از این پست‌ها خوشتان بیاید