يحدد ملف HTML هذا بنية النافذة المنبثقة للامتداد الخاص بك. إنها صفحة بسيطة تحتوي على عنوان ورابط إلى ملف JavaScript.

  1. إنشاء popup.js:
   document.addEventListener(\\'DOMContentLoaded\\', function() {     console.log(\\'Extension popup loaded\\');   });

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

  1. اختبر امتدادك محليًا:

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

الخطوة 2: كيفية جعل امتدادك يبدو أنيقًا

الاستعداد للتقديم

  1. إنشاء أيقونات عالية الجودة:

تمثل هذه الرموز امتدادك في أماكن مختلفة في Chrome والسوق الإلكتروني.

  1. التقط لقطات شاشة (1280 × 800 أو 640 × 400 بكسل):

توفر لقطات الشاشة للمستخدمين المحتملين معاينة لوظائف الإضافة.

  1. اكتب وصفًا مقنعًا:

يساعد الوصف الجيد المستخدمين على فهم إضافتك ويمكنهم تحسين ظهورها في نتائج البحث.

  1. اختر الفئات المناسبة:

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

الخطوة 3: إنشاء حساب مطور (تذكرة بقيمة 5 دولارات لتمديد النجومية)

  1. انتقل إلى لوحة تحكم مطور Chrome.
  2. قم بتسجيل الدخول باستخدام حسابك في Google أو أنشئ حسابًا جديدًا.
  3. دفع رسوم تسجيل المطور لمرة واحدة (5 دولارات أمريكية).
  4. تحقق من عنوان بريدك الإلكتروني إذا لزم الأمر.

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

الخطوة 4: قم بتحميل الامتداد الخاص بك

  1. انقر على \\\"عنصر جديد\\\" في لوحة تحكم المطور.
  2. قم بإنشاء ملف ZIP بامتدادك:
  3. رفع الملف المضغوط.
  4. املأ جميع الحقول المطلوبة:
  5. ضبط خيارات الرؤية:
  6. إعداد التسعير والتوزيع:

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

الخطوة 5: نشر الامتداد الخاص بك (لحظة الحقيقة)

  1. مراجعة جميع المعلومات للتأكد من دقتها.
  2. قبول اتفاقية المطور.
  3. انقر على \\\"نشر\\\" لإرسال ملحقك للمراجعة.
  4. انتظر حتى يقوم Google بمراجعة إضافتك:
  5. بمجرد الموافقة عليها، سيتم نشر الإضافة في سوق Chrome الإلكتروني!

تقوم Google بمراجعة جميع الإضافات للتأكد من توافقها مع سياسات السوق الإلكتروني قبل إتاحتها للمستخدمين.

الخطوة 6: صيانة الامتداد الخاص بك وتحديثه

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

تعد صيانة الامتداد وتحديثه أمرًا بالغ الأهمية لنجاحه على المدى الطويل ورضا المستخدم.

كيفية تجنب الأخطاء المزعجة في ملحق Chrome

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

سيساعد اتباع أفضل الممارسات هذه على ضمان أن يكون ملحقك آمنًا وفعالًا وسهل الاستخدام.

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

","image":"http://www.luping.net/uploads/20241113/173146788967341a711c096.jpg","datePublished":"2024-11-13T11:25:59+08:00","dateModified":"2024-11-13T11:25:59+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
"إذا أراد العامل أن يؤدي عمله بشكل جيد، فعليه أولاً أن يشحذ أدواته." - كونفوشيوس، "مختارات كونفوشيوس. لو لينجونج"
الصفحة الأمامية > برمجة > من الصفر إلى Chrome Hero: كيفية إنشاء ملحق المتصفح الخاص بك وتشغيله

من الصفر إلى Chrome Hero: كيفية إنشاء ملحق المتصفح الخاص بك وتشغيله

تم النشر بتاريخ 2024-11-13
تصفح:627

From Zero to Chrome Hero: How to Build and Launch Your Own Browser Extension

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

الخطوة 1: تطوير الامتداد الخاص بك

  1. قم بإنشاء دليل جديد لامتدادك.
  2. إنشاء ملف Manifest.json:
   {
     "manifest_version": 2,  // Specifies the version of the manifest file format
     "name": "My First Extension",  // The name of your extension
     "version": "1.0",  // The version of your extension
     "description": "A simple Chrome extension.",  // A brief description of your extension
     "browser_action": {
       "default_popup": "popup.html"  // Specifies the HTML file to be used as the popup
     },
     "permissions": [
       "activeTab"  // Requests permission to access the currently active tab
     ]
   }

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

  1. إنشاء popup.html:
   
   
     
       My First Extension

Hello, World!

يحدد ملف HTML هذا بنية النافذة المنبثقة للامتداد الخاص بك. إنها صفحة بسيطة تحتوي على عنوان ورابط إلى ملف JavaScript.

  1. إنشاء popup.js:
   document.addEventListener('DOMContentLoaded', function() {
     console.log('Extension popup loaded');
   });

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

  1. اختبر امتدادك محليًا:
    • افتح Chrome وانتقل إلى chrome://extensions/
    • تمكين "وضع المطور" في الجزء العلوي الأيمن
    • انقر فوق "تحميل غير مضغوط" وحدد دليل الامتداد الخاص بك

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

الخطوة 2: كيفية جعل امتدادك يبدو أنيقًا

