چگونه یک پسوند ساده کروم بسازیم

ساختن افزونه کروم(Chrome) فرآیندی نسبتاً ساده است. وقتی کارتان تمام شد، می‌توانید از آن در رایانه‌تان برای بهبود نحوه عملکرد مرورگر استفاده کنید.

برخی از اجزای اساسی وجود دارد که مرورگر قبل از اینکه برنامه افزودنی به طور کامل عملیاتی شود به آنها نیاز دارد. ما در زیر به همه این موارد خواهیم پرداخت، از جمله اینکه چگونه می‌توان برنامه افزودنی سفارشی خود را بدون نیاز به آپلود یا اشتراک‌گذاری آن در کروم در کروم فعال کرد.(Chrome)

ساختن یک افزونه پیچیده کروم(Chrome) فرآیندی بسیار دقیق تر از آنچه در زیر می بینید است، اما روند کلی یکسان است. به خواندن ادامه دهید تا یاد بگیرید چگونه یک افزونه کروم(Chrome) بسازید که می توانید از امروز شروع به استفاده از آن کنید.

نکته(Tip) : برای اینکه ببینید برنامه افزودنی خود چقدر می‌تواند عالی باشد، این افزونه‌های شگفت‌انگیز Chrome را(these amazing Chrome extensions) بررسی کنید .

چگونه یک برنامه افزودنی کروم بسازیم

با استفاده از این راهنما، یک برنامه افزودنی ساده برای کروم ایجاد می کنید که برخی از وب سایت های مورد علاقه شما را فهرست می کند. (Chrome)کاملاً قابل تنظیم است و به روز رسانی آن واقعاً آسان است.

در اینجا چه باید کرد:

  • پوشه ای بسازید که تمام فایل های تشکیل دهنده پسوند را در خود جای دهد.
  • فایل های پایه مورد نیاز این پسوند را ایجاد کنید: manifest.json ، popup.html ، background.html ، styles.css .
  • popup.html را در یک ویرایشگر متن باز کنید و سپس همه موارد زیر را در آن جایگذاری کنید، مطمئن شوید که پس از اتمام کار، آن را ذخیره کنید.
<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Favorite Sites</title>
      <link rel="stylesheet" type="text/css" href="styles.css">
   </head>
<body>
   <ul id="myUL">
      <li><a href="https://helpdeskgeek.com/" target="_blank">Help Desk Geek</a></li>
      <li><a href="https://www.online-tech-tips.com/" target="_blank">Online Tech Tips</a></li>
      <li><a href="https://thebackroomtech.com/" target="_blank">The Back Room Tech</a></li>
   </ul>
</body>
</html>

به راحتی می توانید پیوندها(Feel) و متن پیوند را ویرایش کنید، یا اگر می خواهید افزونه کروم(Chrome) را دقیقاً همانطور که هستیم بسازید، فقط همه چیز را یکسان نگه دارید.

  • manifest.json را در ویرایشگر متن باز کنید و موارد زیر را کپی/پیست کنید:

{
“update_url”: “https://clients2.google.com/service/update2/crx”,

"manifest_version": 2،
"name": "سایت های مورد علاقه"، ( “name”: “Favorite Sites”,)
"description": "همه وب سایت های مورد علاقه من."، ( “description”: “All my favorite websites.”,)
"نسخه": "1.0"، ( “version”: “1.0”,)
"icon": { ( “icons”: {)
"16": "icon.png",
«32»: «icon.png»،
«48»: «icon.png»،
«128»: «icon.png»
}،

   “background”: { 
        “page”:”background.html”
},

    "browser_action" : {
        "default_icon" : "icon.png",
        "default_title" : "سایت های مورد علاقه"، (        “default_title” : “Favorite Sites”,)
        "default_popup": "popup.html"
    }
}

نواحی خوراکی این کد شامل نام(name) ، توضیحات(description) و default_title است.

  • styles.css را باز کرده و کد زیر را قرار دهید. این همان چیزی است که منوی بازشو را تزئین می کند تا ظاهر آن را بسیار جذاب تر و حتی استفاده از آن را آسان تر کند.

#myUL {
list-style-type: none;
   بالشتک: 0; (   padding: 0;)
   حاشیه: 0; (   margin: 0;)
   عرض: 300 پیکسل؛ (   width: 300px;)
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px;
  background-color: #f6f6f6;
  بالشتک: 12 پیکسل؛ (  padding: 12px;)
  text-decoration: هیچ; (  text-decoration: none;)
  اندازه فونت: 18px; (  font-size: 18px;)
  رنگ سیاه؛ (  color: black;)
  نمایش: بلوک؛ (  display: block;)
  font-family: 'Noto Sans', sans-serif;
}

