Computer Tricks🦾💻

⚒ روش ساختن اکستنشن کروم

🗝 اکستنشن‌ها از ابزارهای تقویت کننده‌ی کروم هستند که برای استفاده‌ی هرچه آسان‌تر کروم از سوی کاربران، مورد استفاده قرار می‌گیره...

🔨 حالا چجوری میشه اکستنشن کروم بسازیم؟

🔢 اول از همه باید یک فایل manifest.json بسازید...

💬 حالا باید داخل این فایل:
{
"name" : "extension_name"
"version" : "0.0.1"
"manifest_version" : 2
"description": "Extension_description"

"background" : {
"scripts" : [“main.js”, "script.js"]
}

"icons": {
"16": "images/icon-16.png"
"32". "images/icon-32.png"
"48": "images/icon-48.png"
"128": "images/icon-128.png"
}

"browser_action": {
   "default_icon": "icon.png",
   "default_title": "The Title",
   "default_popup": "popup.html"
}
}

🔗 رو قرار بدین تا خود اکستنشن ساخته بشه...

✨ حالا از این پارامترها بگیم:

1⃣ پارامتر "name": نام اکستنشن است...

2⃣ پارامتر "version": شماره نسخه فعلی اکستنشن را مشخص می‌کند...

3⃣ پارامتر "manifest_version": نسخه مورد نیاز برای فرمت "manifest.json" را مشخص می‌کند که مقداری که شما به این پارامتر میدین، نسخه‌ی فرمت manifest.json را مشخص می‌کند (که مثلا اگه مقدار 2 رو برای manifest.json تعیین کنید، به مرورگر اطلاع می‌دهید که از فرمت manifest.json نسخه‌ی 2 استفاده می‌کنید... ولی در بیشتر اوقات انتخاب عدد مناسب برای manifest.json مهم نیست و فقط این مقدار با نسخه مورد استفاده در ابزارها و محیط‌های توسعه‌ی مربوطه سازگاری داشته باشد. زیرا باید مقداری را انتخاب کنید که با فرمت فایل manifest.json مطابقت داشته باشد. این پارامتر معمولاً برای مشخص کردن نسخه فرمت فایل استفاده می‌شود و ارتباط مستقیمی با نسخه اکستنشن شما ندارد).

4⃣ پارامتر "description": یک توضیح کوتاه درباره عملکرد اکستنشن است...

5⃣ پارامتر "background": این پارامتر تعیین می‌کند که کدام اسکریپت‌ها برای اجرا در پس‌زمینه اکستنشن بارگذاری شوند.

6⃣ پارامتر "icons": مشخص می‌کند که آیکون‌های مختلف با اندازه‌های مختلف برای نمایش در مرورگر استفاده شوند.

7⃣ پارامتر "browser_action": تعیین می‌کند که هنگام کلیک بر روی آیکون اکستنشن در مرورگر، چه عملی انجام شود.
که شامل ۳ بخش است:

1⃣ پارامتر "default_icon": آیکون پیش‌فرض برای نمایش در نوار ابزار یا جای دیگر مرورگر.

2⃣ پارامتر "default_title": عنوان پیش‌فرض که هنگامی که موس رو بر روی آیکون اکستنشن قرار می‌دهید، نمایش داده می‌شود.

3⃣ پارامتر "default_popup": فایل HTMLیی است که وقتی کاربر بر روی آیکون کلیک می‌کند، پنجره popup مربوط به اکستنشن نمایش داده می‌شود.

📋 منظور از popup: یک پنجره‌ی کوچک است که اعلانی در سایت یا تنظیمات بخشی از اکستنشن (افزونه) و... رو از گوشه‌ی سایت نمایش می‌دهد...

🤩 به عبارتی، تا الان ما پایه‌ی اکستنشن رو بنا کردیم و حالا وقتشه که بگیم اکستنشن چیکار کنه (یعنی بخش "افزونه [ یا همون اکستنشن ]" رو ایجاد کنیم)...

😃 تنها کاری که لازمه بکنیم اینه یک فایل popup.html ایجاد می‌کنیم و درونش کد html یا کاری که اون افزونه انجام میده رو با زبان html، مشخص می‌کنیم...

💬 مثلا:
<html>
<body>
<h1> This is a extension! </h1>
<p> Follow us for more </p>
<button> Follow </button>
</body>
</html>

🧑🏻‍💻 هرچند با زبان‌های CSS و JavaScript هم میتونید به کدتون تغییرات و امکانات و... موردنظرتون رو اضافه کنید...

🌐 حالا این افزونه مثل یک سایت عمل میکنه و با فعال کردنش، یک پنجره‌ی کوچک از گوشه‌ی مرورگر پایین میاد و با تیتر This is a extension! و متن Follow us for more و دکمه‌ی Follow در زیرش، ظاهر میشه...

💡 روش فعال کردن افزونه روی کروم چجوریه؟

1⃣ وارد کروم بشید...
2⃣ در بخش منوی بالا سمت راست، وارد بخش extension (بخش افزونه‌ها) بشید...
3⃣ حالت developer mode رو فعال کنید...
4⃣ روی دکمه‌ی load unpacked که در زیرش ظاهر می‌شود کلیک کنید...
5⃣ پوشه یا همون فولدری که اکستنشنتون درونش قرار داره رو انتخاب کنید...
6⃣ حالا اکستنشنی که خودتون ساختید به لیست اکستنشن‌هاتون اضافه میشه (در صورتی که فعال نیست، فعالش کنید)...
7⃣ با کلیک بر روی علامت پازل در بالا سمت راست مرورگر، هم میتونید اکستنشنتون رو اجرا کنید...

#Extension
#Coding
#Rare_knowledge
#Chrome
#Google
#Professional
#Money
#Network
#Internet
#HTML
#CSS
#JAVASCRIPT
#Web_Developer
#Grand_Tricks
#Noble_Tricks

🤩Want more?
🛜Check our ↙️channel...↙️
🦾💻@Computer3cks

610 viewserfan, edited 20:04