الاستعداد للتقديم

  1. إنشاء أيقونات عالية الجودة:
    • 16x16: للأيقونة المفضلة
    • 48x48: لصفحة إدارة الامتدادات
    • 128x128: لسوق Chrome الإلكتروني

تمثل هذه الرموز امتدادك في أماكن مختلفة في Chrome والسوق الإلكتروني.

  1. التقط لقطات شاشة (1280 × 800 أو 640 × 400 بكسل):
    • التقط امتدادك أثناء العمل
    • تسليط الضوء على الميزات الرئيسية

توفر لقطات الشاشة للمستخدمين المحتملين معاينة لوظائف الإضافة.

  1. اكتب وصفًا مقنعًا:
    • اشرح بوضوح ما تفعله الإضافة
    • قائمة الميزات والفوائد الرئيسية
    • استخدم النقاط النقطية لسهولة القراءة

يساعد الوصف الجيد المستخدمين على فهم إضافتك ويمكنهم تحسين ظهورها في نتائج البحث.

  1. اختر الفئات المناسبة:
    • حدد ما يصل إلى 5 فئات ذات صلة
    • يساعد هذا المستخدمين في العثور على امتدادك

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

الخطوة 3: إنشاء حساب مطور (تذكرة بقيمة 5 دولارات لتمديد النجومية)

  1. انتقل إلى لوحة تحكم مطور Chrome.
  2. قم بتسجيل الدخول باستخدام حسابك في Google أو أنشئ حسابًا جديدًا.
  3. دفع رسوم تسجيل المطور لمرة واحدة (5 دولارات أمريكية).
  4. تحقق من عنوان بريدك الإلكتروني إذا لزم الأمر.

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

الخطوة 4: قم بتحميل الامتداد الخاص بك

  1. انقر على "عنصر جديد" في لوحة تحكم المطور.
  2. قم بإنشاء ملف ZIP بامتدادك:
    • تضمين جميع الملفات الضرورية (manifest.json، HTML، JS، CSS، الرموز)
    • استبعاد أي ملفات أو أدلة غير ضرورية
  3. رفع الملف المضغوط.
  4. املأ جميع الحقول المطلوبة:
    • الوصف التفصيلي
    • لقطتان للشاشة على الأقل
    • صورة مربعة ترويجية (440 × 280 بكسل)
    • أيقونات (16×16، 48×48، 128×128)
    • حدد الفئة الأساسية والفئات الإضافية
  5. ضبط خيارات الرؤية:
    • عام: مرئي لجميع المستخدمين في سوق Chrome الإلكتروني
    • غير مدرج: يمكن الوصول إليه فقط عبر رابط مباشر
  6. إعداد التسعير والتوزيع:
    • مجانًا أو مدفوعًا (في حالة الدفع، قم بإعداد حساب تاجر في Google Payments)
    • اختر البلدان التي تريد التوزيع فيها

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

الخطوة 5: نشر الامتداد الخاص بك (لحظة الحقيقة)

  1. مراجعة جميع المعلومات للتأكد من دقتها.
  2. قبول اتفاقية المطور.
  3. انقر على "نشر" لإرسال ملحقك للمراجعة.
  4. انتظر حتى يقوم Google بمراجعة إضافتك:
    • يستغرق عادةً بضعة أيام عمل
    • قد يُطلب منك إجراء تغييرات إذا تم العثور على مشكلات
  5. بمجرد الموافقة عليها، سيتم نشر الإضافة في سوق Chrome الإلكتروني!

تقوم Google بمراجعة جميع الإضافات للتأكد من توافقها مع سياسات السوق الإلكتروني قبل إتاحتها للمستخدمين.

الخطوة 6: صيانة الامتداد الخاص بك وتحديثه

  1. التحقق بانتظام من تعليقات المستخدمين وتقارير الأخطاء.
  2. قم بتحديث الامتداد الخاص بك لإصلاح الأخطاء وإضافة ميزات جديدة:
    • قم بزيادة رقم الإصدار في البيان.json
    • تحميل ملف ZIP جديد مع التغييرات
    • إرسال للمراجعة مرة أخرى
  3. الرد على تعليقات المستخدمين وأسئلتهم.
  4. ابق على اطلاع بالتغييرات في سياسة إضافات Chrome.

تعد صيانة الامتداد وتحديثه أمرًا بالغ الأهمية لنجاحه على المدى الطويل ورضا المستخدم.

كيفية تجنب الأخطاء المزعجة في ملحق Chrome

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

سيساعد اتباع أفضل الممارسات هذه على ضمان أن يكون ملحقك آمنًا وفعالًا وسهل الاستخدام.

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

بيان الافراج تم إعادة إنتاج هذه المقالة على: https://dev.to/seths10/from-zero-to-chrome-hero-how-to-build-and-launch-your-own-browser-extension-5ba8?1إذا كان هناك أي التعدي، يرجى الاتصال بـ [email protected] للحذف
أحدث البرنامج التعليمي أكثر>

تنصل: جميع الموارد المقدمة هي جزئيًا من الإنترنت. إذا كان هناك أي انتهاك لحقوق الطبع والنشر الخاصة بك أو الحقوق والمصالح الأخرى، فيرجى توضيح الأسباب التفصيلية وتقديم دليل على حقوق الطبع والنشر أو الحقوق والمصالح ثم إرسالها إلى البريد الإلكتروني: [email protected]. سوف نتعامل مع الأمر لك في أقرب وقت ممكن.

Copyright© 2022 湘ICP备2022001581号-3