#myUL li a:hover:not(.header) {
   background-color: #eee;
}

چیزهای زیادی می توانید در فایل CSS تغییر دهید. (CSS)پس از ساخت برنامه افزودنی کروم(Chrome) خود با این گزینه ها بازی کنید تا آن را مطابق میل خود سفارشی کنید.

  • (Create)یک نماد برای برنامه افزودنی ایجاد کنید و نام آن را icon.png بگذارید(icon.png) . آن را در پوشه افزونه کروم(Chrome) خود قرار دهید . همانطور که در کد بالا مشاهده می کنید، می توانید یک نماد جداگانه برای آن اندازه ها ایجاد کنید: 16×16 پیکسل، 32×32 و غیره.

نکته: (Tip: )گوگل اطلاعات بیشتری(Google has more information) در مورد ایجاد افزونه های کروم(Chrome) دارد. نمونه ها و گزینه های پیشرفته دیگری وجود دارد که فراتر از مراحل ساده ای است که در اینجا نشان داده ایم.

چگونه یک افزونه سفارشی(Custom Extension) به کروم اضافه کنیم

اکنون که افزونه کروم(Chrome) را ساخته اید ، زمان آن رسیده است که آن را به مرورگر اضافه کنید تا بتوانید از تمام فایل هایی که به تازگی ساخته اید استفاده کنید. نصب یک برنامه افزودنی سفارشی شامل روشی است که با نحوه نصب یک برنامه افزودنی معمولی Chrome(how you’d install a normal Chrome extension) متفاوت است .

  • از منوی Chrome، به ابزارهای بیشتر(More tools ) > برنامه‌های افزودنی(Extensions) بروید . یا، chrome://extensions/ را در نوار آدرس تایپ کنید.
  • اگر از قبل انتخاب نشده است ، دکمه کنار حالت برنامه‌نویس(Developer mode) را انتخاب کنید. این حالت خاصی را روشن می کند که به شما امکان می دهد افزونه های Chrome خود را وارد کنید .

  • از دکمه Load unpacked در بالای آن صفحه برای انتخاب پوشه ای که در مرحله 1(Step 1) در بالا ساخته اید استفاده کنید.

  • (Accept)در صورت مشاهده هرگونه درخواستی را بپذیرید . در غیر این صورت، برنامه افزودنی کروم(Chrome) سفارشی شما به همراه هر افزونه دیگری که دارید در گوشه سمت راست بالای مرورگر نشان داده می شود.

در حال ویرایش برنامه افزودنی کروم شما

اکنون که افزونه کروم(Chrome) شما قابل استفاده است، می توانید تغییراتی ایجاد کنید تا آن را متعلق به خود کنید. 

فایل styles.css نحوه نمایش پسوند را کنترل می کند، بنابراین می توانید سبک کلی فهرست را تنظیم کنید و رنگ یا نوع فونت را تغییر دهید. W3Schools یکی از بهترین منابع برای یادگیری در مورد همه چیزهای مختلف است که می توانید با CSS انجام دهید .

برای تغییر ترتیب فهرست‌بندی وب‌سایت‌ها، افزودن یا اضافه کردن یا حذف سایت‌های موجود، فایل popup.html را ویرایش کنید. فقط مطمئن شوید که ویرایش های خود را فقط در URL و نام نگه دارید. همه کاراکترهای دیگر، مانند <li> و <html> مورد نیاز هستند و نباید تغییر داده شوند. آموزش HTML در W3Schools(HTML Tutorial on W3Schools) مکان خوبی برای یادگیری بیشتر در مورد آن زبان است.



نظام بیگی

About the author

من یک برنامه نویس کامپیوتر هستم و بیش از 15 سال است که هستم. مهارت های من در توسعه و نگهداری برنامه های کاربردی نرم افزاری و همچنین ارائه پشتیبانی فنی برای آن برنامه ها نهفته است. همچنین برنامه نویسی کامپیوتر را به دانش آموزان دبیرستانی آموزش داده ام و در حال حاضر یک مربی حرفه ای هستم.


Related posts