كيفية إنشاء اضافة جوجل كروم الخاصة بك

المحتويات عرض

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

ما هى اضافات جوجل كروم؟

اضافات جوجل chrome هو برنامج يتم تثبيته في متصفح Chrome يعمل على تحسين وظائف المتصفح، يمكنك إنشاء واحدة بسهولة باستخدام تقنيات الويب مثل HTML و CSS و JavaScript.

إنشاء اضافة chrome يشبه إلي حد كبير إنشاء تطبيق ويب او موقع ويب ، لكنه يتطلب ملفًا manifest.json سنناقشه في القسم الأخير من هذا المقال.

تعرف على طريقة : تسجيل دخول ماسنجر لايت

كيف ستبدو اضافة جوجل كروم التي سنصنعها ؟

كما ترى ، تعرض اضافة الكروم أعلاه أحدث البيانات عن فير و س ك و r ونا في المملكة المتحدة، سنبحث في كيفية إنشاء هذه الاضافة في هذا المقال.

هنا ، سنستخدم https://api.coronavirus.data.gov.uk/v1/data API لجلب البيانات، سنقوم فقط بعرض أحدث سجل لبساطة هذا المنشور.

يمكن العثور على الكود المصدري الكامل لهذا المشروع على GitHub .

كيفية إنشاء اضافة جوجل كروم

في البداية ، نحتاج إلى إنشاء مجلد فارغ حيث سنضيف ملفات HTML و CSS و JavaScript الخاصة بنا.

داخل المجلد ، دعنا ننشئ ملف index.html برمز HTML التالي:

<!DOCTYPE html>
<html>
<head>
    <title>Covid-19 Stats- UK</title>
    <meta charset="utf-8">
</head>
<body>
</body>
</html>

الآن ، دعنا نضيف رابطًا إلى Bootstrap CDN في علامة ال Head. سنستخدم إطار عمل Bootstrap هنا حتى لا نضطر إلى كتابة بعض اكواد ال CSS الإضافية.

<head>
    <title>Covid-19 Stats- UK</title>
    <meta charset="utf-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

في العرض التوضيحي ، رأينا أنه يتم عرض السجلات كجدول، لذا علينا الآن العمل على إنشاء جدول.

<!DOCTYPE html>
<html>
<head>
    <title>Covid-19 Stats- UK</title>
    <meta charset="utf-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-3" style="width: 450px;">
        <h2 class="text-center">Covid Latest Report-UK</h2>
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>Date</th>
                <th>Country</th>
                <th>Confirmed</th>
                <th>Deaths</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td id="date"></td>
                <td id="areaName"></td>
                <td id="latestBy"></td>
                <td id="deathNew"></td>
            </tr>
            </tbody>
        </table>
    </div>
</body>
<script src="script.js"></script>
</html>

يُنشئ الكود أعلاه جدولًا بعرض 450px، هناك أربعة عناوين مختلفة في الجدول: Dateو و Countryو و Confirmed و Deaths.

هنا ، يمكنك أن ترى أنه تم تعيين معرفات مختلفة td لكل بيانات جدول، سنستخدم قيمة هذه المعرفات في JavaScript لتحديث بيانات الجدول، أيضًا ، قمنا هنا بتحميل JavaScript في النهاية بعد تحميل جميع محتويات HTML.

الآن ، بعد أن تم عرض الجدول ، نحتاج إلى العمل على كتابة JavaScript لجلب البيانات من واجهة ال API.

لنقم بإنشاء ملف script.js وإضافة الكود التالي:

async function fetchData() {
    const res=await fetch ("https://api.coronavirus.data.gov.uk/v1/data");
    const record=await res.json();
    document.getElementById("date").innerHTML=record.data[0].date;
    document.getElementById("areaName").innerHTML=record.data[0].areaName;
    document.getElementById("latestBy").innerHTML=record.data[0].latestBy;
    document.getElementById("deathNew").innerHTML=record.data[0].deathNew;
}
fetchData();

الآن ، دعنا نكسر الكود أعلاه:

نحن هنا نستخدم وظيفة غير متزامنة تسمى fetchData.
يتم جلب البيانات من https://api.coronavirus.data.gov.uk/v1/data API.
يتم تخزين بيانات JSON في متغير يسمى record.
محتوي ال html الخاص ب td بمعرفات بيانات ال ids و areaName و latestBy و deathNew يتم تحديثها بواسطة قيم ال API.

إذا تحققنا من المتصفح ، فسنكون قادرين على رؤية النتيجة التالية.

يتم جلب البيانات من واجهة ال (API) وتستمر في التحديث بمجرد أن تتغير البيانات الموجودة في واجهة ال API.

تعرف على كيفية : تغيير باسورد الواي فاي

ملف Manifest.json

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

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

الآن ، دعنا ننشئ ملف manifest.json في المجلد الرئيسي ونضيف الكود التالي:

{
    "name": "Covid-19 Stats UK",
    "version": "1.0.0",
    "description": "latest covid data of UK",
    "manifest_version": 3,
    "author": "Sampurna Chapagain",
    "action":{
        "default_popup": "index.html",
        "default_title": "Latest Covid Report"
    }
}

يحتوي ملفنا manifest.json على قيمة name، version، description، و manifest_version و author و action (في حقل ال action يتم وضع قيمة default_popup التي تحتوي على مسار ملف ال html وهو index.html في هذا المثال )

يمكنك إلقاء نظرة هنا لمشاهدة كافة تكوينات الملف manifest.json.

الآن ، نظرًا لأننا أضفنا أيضًا ملف manifest.json ، فنحن مستعدون لإضافة هذا المشروع كملحق في متجر Chrome.

لذلك نحتاج للذهاب إلى Select More Tools ثم الاختيار Extensions من قائمة المتصفح كما هو موضح في الصورة أدناه:

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

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

الآن ، الاضافة التي انشأناها متاحة في متجر تطبيقات Chrome يمكنك أيضًا تثبيت الاضافة في المتصفح كما هو موضح في الصورة أدناه :

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

ما هى اضافات جوجل كروم؟

كيف ستبدو اضافة جوجل كروم التي سنصنعها ؟

كيفية إنشاء اضافة جوجل كروم

ملف Manifest.json

مقالات ذات صلة

اترك تعليقاً إلغاء الرد