آموزش ساخت افزونه دانلود فونت از سایتها با کمک هوش مصنوعی (ساده، سریع و کاملاً عملی!)
اگر اهل طراحی وب یا تولید محتوا باشی، حتماً پیش اومده که توی یک سایتِ خوشگل یه فونت خفن دیدی و با خودت گفتی:
"ای کاش میتونستم این فونتو دانلود کنم!"
خب… خبر خوب اینه که الان میتونی! 😎 آن هم فقط با کمک هوش مصنوعی و بدون حتی یک خط برنامهنویسی!
در این مقاله قدم به قدم یادت میدم چطور با استفاده از سایت Trae.ai یک افزونه کروم کاملاً کاربردی بسازی که هر فونتی رو از هر سایتی برات پیدا کنه و اجازه بده مستقیم دانلودش کنی.
این آموزش دقیقا همون چیزیه که توی ویدیو گفتم — فقط اینجا مرحلهبهمرحله و متنی نوشتنش تا هیچچیزی رو از دست ندی. ولی پیشنهاد میکنم آخر مقاله حتماً ویدیو رو ببینی، چون داخل ویدیو دقیقاً نشون دادم چطور فونتها رو از سایتها استخراج میکنیم و ازشون استفاده میکنیم.
بریم سر اصل مطلب! 🚀
مرحله اول: دریافت کد افزونه از Trae.ai
اولین کاری که باید انجام بدی اینه که وارد سایت زیر بشی:
داخل این سایت، یک چت هوش مصنوعی وجود داره که میتونه برات کد کامل یک افزونه کروم تولید کنه.
فقط کافیست این پرامپت رو بهش بدی (عیناً کپی کن):
پرامپت ساخت افزونه :
You are an expert Chrome Extension developer with deep knowledge of Chrome APIs, JavaScript, and web debugging. Your task is to build a Chrome extension that allows users to download fonts used on any website. Requirements: 1. The extension must detect all font files (woff, woff2, ttf, otf, eot) that are loaded by the current page, similar to how Chrome DevTools Network tab (Fonts filter) displays them. 2. Provide a popup interface (popup.html + popup.js) with a list of all detected fonts. Each font should display: The font file URL The font file type (woff, woff2, etc.) A "Download" button for each font 3. When a user clicks "Download", the extension should fetch the font file via background script and save it using the chrome.downloads API. 4. Must use `manifest_version: 3`. 5. Ensure CORS issues are handled (fetch fonts through background service worker). 6. Include proper permissions in manifest.json (`webRequest`, `downloads`, `scripting`, `activeTab`, `host_permissions` for all sites). 7. Code must be production-ready, clean and well-commented. Deliverables: manifest.json (MV3) background.js (service worker) contentScript.js (to detect fonts if needed) popup.html popup.js Minimal but functional UI with CSS Return the complete working extension code in structured files, ready to load in Chrome as an unpacked extension.
بعد از وارد کردن این متن، Trae.ai برای تو چند فایل کد آماده میکنه:
manifest.json
background.js
popup.html
popup.js
و…
این دقیقاً ستون فقرات افزونهته!
مرحله دوم: ذخیرهسازی فایلها داخل یک پوشه
حالا که کدها رو داری، وقتشه ذخیرهشون کنی.
دو تا راه داری:
راه اول: فایلهای جداگانه بساز
داخل کامپیوترت یک پوشه مثلاً به اسم
font-downloader-extension
ساختی؟
چند تا فایل با پسوندهای زیر توش بساز:
manifest.json
background.js
popup.html
popup.js
و هر فایل دیگهای که Trae.ai داد
سپس کدهایی که AI بهت داده رو عیناً داخل همون فایلها کپی کن.
راه دوم: فایلهای Trae.ai رو دانلود کن
اگر خروجی ZIP داد، فقط اکستراکت کن و تمام!
مرحله سوم: افزودن افزونه به مرورگر کروم
حالا باید افزونه رو وارد کروم کنی.
قدمها رو دقیق انجام بده:
وارد مرورگر کروم شو
از منوی بالا سمت راست (سه نقطه) وارد بشو:
More Tools → Extensions
یا مستقیماً وارد شو:
chrome://extensions
بسیار مهم:
بالای صفحه، سمت راست، گزینه Developer Mode رو فعال کن!
(اگه روشن نباشه، اصلاً نمیتونی افزونه رو لود کنی.)
وقتی Developer Mode فعال شد:
روی Load unpacked کلیک کن
پوشهای که فایلهای افزونه رو توش ذخیره کردی انتخاب کن
افزونه به لیست افزونهها اضافه میشود 🎉
حالا هر سایتی رو باز کنی و روی افزونه کلیک کنی، تمام فونتهای مورد استفاده سایت رو با لینک دانلود بهت نشون میده.
مرحله آخر: یاد بگیر چطور فونتهای دانلود شده رو استفاده کنی!
تا اینجای کار افزونه رو ساختی، نصب کردی و باهاش فونت گرفتی. اما سؤال مهم اینه:
حالا با این فونتها چیکار کنیم؟ چطور توی سایت خودمون استفاده کنیم؟
برای اینکه دقیقاً یاد بگیری چجوری فایل فونتها رو تبدیل، درج یا در CSS استفاده کنی، پیشنهاد میکنم حتماً ویدیو رو ببینی.
داخل ویدیو به صورت تصویری نشون دادم:
چطور فونتها رو به فرمتهای webfont تبدیل کنیم
چطور @font-face بنویسیم
چطور فونت رو روی یک سایت واقعی اعمال کنیم
و چند نکته مهم برای بهینهسازی عملکرد فونتها
لینک ویدیو داخل سایت قرار داده شده و واقعاً دیدنش بخش مهم آموزش است.
جمعبندی (برای رباتهای سئو و انسانها 😉)
در این مقاله یاد گرفتی که چطور:
با کمک هوش مصنوعی کد یک افزونه واقعی کروم رو بسازی
فایلهای لازم رو مرتب داخل یک پوشه قرار بدی
افزونه رو به صورت Load Unpacked روی کروم نصب کنی
و در نهایت، از افزونه برای استخراج فونتهای هر سایتی استفاده کنی
اگر میخوای این مسیر رو کاملاً حرفهای یاد بگیری و مطمئن شی که هیچ مرحلهای رو اشتباه انجام نمیدی، حتماً بخش ویدیویی آموزش رو ببین—چون همهچیز داخلش عملی و واضح نشون داده شده.
اگه به مباحثی مثل آموزش ساخت افزونه دانلود فونت از سایتها با کمک هوش مصنوعی علاقهمندی، بدون که اینجور ابزارها وقتی واقعاً به درد میخورن که کنار یک طراحی سایت اصولی و حرفهای استفاده بشن. ما توی صفحه اصلی سایت طراحیمون دقیقاً روی همین موضوع تمرکز کردیم؛ یعنی استفاده از هوش مصنوعی برای ساخت سایتها و ابزارهایی که هم کاربردی باشن، هم سریع و هم قابل توسعه. اگه دوست داری ببینی این ایدهها چطور توی پروژههای واقعی اجرا میشن، حتماً یه سر به صفحه اصلی سایت بزن.
و همچنین اگه موضوعاتی مثل آموزش ساخت افزونه دانلود فونت از سایتها با کمک هوش مصنوعی برات جذابه، احتمالاً از یادگیری ساخت پلاگین وردپرس با هوش مصنوعی هم خوشت میاد. چون دقیقاً همونجاست که هوش مصنوعی میتونه کلی از کارهای سخت برنامهنویسی رو برات سادهتر کنه و سرعت توسعه افزونهها رو چند برابر کنه. توی اون مقاله، قدمبهقدم یاد میگیری چطور ایدههات رو به یک پلاگین کاربردی وردپرس تبدیل کنی، بدون اینکه توی جزئیات فنی گیر کنی.
برای ثبت نظر ابتدا وارد حساب کاربری خود شوید