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

-عمل-ملحق-كروم-بسيط.png


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

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

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

تلميح: لترى إلى أي مدى يمكن أن تكون الإضافة الخاصة بك رائعة ، تحقق من ذلك هذه ملحقات الكروم الرائعة.

كيفية عمل امتداد كروم

سيؤدي اتباع هذا الدليل إلى إنشاء ملحق Chrome بسيط يسرد بعض مواقعك المفضلة. إنه قابل للتخصيص بالكامل وسهل التحديث حقًا.

إليك ما يجب فعله:

  • قم بإنشاء مجلد حيث سيتم تخزين جميع الملفات التي يتكون منها الامتداد.
  • قم بإنشاء الملفات الأساسية المطلوبة بواسطة هذا الامتداد: البيان. jsonو popup.htmlو background.htmlو style.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="https://helpdeskgeek.com/how-to/how-to-make-a-simple-chrome-extension/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>

يمكنك تعديل الروابط ونص الرابط ، وإذا كنت تريد أن يكون امتداد Chrome مثلنا تمامًا ، فما عليك سوى الاحتفاظ بكل شيء كما هو.

  • افتح البيان. json في محرر نصوص ونسخ / لصق:

{
“Update_url”: “https://clients2.google.com/service/update2/crx” ،

“الإصدار_المنفس”: 2 ،
“الاسم”: “المواقع المفضلة”،
“الوصف”: “جميع مواقع الويب المفضلة لدي.”،
“الإصدار”: “1.0”،
“الرموز”: {
“16”: “icon.png” ،
“32”: “icon.png” ،
“48”: „icon.png” ،
“128”: „icon.png”
} ،

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

“جرأة المتصفح”: {
“Default_icon”: “icon.png” ،
“Default_title”: “المواقع المفضلة”،
“Default_popup”: “popup.html”
}
}

تشمل المناطق الصالحة للأكل من هذا الرمز اسمو وصف، أنا default_title.

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

# myUL {
نوع نمط القائمة: لا شيء ؛
حشوة: 0 ؛
الهامش: 0؛
العرض: 300 بكسل ؛
}

#myUL li a {
الحدود: 1px صلب #ddd ؛
الهامش العلوي: -1 بكسل ؛
لون الخلفية: # f6f6f6 ؛
الحشو: 12 بكسل ؛
زخرفة النص: لا شيء ؛
حجم الخط: 18 بكسل ؛
لون أسود؛
العرض محجوب؛
عائلة الخطوط: “Noto Sans”، sans-serif؛
}

#myUL li a: hover: not (.header {
لون الخلفية: #eee ؛
}

يمكنك تغيير الكثير في ملف CSS. العب مع هذه الخيارات بعد إنشاء امتداد Chrome ليناسب تفضيلاتك.

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

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

كيفية إضافة امتداد مخصص إلى Chrome

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

  • من قائمة Chrome ، انتقل إلى أدوات أكثر > ملحقات. أو اكتب الكروم: // ملحقات / في شريط العنوان.
  • حدد الزر المجاور لـ وضع المطور إذا لم يكن محددًا بالفعل. سيؤدي هذا إلى تشغيل وضع خاص يسمح لك باستيراد ملحقات Chrome الخاصة بك.
  • استعمال تحميل تفريغ أعلى هذه الصفحة لتحديد المجلد الذي تم إنشاؤه في الخطوة 1 أعلاه.
  • اقبل جميع المطالبات إذا رأيتها. بخلاف ذلك ، ستظهر امتداد Chrome المخصص مع أي إضافات أخرى لديك في الزاوية اليمنى العليا من متصفحك.

تحرير امتداد كروم

الآن بعد أن أصبحت إضافة Chrome جاهزة ، يمكنك إجراء تغييرات لجعلها مخصصة.

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

لتغيير ترتيب مواقع الويب ، أو إضافة مواقع أو أكثر ، أو إزالة المواقع الموجودة ، قم بتحرير ملف popup.html. فقط تذكر الاحتفاظ بالتغييرات الخاصة بعنوان URL والاسم فقط. جميع الشخصيات الأخرى ، على سبيل المثال

  • أنا مطلوبة ولا يجب تغييرها. دروس HTML في W3Schools هو مكان جيد لمعرفة المزيد عن اللغة.
  • scroll to top