كيفية جعل تمديد كروم بسيط

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

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

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

نصيحة: لمعرفة مدى روعة ملحقك ، تحقق من هذه ملحقات كروم مذهلة.

كيفية إنشاء امتداد 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>

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

    In_content_1 الكل: [300x250] / dfp: [640x360]->
    • افتح manifest.jsonفي محرر النصوص وانسخ / الصق ما يلي:

      • {
      "update_url": "https://clients2.google.com/service/update2/crx"،

      "manifest_version": 2،
      "الاسم": "المواقع المفضلة" ،
      "الوصف": "جميع مواقع الويب المفضلة." ،
      "الإصدار": "1.0" ،
      "الرموز": {
      "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_popup ":" popup.html "
      على }
      على }

      تتضمن المناطق الصالحة للأكل في هذه الكود الاسمو الوصفو defef_t_title.

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

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

        #myUL li a {
        الحد: 1px solid #ddd؛
        margin-top: -1px؛
        لون الخلفية: # f6f6f6؛
        padding: 12px؛
        زخرفة النص: لا شيء ؛
        حجم الخط: 18 بكسل ؛
        اللون: أسود ؛
        العرض : block؛
        font-family: 'Noto Sans'، sans-serif؛
        }

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

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

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

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

          كيفية إضافة ملحق مخصص إلى Chrome

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

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

                • تحرير امتداد Chrome الخاص بك

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

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

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

              • و ، مطلوبة ولا يجب تغييرها. HTML تعليمي على W3Schools هو مكان جيد للتعرف على المزيد حول هذه اللغة.

                • 11.3: Chrome Extensions: Content Scripts - Programming with Text

                المنشورات ذات الصلة:

                كيفية تحويل قرص حيوي إلى قرص أساسي كيفية إعداد نظام النسخ الاحتياطي التلقائي لنظام التشغيل Windows كيفية استخدام واي فاي لإجراء مكالمات الهاتف المحمول نصائح لإزالة برامج التجسس لجهاز الكمبيوتر الخاص بك أو الهاتف الذكي كيف المزدوج الحذاء لينكس والنعناع ويندوز كيفية تحويل جهاز الكمبيوتر الخاص بك إلى DVR كيفية تمهيد شخص ما قبالة شبكة واي فاي الخاص بك إذا كنت القبض عليهم اختطاف الإنترنت الخاص بك

                5.11.2019