بیشتر طراحان سایت از مرورگر کروم برای طراحی سایت در کرج استفاده می کنند، بهترین افزونه های گوگل کروم برای طراحان به سرعت کار و کیفیت کارشون تاثیر مستقیم دارد. انتخاب بهترین افزونه گوگل کروم برای طراحان سایت به نیازها و سلیقه شما بستگی دارد. با این حال، تعدادی از افزونهها وجود دارند که به طور گسترده توسط طراحان سایت استفاده میشوند و میتوانند بسیار مفید باشند. در این مقاله به 20 تا از اکستنشن های گوگل کروم برای طراحان سایت می پردازیم با هرمو وب همراه باشید.
اکستنشن کروم چیست
اکستنشن کروم یا افزونه کروم، برنامههای کوچکی هستند که به مرورگر کروم اضافه میشوند و کارایی آن را ارتقا میدهند یا قابلیتهای جدیدی به آن اضافه میکنند.
نصب افزونه در کروم موبایل
نصب افزونه در کروم موبایل به طور مستقیم امکانپذیر نیست، اما با استفاده از مرورگرهای جایگزین مانند Kiwi Browser میتوانید این کار را انجام دهید.
مراحل نصب افزونه در کروم موبایل با استفاده از Kiwi Browser:
- مرورگر Kiwi Browser را از Google Play Store یا App Store دانلود و نصب کنید.
- مرورگر Kiwi Browser را باز کنید و به فروشگاه وب Chrome بروید.
- افزونه مورد نظر خود را پیدا کنید و روی دکمه “افزودن به Chrome” کلیک کنید.
- در پنجره باز شده، گزینه “فعال کردن حالت توسعهدهنده” را فعال کنید.
- دوباره روی دکمه “افزودن به Chrome” کلیک کنید.
افزونه های کروم کجاست
در داخل مرورگر کروم ،منوی تنظیمات: روی آیکون سه نقطه در گوشه سمت راست بالای مرورگر کروم کلیک کنید. از منوی باز شده، گزینه “تنظیمات” را انتخاب کنید. در منوی تنظیمات، به بخش “افزونهها” بروید.
نصب افزونه کروم
برای نصب اکستنشن کروم، میتوانید به فروشگاه وب Chrome مراجعه کنید. در فروشگاه وب Chrome، میتوانید افزونهها را بر اساس دسته، رتبهبندی و محبوبیت جستجو کنید. پس از یافتن افزونهای که میخواهید نصب کنید، روی دکمه “افزودن به Chrome” کلیک کنید.
بهترین افزونه گوگل کروم برای طراحان سایت
20تا از بهترین افزونه های گوگل کروم برای طراحان سایت که بیشتر مورد استفاده می شود و به سرعت کار شما بهبود می دهد صحبت می کنیم.
افزونه تشخیص رنگ طراحان سایت ColorZilla
ColorZilla یکی از محبوبترین افزونههای تشخیص رنگ برای طراحان وب است که برای مرورگرهای کروم و فایرفاکس موجود میباشد. این افزونه مجموعهای از ابزارهای قدرتمند را برای انتخاب، نمونهگیری و مدیریت رنگها ارائه میدهد.
برخی از ویژگیهای کلیدی ColorZilla عبارتند از:
- ابزار قطرهچکان: به شما امکان میدهد تا رنگ هر نقطه از صفحه را انتخاب کنید.
- نمایش کد رنگ: کد رنگ را در فرمتهای مختلف مانند HEX، RGB و HSL نمایش میدهد.
- پالت رنگ: به شما امکان میدهد تا پالتهای رنگی خود را ایجاد و ذخیره کنید.
- نمونهگیری از رنگ: به شما امکان میدهد تا از تصاویر و صفحات وب نمونهگیری کنید.
- تاریخچه رنگ: به شما امکان میدهد تا رنگهای انتخابشده قبلی خود را مشاهده کنید.
- ابزارهای تبدیل رنگ: به شما امکان میدهد تا بین فرمتهای مختلف رنگ تبدیل کنید.
- تنظیمات پیشرفته: به شما امکان میدهد تا نحوه عملکرد افزونه را سفارشی کنید.
ColorZilla یک ابزار بسیار مفید برای طراحان وب است که میتواند به آنها در انتخاب و مدیریت رنگها به طور موثر کمک کند.
در اینجا چند نمونه از نحوه استفاده از ColorZilla آورده شده است:
- برای انتخاب رنگ یک عنصر در یک صفحه وب: از ابزار قطرهچکان برای انتخاب رنگ عنصر مورد نظر استفاده کنید. کد رنگ عنصر در پنجره ColorZilla نمایش داده میشود.
- برای ایجاد یک پالت رنگ: از ابزار پالت رنگ برای ایجاد یک پالت رنگ جدید استفاده کنید. میتوانید رنگها را از صفحه وب، تصاویر یا کدهای رنگی HEX اضافه کنید.
- برای نمونهگیری از رنگ یک تصویر: از ابزار نمونهگیری رنگ برای انتخاب رنگ از یک تصویر استفاده کنید. ColorZilla کد رنگ و همچنین یک نمونه کوچک از تصویر را نمایش میدهد.
- برای تبدیل بین فرمتهای مختلف رنگ: از ابزارهای تبدیل رنگ برای تبدیل بین فرمتهای مختلف رنگ مانند HEX، RGB و HSL استفاده کنید.
پلاگین کروم طراح سایت Dark Reader
Dark Reader یک پلاگین محبوب برای مرورگر کروم است که حالت تاریک را به صفحات وب اضافه میکند. این پلاگین میتواند برای طراحان وب مفید باشد زیرا:
- خوانایی متن را در شب یا در محیطهای کم نور آسانتر میکند.
- کنتراست بین متن و پسزمینه را افزایش میدهد، که میتواند به طراحان در تشخیص بهتر عناصر صفحه کمک کند.
- از خستگی چشم جلوگیری میکند.
Dark Reader دارای تعدادی ویژگی است که طراحان وب میتوانند از آنها استفاده کنند:
- تنظیم روشنایی و کنتراست: طراحان میتوانند روشنایی و کنتراست حالت تاریک را مطابق با نیازهای خود تنظیم کنند.
- فیلترهای مختلف: Dark Reader چندین فیلتر مختلف ارائه میدهد که طراحان میتوانند از آنها برای تغییر رنگ صفحات وب استفاده کنند.
- لیست سفید: طراحان میتوانند وبسایتهایی را به لیست سفید اضافه کنند تا Dark Reader در آنها فعال نشود.
- حالتهای مختلف: Dark Reader چندین حالت مختلف مانند “حالت مطالعه” و “حالت شب” ارائه میدهد که طراحان میتوانند از آنها استفاده کنند.
افزونه گوگل طراحی سایت SVG Grabber
SVG Grabber یک افزونه محبوب برای مرورگر کروم است که به شما امکان میدهد تا تصاویر SVG را از صفحات وب دانلود یا کپی کنید. این افزونه میتواند برای طراحان وب مفید باشد زیرا:
- به آنها امکان میدهد تا تصاویر SVG را به سرعت و به آسانی از صفحات وب دیگر دانلود کنند.
- به آنها امکان میدهد تا تصاویر SVG را از صفحات وب خود کپی و در صفحات دیگر استفاده کنند.
- به آنها امکان میدهد تا کد SVG تصاویر را مشاهده کنند.
SVG Grabber دارای تعدادی ویژگی است که طراحان وب میتوانند از آنها استفاده کنند:
- دانلود تصاویر SVG: میتوانید با کلیک بر روی دکمه افزونه در نوار ابزار مرورگر، تصاویر SVG را از صفحات وب دانلود کنید.
- کپی تصاویر SVG: میتوانید با کلیک راست بر روی تصویر SVG و انتخاب گزینه “Copy SVG” تصویر را کپی کنید.
- مشاهده کد SVG: میتوانید با کلیک راست بر روی تصویر SVG و انتخاب گزینه “View SVG Code” کد SVG را مشاهده کنید.
- تنظیمات مختلف: میتوانید تنظیمات افزونه را سفارشی کنید تا نحوه عملکرد افزونه را مطابق با نیازهای خود تغییر دهید.
پلاگین طراح سایت Window Resizer
Window Resizer یک افزونه محبوب برای مرورگر کروم است که به شما امکان میدهد تا اندازه پنجره مرورگر خود را به سرعت و به آسانی تغییر دهید. این افزونه میتواند برای طراحان وب مفید باشد زیرا:
- به آنها امکان میدهد تا ببینند که وبسایت آنها در دستگاههای مختلف با وضوحهای مختلف صفحه نمایش چگونه به نظر میرسد.
- به آنها کمک میکند تا وبسایتهای خود را برای ریسپانسیو بودن طراحی کنند.
- به آنها امکان میدهد تا تستهای مختلفی را در اندازههای مختلف صفحه نمایش انجام دهند.
Window Resizer دارای تعدادی ویژگی است که طراحان وب میتوانند از آنها استفاده کنند:
- تغییر اندازه پنجره: میتوانید با استفاده از دکمههای افزونه در نوار ابزار مرورگر، اندازه پنجره مرورگر خود را به وضوحهای مختلف صفحه نمایش تغییر دهید.
- تنظیمات مختلف: میتوانید تنظیمات افزونه را سفارشی کنید تا وضوحهای صفحه نمایش دلخواه خود را اضافه یا حذف کنید.
- حالت پیشنمایش: میتوانید از حالت پیشنمایش افزونه برای مشاهده وبسایت خود در وضوحهای مختلف صفحه نمایش بدون تغییر اندازه پنجره مرورگر خود استفاده کنید.
افزونه گوگل کروم طراحی سایت Whatfont
WhatFont یک افزونه محبوب برای مرورگر کروم است که به شما امکان میدهد تا فونتهای استفاده شده در هر وبسایتی را شناسایی کنید. این افزونه میتواند برای طراحان وب مفید باشد زیرا:
- به آنها امکان میدهد تا فونتهای مورد علاقه خود را در وبسایتهای دیگر پیدا کنند.
- به آنها کمک میکند تا فونتهای وبسایت خود را انتخاب کنند.
- به آنها امکان میدهد تا ببینند که یک فونت خاص در یک وبسایت چگونه به نظر میرسد.
WhatFont دارای تعدادی ویژگی است که طراحان وب میتوانند از آنها استفاده کنند:
- شناسایی فونت: میتوانید با کلیک بر روی هر متنی در یک وبسایت، فونت استفاده شده برای آن متن را مشاهده کنید.
- نمایش اطلاعات فونت: WhatFont اطلاعاتی مانند نام فونت، وزن فونت، و سبک فونت را نمایش میدهد.
- نمایش نمونه متن: WhatFont نمونهای از متن را با استفاده از فونت انتخاب شده نمایش میدهد.
- جستجوی فونت: میتوانید با نام فونت جستجو کنید و وبسایتهایی را که از آن فونت استفاده میکنند پیدا کنید.
افزونه طراحان سایت CSS Peeper
CSS Peeper یک افزونه محبوب برای مرورگر کروم است که به شما امکان میدهد تا CSS هر عنصری در یک صفحه وب را مشاهده کنید. این افزونه میتواند برای طراحان وب مفید باشد زیرا:
- به آنها امکان میدهد تا ببینند که یک وبسایت چگونه طراحی شده است.
- به آنها کمک میکند تا مشکلات طراحی وبسایت خود را حل کنند.
- به آنها امکان میدهد تا از کد CSS وبسایتهای دیگر الهام بگیرند.
CSS Peeper دارای تعدادی ویژگی است که طراحان وب میتوانند از آنها استفاده کنند:
- مشاهده CSS: میتوانید با کلیک بر روی هر عنصری در یک وبسایت، CSS استفاده شده برای آن عنصر را مشاهده کنید.
- مشاهده اطلاعات عنصر: CSS Peeper اطلاعاتی مانند نوع عنصر، ابعاد عنصر، و موقعیت عنصر را نمایش میدهد.
- ویرایش CSS: میتوانید CSS عنصر را به صورت زنده ویرایش کنید و ببینید که چگونه تغییرات شما بر ظاهر وبسایت تأثیر میگذارد.
- دانلود CSS: میتوانید CSS یک وبسایت را به صورت فایل دانلود کنید.
پلاگین گوگل کروم طراحی وب Eagle
Eagle یک افزونه قدرتمند برای طراحان وب است که امکانات گستردهای را برای تجزیه و تحلیل و بررسی صفحات وب ارائه میدهد.
برخی از ویژگیهای کلیدی Eagle عبارتند از:
- ابزارهای انتخاب: ابزارهای مختلفی برای انتخاب عناصر مختلف صفحه وب مانند تصاویر، متن، و عناصر HTML ارائه میدهد.
- اطلاعات عنصر: اطلاعات کاملی درباره هر عنصر مانند ابعاد، موقعیت، و کد CSS آن را نمایش میدهد.
- ویرایشگر CSS: امکان ویرایش زنده کد CSS عناصر را برای مشاهده تغییرات در ظاهر صفحه وب فراهم میکند.
- نقطه توقف: امکان ایجاد breakpoint برای بررسی چیدمان صفحه وب در دستگاههای مختلف با وضوحهای مختلف صفحه نمایش را فراهم میکند.
- دانلود تصاویر: امکان دانلود تصاویر و فایلهای SVG از صفحه وب را فراهم میکند.
- سازگاری با ابزارهای دیگر: با ابزارهای طراحی محبوبی مانند Sketch و Figma سازگار است.
Eagle به صورت رایگان در فروشگاه وب Chrome قابل دانلود است.
نکاتی برای استفاده از Eagle:
- میتوانید از کلیدهای میانبر برای دسترسی سریع به functionalities افزونه Eagle استفاده کنید.
- میتوانید تنظیمات Eagle را سفارشی کنید تا نحوه عملکرد افزونه را مطابق با نیازهای خود تغییر دهید.
- Eagle با همه وبسایتها سازگار نیست. ممکن است در برخی از وبسایتها به درستی کار نکند.
پلاگین طراحان وب Mobile Simulator
- Mobile Simulator یک افزونه محبوب برای طراحان وب است که به شما امکان میدهد تا صفحات وب را در دستگاههای مختلف موبایل شبیهسازی کنید. این افزونه میتواند برای طراحان وب مفید باشد زیرا:
- به آنها امکان میدهد تا ببینند که وبسایت آنها در دستگاههای مختلف چگونه به نظر میرسد.
- به آنها کمک میکند تا مشکلات طراحی وبسایت خود را برای دستگاههای موبایل حل کنند.
- به آنها امکان میدهد تا وبسایت خود را برای ریسپانسیو بودن تست کنند.
- Mobile Simulator دارای تعدادی ویژگی است که طراحان وب میتوانند از آنها استفاده کنند:
- شبیهسازی دستگاهها: میتوانید طیف وسیعی از دستگاههای موبایل مانند iPhone، iPad، و گوشیهای Android را شبیهسازی کنید.
- تغییر اندازه صفحه نمایش: میتوانید اندازه صفحه نمایش را به صورت دستی تغییر دهید تا ببینید که وبسایت شما در وضوحهای مختلف چگونه به نظر میرسد.
- چرخش دستگاه: میتوانید دستگاه را بچرخانید تا ببینید که وبسایت شما در حالت افقی و عمودی چگونه به نظر میرسد.
- تنظیمات مختلف: میتوانید تنظیماتی مانند نوع اتصال و User Agent را تغییر دهید.
افزونه کروم طراحی سایت Page Ruler Redux
Page Ruler Redux یک افزونه محبوب برای طراحان وب است که به شما امکان میدهد تا ابعاد و موقعیت عناصر در صفحات وب را اندازهگیری کنید. این افزونه میتواند برای طراحان وب مفید باشد زیرا:
- به آنها امکان میدهد تا طرحهای خود را با دقت بیشتری ایجاد کنند.
- به آنها کمک میکند تا مشکلات طراحی وبسایت خود را حل کنند.
- به آنها امکان میدهد تا از اندازه و موقعیت عناصر در وبسایتهای دیگر الهام بگیرند.
Page Ruler Redux دارای تعدادی ویژگی است که طراحان وب میتوانند از آنها استفاده کنند:
- اندازهگیری خطکش: میتوانید از خطکش برای اندازهگیری ابعاد هر عنصری در صفحه وب استفاده کنید.
- اندازهگیری مختصات: میتوانید مختصات هر عنصری در صفحه وب را مشاهده کنید.
- راهنمای بصری: راهنماهای بصری برای کمک به شما در تراز کردن عناصر در صفحه وب ارائه میدهد.
- شبکه بندی: میتوانید یک شبکه بندی را به صفحه وب اضافه کنید تا به شما در چیدمان عناصر کمک کند.
- ذخیره اندازهگیریها: میتوانید اندازهگیریها را برای استفاده بعدی ذخیره کنید.
پلاگین کروم طراح وب Image Downloader
Image Downloader یک افزونه محبوب برای طراحان وب است که به شما امکان میدهد تا تصاویر را به صورت دستهای از صفحات وب دانلود کنید. این افزونه میتواند برای طراحان وب مفید باشد زیرا:
- به آنها امکان میدهد تا تصاویر مورد نیاز خود را به سرعت و به آسانی دانلود کنند.
- به آنها کمک میکند تا از تصاویر وبسایتهای دیگر الهام بگیرند.
- به آنها امکان میدهد تا تصاویر را برای استفاده در پروژههای خود ذخیره کنند.
Image Downloader دارای تعدادی ویژگی است که طراحان وب میتوانند از آنها استفاده کنند:
- دانلود دستهای: میتوانید چندین تصویر را به طور همزمان دانلود کنید.
- فیلتر کردن: میتوانید تصاویر را بر اساس نوع، اندازه و URL فیلتر کنید.
- ذخیره در پوشه: میتوانید تصاویر را در یک پوشه خاص ذخیره کنید.
- پیش نمایش: میتوانید قبل از دانلود، پیش نمایش تصاویر را مشاهده کنید.
افزونه طراحان وب Fonts Ninja
Fonts Ninja یک افزونه محبوب برای طراحان وب است که به شما امکان میدهد تا فونتهای استفاده شده در هر وبسایتی را شناسایی کنید. این افزونه میتواند برای طراحان وب مفید باشد زیرا:
- به آنها امکان میدهد تا فونتهای مورد علاقه خود را در وبسایتهای دیگر پیدا کنند.
- به آنها کمک میکند تا فونتهای وبسایت خود را انتخاب کنند.
- به آنها امکان میدهد تا ببینند که یک فونت خاص در یک وبسایت چگونه به نظر میرسد.
Fonts Ninja دارای تعدادی ویژگی است که طراحان وب میتوانند از آنها استفاده کنند:
- شناسایی فونت: میتوانید با کلیک بر روی هر متنی در یک وبسایت، فونت استفاده شده برای آن متن را مشاهده کنید.
- نمایش اطلاعات فونت: Fonts Ninja اطلاعاتی مانند نام فونت، سایز، رنگ و… را نمایش میدهد.
- نمایش نمونه متن: Fonts Ninja نمونهای از متن را با استفاده از فونت انتخاب شده نمایش میدهد.
- جستجوی فونت: میتوانید با نام فونت جستجو کنید و وبسایتهایی را که از آن فونت استفاده میکنند پیدا کنید.
- دانلود فونت: می توانید فونت های مورد نظر خود را دانلود کنید.
Fonts Ninja یک افزونه رایگان و پولی دارد که میتوانید آن را از فروشگاه وب Chrome دانلود کنید.
افزونه طراحی سایت HTML to Figma
HTML to Figma یک افزونه محبوب برای طراحان وب است که به شما امکان میدهد تا صفحات وب HTML را به طرحهای Figma تبدیل کنید. این افزونه میتواند برای طراحان وب مفید باشد زیرا:
- به آنها امکان میدهد تا به سرعت و به آسانی طرحهای وبسایت خود را ایجاد کنند.
- به آنها کمک میکند تا از کدنویسی HTML خلاص شوند.
- به آنها امکان میدهد تا طرحهای خود را با دیگران به اشتراک بگذارند.
HTML to Figma دارای تعدادی ویژگی است که طراحان وب میتوانند از آنها استفاده کنند:
- تبدیل HTML: میتوانید صفحات وب HTML را به طرحهای Figma تبدیل کنید.
- انتخاب عناصر: میتوانید عناصر خاصی را در صفحه وب خود انتخاب کنید و آنها را به Figma تبدیل کنید.
- تنظیمات: میتوانید تنظیماتی مانند رنگها، فونتها و… را در طرح Figma خود سفارشی کنید.
- اشتراک گذاری: میتوانید طرحهای Figma خود را با دیگران به اشتراک بگذارید.
پلاگین طراحان سایت PerfectPixel
PerfectPixel یک افزونه محبوب برای طراحان وب است که به شما امکان میدهد تا طرحهای خود را به طور دقیق بر روی صفحات وب پیادهسازی کنید. این افزونه میتواند برای طراحان وب مفید باشد زیرا:
- به آنها کمک میکند تا طرحهای خود را با دقت بیشتری پیادهسازی کنند.
- به آنها کمک میکند تا از مشکلات طراحی جلوگیری کنند.
- به آنها کمک میکند تا در زمان خود صرفهجویی کنند.
PerfectPixel دارای تعدادی ویژگی است که طراحان وب میتوانند از آنها استفاده کنند:
- Overlay: یک لایه شفاف از طرح شما را بر روی صفحه وب قرار میدهد تا بتوانید آن را با پیکسل مقایسه کنید.
- Grid: یک شبکه را بر روی صفحه وب قرار میدهد تا به شما در تراز کردن عناصر کمک کند.
- Guides: راهنماهایی را برای کمک به شما در چیدمان عناصر ارائه میدهد.
- Measurements: اندازهگیری عناصر را در صفحه وب نمایش میدهد.
افزونه گوگل کروم طراحی سایت CSS SCAN
CSS SCAN یک افزونه محبوب برای طراحان وب است که به شما امکان میدهد تا CSS هر عنصری را در یک صفحه وب بررسی و کپی کنید. این افزونه میتواند برای طراحان وب مفید باشد زیرا:
- به آنها کمک میکند تا به سرعت و به آسانی CSS هر عنصری را مشاهده کنند.
- به آنها کمک میکند تا مشکلات CSS خود را حل کنند.
- به آنها کمک میکند تا از CSS وبسایتهای دیگر الهام بگیرند.
CSS SCAN دارای تعدادی ویژگی است که طراحان وب میتوانند از آنها استفاده کنند:
- Inspect Element: میتوانید با کلیک بر روی هر عنصری در صفحه وب، CSS آن را مشاهده کنید.
- Copy CSS: میتوانید CSS هر عنصری را با یک کلیک کپی کنید.
- Filter: میتوانید CSS را بر اساس نوع، selector و… فیلتر کنید.
- Search: میتوانید برای CSS خاص جستجو کنید.
افزونه طراحان سایت Site Palette
Site Palette یک افزونه محبوب برای طراحان وب است که به شما امکان میدهد تا پالت رنگی هر صفحه وب را استخراج کنید. این افزونه میتواند برای طراحان وب مفید باشد زیرا:
- به آنها کمک میکند تا به سرعت و به آسانی پالت رنگی هر وبسایتی را مشاهده کنند.
- به آنها کمک میکند تا پالتهای رنگی خود را ایجاد کنند.
- به آنها کمک میکند تا از پالتهای رنگی وبسایتهای دیگر الهام بگیرند.
Site Palette دارای تعدادی ویژگی است که طراحان وب میتوانند از آنها استفاده کنند:
- Extract Palette: میتوانید پالت رنگی هر صفحه وب را استخراج کنید.
- Save Palettes: میتوانید پالتهای رنگی خود را ذخیره کنید.
- Export Palettes: میتوانید پالتهای رنگی خود را به فرمتهای مختلف صادر کنید.
- Share Palettes: میتوانید پالتهای رنگی خود را با دیگران به اشتراک بگذارید.
