كيفية عمل ملحق كروم بسيط

يعد إنشاء امتداد Chrome عملية مباشرة إلى حد ما. عند الانتهاء ، ستتمكن من استخدامه على جهاز الكمبيوتر الخاص بك لتحسين طريقة عمل المتصفح.

هناك بعض المكونات الأساسية التي يتطلبها المتصفح قبل أن يصبح الامتداد جاهزًا للعمل بشكل كامل. سنستعرض كل هذا أدناه ، بما في ذلك كيفية تشغيل ملحقك المخصص في Chrome دون الحاجة إلى تحميله أو مشاركته مع أي شخص آخر.

يعد إنشاء امتداد Chrome(Chrome) معقد عملية أكثر تفصيلاً مما ستراه أدناه ، لكن العملية العامة هي نفسها. استمر في القراءة لتتعلم كيفية إنشاء امتداد Chrome يمكنك البدء في استخدامه اليوم.

نصيحة(Tip) : لترى إلى أي مدى يمكن أن يكون الامتداد الخاص بك رائعًا ، تحقق من امتدادات Chrome الرائعة هذه(these amazing Chrome extensions) .

كيفية عمل ملحق كروم

باستخدام هذا الدليل ، ستنشئ إضافة Chrome(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”: “Favorite Sites”,)
"الوصف": "جميع مواقع الويب المفضلة لدي." ، ( “description”: “All my favorite websites.”,)
"الإصدار": "1.0" ، ( “version”: “1.0”,)
"الرموز": { ( “icons”: {)
"16": "icon.png" ،
"32": "icon.png" ،
"48": "icon.png" ،
"128": "icon.png"
} ،

   "الخلفية": {  (   “background”: { )
        "الصفحة": "background.html" (        “page”:”background.html”)
}،

    “browser_action”: {
        “default_icon”: “icon.png”،
        “default_title”: “المواقع المفضلة”، (        “default_title” : “Favorite Sites”,)
        “default_popup”: “popup.html”
    }
}

تشمل المناطق الصالحة للأكل في هذا الرمز (default_title)الاسم (name)والوصف(description) والعنوان الافتراضي .

  • افتح styles.css والصق الكود التالي. هذا هو ما يزين القائمة المنبثقة لجعل النظر إليها أكثر جاذبية وحتى أسهل في الاستخدام.

#myUL {
list-style-type: none؛
   حشوة: 0؛ (   padding: 0;)
   الهامش: 0؛ (   margin: 0;)
   العرض: 300 بكسل ؛ (   width: 300px;)
}

#myUL li a {
  border: 1px solid #ddd;
  أعلى الهامش: -1 بكسل ؛ (  margin-top: -1px;)
  background-color: #f6f6f6;
  الحشو: 12 بكسل ؛ (  padding: 12px;)
  زخرفة النص: لا شيء ؛ (  text-decoration: none;)
  حجم الخط: 18 بكسل ؛ (  font-size: 18px;)
  لون أسود؛ (  color: black;)
  العرض محجوب؛ (  display: block;)
  عائلة الخطوط: 'Noto Sans'، sans-serif؛ (  font-family: ‘Noto Sans’, sans-serif;)
}

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

هناك الكثير الذي يمكنك تغييره في ملف CSS . العب مع هذه الخيارات بعد عمل امتداد Chrome لتخصيصه حسب رغبتك.

  • قم(Create) بإنشاء رمز للملحق وقم بتسميته icon.png(icon.png) . ضعه في مجلد امتداد Chrome . كما ترى في الكود أعلاه ، يمكنك إنشاء رمز منفصل لتلك الأحجام: 16 × 16 بكسل ، 32 × 32 ، وما إلى ذلك.

نصيحة: (Tip: )لدى Google المزيد من المعلومات(Google has more information) حول إنشاء ملحقات Chrome . هناك أمثلة أخرى وخيارات متقدمة تتجاوز الخطوات البسيطة الموضحة هنا.

كيفية إضافة امتداد مخصص(Custom Extension) إلى Chrome

الآن بعد أن قمت بإنشاء امتداد 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) خصيصًا مع أي ملحقات أخرى لديك في الزاوية اليمنى العليا من المتصفح.

تحرير ملحق كروم الخاص بك

الآن بعد أن أصبح امتداد Chrome قابلاً للاستخدام ، يمكنك إجراء تغييرات لجعله خاصًا بك. 

يتحكم ملف styles.css في كيفية ظهور الامتداد ، بحيث يمكنك ضبط نمط القائمة الكلي وتغيير لون الخط أو نوعه. W3Schools هي واحدة من أفضل الموارد للتعرف على جميع الأشياء المختلفة التي يمكنك القيام بها باستخدام CSS .

لتبديل ترتيب إدراج مواقع الويب ، أو لإضافة مواقع أو أكثر أو إزالة المواقع الموجودة ، قم بتحرير ملف popup.html. فقط تأكد من الاحتفاظ بتعديلاتك على عنوان URL(URL) والاسم فقط. جميع الأحرف الأخرى ، مثل <li> و <html> ، مطلوبة ولا يجب تغييرها. دروس HTML في W3Schools(HTML Tutorial on W3Schools) هي مكان جيد لمعرفة المزيد عن تلك اللغة.



رغد السهلي

About the author

أنا مبرمج كمبيوتر منذ أكثر من 15 عامًا. تكمن مهاراتي في تطوير التطبيقات البرمجية وصيانتها ، فضلاً عن تقديم الدعم الفني لتلك التطبيقات. لقد قمت أيضًا بتدريس برمجة الكمبيوتر لطلاب المدارس الثانوية ، وأنا حاليًا مدرس محترف.


Related posts