كيفية تنفيذ ملحق كروم

كلنا نحب تصفح الويب. ونحب جميعًا أن تكون الأشياء في متناول يدنا. لماذا لا تخلق شيئًا يلبي هاتين الحقيقة المطلقة؟

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

لماذا كروم؟

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

⚠️ لتتمكن من نشر امتداد Chrome ، يجب أن يكون لديك حساب مطور يستلزم 5 دولارات كرسوم تسجيل لمرة واحدة

يجب أن يكون كل ملحق كروم هذه المكونات: و اضح ملف ، popup.html و popup.js و الخلفية النصي. دعنا نلقي نظرة عليهم

ما الذي يصنع امتداد Chrome؟

ملف البيان

ما هو ملف البيان؟ إنه ملف نصي بتنسيق JSON (JavaScript Object Notation) يحتوي على تفاصيل معينة حول الامتداد الذي ستقوم بتطويره.

تستخدم Google هذا الملف للحصول على تفاصيل حول امتدادك عند نشره. وهناك حاجة ، أوصى و الاختيارية المجالات.

مطلوب

{ "manifest_version": 2, "name": "My Chrome Extension", "version": "1.0", "default_locale": "en" }
  • manifest_version- إصدار تنسيق ملف البيان. اعتبارًا من Chrome 18 ، تم إيقاف الإصدار 1
  • name- يمكن أن يصل طوله إلى 45 حرفًا. يُستخدم لعرض اسم الملحق الخاص بك في الأماكن التالية: مربع حوار التثبيت ، واجهة مستخدم إدارة الامتدادات ، سوق Chrome الإلكتروني
  • version- إصدار ملحق كروم الخاص بك. يمكن أن تصل إلى أربعة أرقام مفصولة بنقاط (على سبيل المثال ، 1.0.0.0)
  • default_locale- يتواجد هذا المجلد داخل _localsالمجلد ويحتوي على السلسلة الحرفية الافتراضية. و _localsيستخدم مجلد لتدويل (السماح تمديد لدعم لغات متعددة). إنه حقل مطلوب في حالة وجود _localsمجلد ، وإلا فلن يكون موجودًا

إذا كنت تريد دعم لغات متعددة ، فاقرأ المزيد هنا.

موصى به

 "description": "A plain text description", "author": "Your Name Here", "short_name": "shortName", "icons": { "128":"icon128.png", "48":"icon48.png", "16":"icon16.png" },
  • description - يمكنك استخدام ما يصل إلى 132 حرفًا لوصف الامتداد
  • short_name - يقتصر على 12 حرفًا ، ويتم استخدامه في الحالات التي لا توجد فيها مساحة كافية لعرض الاسم الكامل للملحق (App Launcher و New Tab Page)
  • icons- الرموز التي تمثل الامتداد. قم دائمًا بتضمين رمز 128X128 لأنه يتم استخدامه بواسطة سوق Chrome الإلكتروني وأثناء تثبيت الملحق الخاص بك

الحقول الاختيارية خاصة بحالة معينة ، لذلك لن نتطرق إليها في هذه المقالة.

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

النافذة المنبثقة والخلفية

تشير النافذة المنبثقة إلى الصفحة الرئيسية التي يراها المستخدمون عند استخدام امتدادك. يتكون من ملفين: Popup.html وملف JavaScript ، Popup.js .

Popup.html هو ملف التخطيط الخاص بالشكل الذي ستبدو عليه إضافتك. بناءً على ما سيفعله الامتداد الخاص بك ، سيتغير ترميز هذا الملف.

النص البرمجي في الخلفية هو البرنامج الوحيد الذي يمكنه التفاعل مع الأحداث التي تحدث ويستخدم Chrome API. لاستخدام النصوص البرمجية في الخلفية ، يجب إضافة ما يلي إلى ملف manifest.json الخاص بك:

{ "manifest_version": 2, "name": "My Chrome Extension", "version": "1.0", "background":{ "scripts": ["yourScript.js"], "persistent": false } }

المفتاح scriptsله قيمة مصفوفة من أسماء البرامج النصية.

persistentهو مفتاح ذو قيمة منطقية تشير إلى استخدام امتدادك مع واجهة برمجة تطبيقات chrome.webRequest لحظر طلبات الشبكة أو تعديلها. لا تعمل واجهة برمجة تطبيقات Chrome.webRequest مع صفحات الخلفية غير الدائمة.

كيف سيتم فتح الامتداد الخاص بك

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

  1. يمكنه تجاوز علامة تبويب جديدة ، حتى لا يعطل نشاط المستخدم الحالي

2. يمكنك فتح نافذة صغيرة في علامة التبويب الحالية للمستخدم ، وذلك لإبقاء المستخدم في نفس علامة التبويب

كل خيار له عواقبه والأمر متروك لك لتقرر ما هو الخيار الأفضل لك.

يوجد أدناه الرمز المطلوب لسحب كل خيار من الخيارات. سيستخدم كلاهما نفس ملف popup.html الموضح أدناه:

  Chrome Extension Example   

Hello From Extension

ضع كل شيء معا

تجاوز علامة تبويب جديدة

//In manifest.json { "name": "ChromeExampleNewTab", "version": "1.0", "manifest_version": 2, "chrome_url_overrides": { "newtab": "popup.html" }, "browser_action": {}, "permissions":[ "tabs" ], "background":{ "scripts": ["background.js"], "persistent": false } } //In background.js chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.create({'url': chrome.extension.getURL('popup.html')}, function(tab) { // Tab opened. }); });

افتح في علامة التبويب الحالية

//In manifest.js { "name": "ChromeExample", "version": "1.0", "manifest_version": 2, "browser_action": { "default_popup": "popup.html" } }

لاحظ كيف تجاوزنا browser_actionالمفتاح في كلا المثالين.

علينا القيام بذلك ، لأننا لا نريد أن يفتح المتصفح علامة تبويب جديدة بالطريقة المعتادة.

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

هناك الكثير من ملحقات Chrome (الرسائل وقوائم السياق والتخزين على سبيل المثال لا الحصر). آمل أن أكون قد قدمت لك بعض الأفكار حول ملحقات Chrome. ربما يكفي فقط لإثارة اهتمامك لجعل واحدة خاصة بك!

وأثناء وجودك فيه ، تحقق من واحدة صنعتها هنا.