اکستنشن‌ کاربردی کروم [14 ابزار]

ابزار آنلاین 7 دقیقه دقیقه زمان مطالعه بروزرسانی در18 شهریور, 1405

برای طراحان وبسایت Extension های کروم بسیار کاربردی و جذاب است در این مقاله بهترین اکستنشن های کاربردی برای طراحان سایت را معرفی کرده‌ایم

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

14 اکستنشن‌ کاربردی کروم

Awesome Screenshot
ColorZilla
WhatFont
Image Downloader
Save to Google Photos
CSS3 Generator
Page Ruler
Web Maker
Evernote Web Clipper
Stylebot
CSSViewer
CSS Shapes Editor
WordPress Style Editor
Visual Inspector

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

1. اکستنشن Awesome Screenshot

افزونه Awesome Screen Recorder & Screenshot ابزار کاملی برای گرفتن اسکرین‌شات و ضبط صفحه مرورگر است. برای طراحان و توسعه‌دهندگان وب، ثبت باگ، تهیه آموزش و ارسال بازخورد تصویری از مهم‌ترین کاربردهای آن محسوب می‌شود.

ثبت اسکرین‌شات از کل صفحه یا بخش انتخابی
ضبط تب، پنجره یا صفحه نمایش
ویرایش و حاشیه‌نویسی روی تصاویر
ذخیره و اشتراک‌گذاری سریع فایل‌های ضبط‌شده

این افزونه در اوت ۲۰۲۶ به‌روزرسانی شده و همچنان در Chrome Web Store فعال است.

2. اکستنشن ColorZilla

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

ColorZilla برای پیدا کردن و بررسی رنگ‌های استفاده‌شده در صفحات وب طراحی شده است. طراح می‌تواند بدون جست‌وجو در کدهای صفحه، رنگ یک عنصر را انتخاب کند و مقدار آن را در قالب‌هایی مثل HEX یا RGB دریافت کند.

انتخاب رنگ هر نقطه از صفحه با Eyedropper
نمایش کدهای HEX و RGB
استخراج پالت رنگی یک صفحه وب
ساخت گرادیان‌های CSS

نسخه فعلی ColorZilla از Manifest V3 کروم نیز پشتیبانی می‌کند.

3. اکستنشن WhatFont

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

شناسایی سریع فونت با حرکت ماوس
نمایش جزئیات تایپوگرافی عنصر
بررسی رنگ و استایل متن
رابط کاربری ساده بدون نیاز به باز کردن DevTools

WhatFont همچنان در Chrome Web Store فعال است و نسخه‌های جدید آن با مدل مجوزهای جدید کروم سازگار شده‌اند.

4. اکستنشن Image Downloader

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

نمایش تصاویر موجود در صفحه
فیلتر براساس اندازه، ابعاد یا URL
حذف تصاویر تکراری از فهرست
دانلود چند تصویر و تغییر نام فایل‌ها

نسخه فعلی این افزونه همچنان در Chrome Web Store فعال است و امکانات دانلود گروهی و فیلتر تصاویر را ارائه می‌دهد.

5. اکستنشن Save to Google Photos

در حال حاضر افزونه‌هایی با نام Save to Google Photos در Chrome Web Store وجود دارند، اما نسخه‌های فعلی توسط توسعه‌دهندگان شخص ثالث ارائه شده‌اند و نباید آن‌ها را افزونه رسمی گوگل معرفی کرد. این ابزارها معمولاً اجازه می‌دهند تصویر موجود در یک صفحه را مستقیم به حساب Google Photos بفرستید.

ذخیره تصویر از منوی راست‌کلیک
اتصال به حساب گوگل با OAuth
آپلود مستقیم تصویر در Google Photos
نمایش اعلان بعد از پایان آپلود

ادعای قدیمی «فضای رایگان و نامحدود» نیز باید از مقاله حذف شود؛ فضای Google Photos اکنون از فضای حساب گوگل استفاده می‌کند و حساب معمولی تا ۱۵ گیگابایت فضای مشترک دارد.

6. اکستنشن CSS3 Generator

CSS3 Generator برای تولید سریع کد برخی ویژگی‌های CSS ساخته شده است و می‌تواند برای تمرین یا ساخت قطعه‌کدهای ساده مفید باشد. با این حال، این افزونه نسبت به گزینه‌های دیگر فهرست قدیمی‌تر است و آخرین به‌روزرسانی عمومی ثبت‌شده آن به سال ۲۰۲۳ برمی‌گردد.

تولید کد Box Shadow
ساخت Border Radius
تولید Linear و Radial Gradient
ساخت Transform و Text Shadow

برای مقاله به‌روز بهتر است این افزونه با برچسب «ابزار قدیمی‌تر» معرفی شود و به‌عنوان انتخاب اصلی پیشنهاد نشود.

7. اکستنشن Page Ruler

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

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

این مقاله را حتما بخوانید

تفاوت http و https چیست؟ مقایسه و بررسی پروتکل امنیتی https

