كيفية إنشاء امتداد لجوجل كروم: خطوة بخطوة

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

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

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

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

1. الخطوة 1: فهم بنية المتصفح
2. الخطوة 2: تثبيت وتكوين بيئة التطوير
3. الخطوة 3: كيفية إنشاء بيان ملحق
4. الخطوة 4: تطوير الوظائف الرئيسية
5. الخطوة 5: اختبار وتصحيح الامتداد
6. الخطوة 6: نشر وتوزيع الامتداد
7. سؤال وجواب
8. لماذا أحتاج إلى إنشاء امتداد لجوجل كروم?
9. كم من الوقت يستغرق لإنشاء امتداد لجوجل كروم?
10. ما هي مهارات البرمجة اللازمة لإنشاء امتداد لجوجل كروم?
11. كيف يمكنني نشر تمديد إنشاؤها لجوجل كروم?

الخطوة 1: فهم بنية المتصفح

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

المكونات الرئيسية لبنية متصفح كروم:

• محرك المتصفح: مسؤول عن معالجة وعرض صفحات الويب. يستخدم كروم محرك الطرفة ، التي يجري تطويرها من قبل فريق التطوير جوجل.
• محرك التقديم: مسؤول عن تحويل هتمل و كس إلى عناصر معروضة على الشاشة. يستخدم كروم محرك الطرفة ، والتي تقوم على بكت.
• محرك جافا سكريبت: مسؤول عن تنفيذ شفرة جافا سكريبت على صفحات الويب. يستخدم كروم محرك الإصدار 8 الذي طورته جوجل.
• المكدس: يحتوي على وحدات ومكتبات مختلفة ضرورية لعمل المتصفح ، مثل وحدة نمطية لمعالجة طلبات الشبكة ووحدة نمطية للعمل مع قواعد البيانات.
• علامات التبويب: يتحكم في علامات التبويب المفتوحة في المتصفح. تبدأ كل علامة تبويب عملية منفصلة تسمى عملية مبوبة.

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

الخطوة 2: تثبيت وتكوين بيئة التطوير

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

2. كروم ديفتولس التمديد: هو امتداد لجوجل كروم الذي يوفر أدوات مختلفة لتطوير وتصحيح صفحات الويب والإضافات. يمكنك تثبيته من متجر كروم على شبكة الإنترنت من خلال النقر على هذا الرابط: https://chrome.google.com/webstore/detail/chrome-devtools /.

3. محرر الكود: ستحتاج إلى محرر كود لتطوير الإضافات. يمكنك استخدام أي من برامج تحرير التعليمات البرمجية الشائعة مثل رمز الاستوديو المرئي أو النص السامي أو الذرة. تأكد من أن المحرر الخاص بك يدعم لغة برمجة جافا سكريبت.

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

الخطوة 3: كيفية إنشاء بيان ملحق

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

"بيان_إصدار": 2,

"الإصدار": "1.0",

"الوصف": "وصف الامتداد الخاص بك",

"الرموز": {

"16": "الأيقونة 16.بابوا نيو غينيا",

"48": "أيقونة48.بابوا نيو غينيا",

"128": "أيقونة128.بابوا نيو غينيا"

},

"الأذونات": [

"المتشعب://example.com/"

]

}

في هذا المثال ، سيكون للملحق حق الوصول إلى موقع الويب فقط "http://example.com /".

احفظ ملف البيان.

بعد إضافة جميع المعلمات والأذونات اللازمة ، احفظ "البيان".جسون " ملف في المجلد مع التمديد الخاص بك. تأكد من صحة اسم الملف وموقعه.

الآن لديك بيان لتمديد جوجل كروم الخاص بك! في الخطوة التالية ، سننظر في كيفية إضافة البرامج النصية والأنماط إلى الامتداد.

الخطوة 4: تطوير الوظائف الرئيسية

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

1. إنشاء ملف جديد مع الاسم الرئيسي.شبيبة . سيحتوي هذا الملف على الكود الرئيسي لوظيفة الامتداد.

2. في بداية الملف ، أضف تعليقا مع وصف الرمز:

// الكود الرئيسي لوظيفة الامتداد

3. بعد ذلك ، أضف وظيفتين رئيسيتين: الحرف الأول() و شومسيج(). سيتم استدعاء وظيفة الحرف الأول () عند بدء تشغيل الامتداد ، وسيتم استخدام وظيفة شومسيج () لإخراج الرسائل إلى المستخدم:

وظيفة الحرف الأول () {

// رمز تهيئة الامتداد

1. }
2. وظيفة عرضرسالة (رسالة) {
3. // رمز لعرض الرسائل للمستخدم
4. }
5. 4. في الحرف الأول() وظيفة ، إضافة التعليمات البرمجية التالية:
6. function init() {
7. // Получение доступа к текущей вкладке браузера

chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {

var activeTab = tabs[0];

// Код обработки активной вкладки

1. });

   }

2. 5. В функции showMessage() добавьте следующий код:

   function showMessage(message) {

3. // Создание уведомления

   var notification = document.createElement('div');

4. notification.classList.add('notification');

   notification.innerText = message;

// إضافة إشعار إلى

الوثيقة.الجسم.ملحق الطفل (إعلام) الصفحة;

// إخفاء الإشعار تلقائيا بعد 5 ثوان

سيتيموت (وظيفة () {

الإخطار.أسلوب.عرض = 'لا شيء';

}, 5000);

}

6. في وظيفة المعالجة لعلامة التبويب النشطة ، أضف الكود الضروري للتفاعل مع محتوى صفحة علامة التبويب. على سبيل المثال ، يمكنك استخدام الكروم.طريقة علامات التبويب.إرسال رسالة () لإرسال رسائل إلى صفحة علامة التبويب:

وظيفة الحرف الأول () {

كروم.علامات التبويب.الاستعلام ({ نشط: صحيح ، الحالينافذة: صحيح } ، وظيفة (علامات التبويب) {