نسخه فعلی Page Ruler در ژوئیه ۲۰۲۶ به‌روزرسانی شده و همچنان در Chrome Web Store فعال است.

8. اکستنشن Web Maker

Web Maker برخلاف توضیح قدیمی مقاله، یک ابزار «طراحی سایت بدون کدنویسی» نیست. این افزونه یک محیط سریع و آفلاین برای نوشتن و آزمایش HTML، CSS و JavaScript است و بیشتر برای توسعه‌دهندگان فرانت‌اند و تمرین کدنویسی کاربرد دارد.

اجرای HTML، CSS و JavaScript به‌صورت آفلاین
مشاهده سریع نتیجه کدها
ذخیره پروژه‌ها و آزمایش‌های فرانت‌اند
اشتراک‌گذاری پروژه‌های ساخته‌شده

نسخه فعلی همچنان در Chrome Web Store فعال است و امکانات پیشرفته‌تر آن در پلن Pro ارائه می‌شوند.

9. اکستنشن Evernote Web Clipper

نام صحیح این افزونه Evernote Web Clipper است. با آن می‌توانید مقاله‌ها، صفحات وب، تصاویر و بخش‌هایی از محتوای اینترنت را مستقیماً داخل حساب Evernote ذخیره و بعداً آن‌ها را دسته‌بندی کنید.

ذخیره مقاله، صفحه وب و PDF
گرفتن اسکرین‌شات از صفحه
اضافه کردن Highlight و یادداشت
دسته‌بندی محتوا با Notebook و Tag

Evernote Web Clipper در ژوئیه ۲۰۲۶ به‌روزرسانی شده و همچنان یکی از افزونه‌های فعال Evernote برای Chrome است.

10. اکستنشن Stylebot

Stylebot امکان تغییر ظاهر سایت‌ها را مستقیماً در مرورگر فراهم می‌کند. می‌توانید بدون دستکاری فایل اصلی سایت، رنگ، فونت، فاصله‌ها و بخش‌های مختلف صفحه را تغییر دهید یا CSS دلخواه خود را بنویسید.

تغییر بصری استایل عناصر صفحه
نوشتن CSS اختصاصی
ذخیره خودکار تغییرات برای هر سایت
حالت Readability برای حذف عناصر اضافی صفحه

تغییرات Stylebot فقط در مرورگر شما اعمال می‌شوند و فایل اصلی سایت را ویرایش نمی‌کنند.

11. اکستنشن CSSViewer

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

مشاهده سریع ویژگی‌های CSS
بررسی استایل عناصر با Hover
مناسب برای بررسی طراحی سایت بدون جست‌وجوی طولانی در DevTools
رابط کاربری سبک و ساده

برخلاف متن قبلی مقاله، نسخه فعلی CSSViewer برای مشاهده مشخصات CSS طراحی شده و نباید آن را ابزار ویرایش مستقیم سایت معرفی کرد. نسخه فعلی آن در مه ۲۰۲۶ به‌روزرسانی شده است.

12. اکستنشن CSS Shapes Editor

CSS Shapes Editor ابزاری برای ایجاد و ویرایش اشکال CSS مانند Polygon، Circle و Ellipse بود. این افزونه مستقیماً در DevTools قرار می‌گرفت و امکان تغییر نقاط شکل را به‌صورت بصری فراهم می‌کرد.

ساخت Polygon
ویرایش Circle و Ellipse
جابه‌جایی و تغییر اندازه نقاط شکل
مشاهده نتیجه تغییرات روی صفحه

این افزونه دیگر گزینه مناسبی برای معرفی به‌عنوان ابزار به‌روز نیست؛ مستندات اصلی آن بیش از یک دهه قدمت دارند و گزارش‌هایی از کار نکردن نسخه قدیمی در مرورگرهای جدید وجود دارد. برای نسخه ۲۰۲۶ مقاله بهتر است این مورد حذف یا به‌عنوان ابزار قدیمی معرفی شود.

13. اکستنشن WordPress Style Editor

WordPress Style Editor در گذشته برای ذخیره تغییرات CSS ایجادشده در Chrome DevTools مستقیماً داخل فایل style.css قالب وردپرس استفاده می‌شد. این افزونه دیگر فعالانه توسعه داده نمی‌شود و برای سایت‌های وردپرسی جدید انتخاب مطمئنی محسوب نمی‌شود.

ذخیره تغییرات CSS در style.css
ارتباط با Chrome DevTools
ذخیره خودکار بعضی تغییرات
پشتیبانی از Child Theme

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

14. اکستنشن Visual Inspector

کاربرد Visual Inspector فعلی با توضیح نسخه قدیمی مقاله متفاوت است. نسخه به‌روز موجود در Chrome Web Store بیشتر برای مقایسه طرح UI با صفحه پیاده‌سازی‌شده ساخته شده و به طراح و توسعه‌دهنده کمک می‌کند اختلاف‌های بصری را سریع‌تر پیدا کند.