تطوير إضافات المتصفح: التنقل في Manifest V3 وواجهات برمجة تطبيقات JavaScript

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

فهم إضافات المتصفح

إضافة المتصفح هي برنامج صغير يوسع وظائف متصفح الويب. يمكن للإضافات تعديل صفحات الويب وإضافة ميزات جديدة والتكامل مع الخدمات الخارجية. عادة ما تتم كتابتها بلغات JavaScript و HTML و CSS، ويتم تجميعها كملف ZIP مع ملف بيان يصف بيانات تعريف الإضافة والأذونات.

تشمل حالات الاستخدام الشائعة لإضافات المتصفح ما يلي:

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

Manifest V3: المعيار الجديد

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

• عمال الخدمة: استبدال صفحات الخلفية بعمال الخدمة لتحسين الأداء وتقليل استهلاك الذاكرة. عمال الخدمة عبارة عن نصوص برمجية تعتمد على الأحداث تعمل في الخلفية وتتعامل مع أحداث مثل طلبات الشبكة والتنبيهات.
• واجهة برمجة تطبيقات طلبات الشبكة الإعلانية: استبدال واجهة برمجة تطبيقات webRequest التي تمنع الإدخال بواجهة برمجة تطبيقات طلبات الشبكة الإعلانية لتصفية طلبات الشبكة. يؤدي هذا إلى تحسين الخصوصية والأمان عن طريق الحد من وصول الإضافة إلى حركة مرور الشبكة.
• نهج أمان المحتوى (CSP): فرض سياسات CSP أكثر صرامة لمنع تنفيذ التعليمات البرمجية التعسفية والتخفيف من المخاطر الأمنية.
• إصدار البيان: يجب تعيين مفتاح manifest_version في ملف manifest.json على 3.

الترحيل من Manifest V2 إلى Manifest V3

يتطلب الترحيل من Manifest V2 إلى Manifest V3 تخطيطًا دقيقًا وتعديلات على التعليمات البرمجية. إليك دليلًا إرشاديًا خطوة بخطوة:

1. تحديث ملف البيان: اضبط manifest_version على 3 وقم بتحديث حقلي permissions و background للامتثال لمتطلبات Manifest V3.
2. استبدال صفحات الخلفية بعمال الخدمة: أعد كتابة نصوص الخلفية كعمال خدمة، وتعامل مع الأحداث باستخدام واجهات برمجة تطبيقات chrome.scripting و chrome.alarms.
3. الترحيل إلى واجهة برمجة تطبيقات طلبات الشبكة الإعلانية: استبدل استدعاءات واجهة برمجة تطبيقات webRequest التي تمنع الإدخال بقواعد إعلانية معرفة في واجهة برمجة تطبيقات declarativeNetRequest.
4. تحديث نهج أمان المحتوى: اضبط حقل content_security_policy في ملف البيان للامتثال لمتطلبات CSP الأكثر صرامة.
5. الاختبار الشامل: اختبر الإضافة على نطاق واسع في متصفحات مختلفة لضمان التوافق والوظائف المناسبة.

مثال: ترحيل برنامج نصي للخلفية إلى عامل خدمة

Manifest V2 (background.js):

            chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    return {cancel: true};
  },
  {urls: ["*.example.com/*"]},
  ["blocking"]
);

            

              
                Copy
              
            
          

Manifest V3 (service-worker.js):

            chrome.declarativeNetRequest.updateDynamicRules({
  removeRuleIds: [1],
  addRules: [{
    "id": 1,
    "priority": 1,
    "action": { "type": "block" },
    "condition": { "urlFilter": "*.example.com/*", "resourceTypes": ["main_frame", "sub_frame", "stylesheet", "script", "image", "object", "xmlhttprequest", "other"] }
  }]
});

            

              
                Copy
              
            
          

manifest.json (Manifest V3):

            {
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "A simple extension",
  "permissions": [
    "declarativeNetRequest",
    "declarativeNetRequestFeedback",
    "storage"
  ],
  "background": {
    "service_worker": "service-worker.js"
  },
  "declarative_net_request": {
    "rule_resources": [{
      "id": "ruleset_1",
      "enabled": true,
      "path": "rules.json"
    }]
  }
}

            

              
                Copy
              
            
          

واجهات برمجة تطبيقات JavaScript الأساسية لإضافات المتصفح

تعتمد إضافات المتصفح على مجموعة من واجهات برمجة تطبيقات JavaScript للتفاعل مع المتصفح وصفحات الويب. فيما يلي بعض أهم واجهات برمجة التطبيقات:

1. chrome.runtime

توفر واجهة برمجة تطبيقات chrome.runtime الوصول إلى بيئة تشغيل الإضافة. فهي تسمح للإضافات بالتواصل مع البرنامج النصي للخلفية والوصول إلى ملف البيان وإدارة دورة حياة الإضافة.

الأساليب الرئيسية:

• chrome.runtime.sendMessage(): يرسل رسالة إلى البرنامج النصي للخلفية أو الإضافات الأخرى.
• chrome.runtime.onMessage.addListener(): يستمع إلى الرسائل من البرامج النصية الأخرى.
• chrome.runtime.getManifest(): يُرجع ملف بيان الإضافة ككائن JavaScript.
• chrome.runtime.reload(): يعيد تحميل الإضافة.

مثال: إرسال رسالة من البرنامج النصي للمحتوى إلى البرنامج النصي للخلفية

البرنامج النصي للمحتوى (content.js):

            chrome.runtime.sendMessage({message: "Hello from content script!"}, function(response) {
  console.log("Response from background script: ", response.message);
});

            

              
                Copy
              
            
          

البرنامج النصي للخلفية (service-worker.js):

            chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log("Message from content script: ", request.message);
    sendResponse({message: "Hello from background script!"});
  }
);

            

              
                Copy
              
            
          

2. chrome.storage

توفر واجهة برمجة تطبيقات chrome.storage آلية لتخزين واسترجاع البيانات داخل الإضافة. وهي توفر خيارات تخزين محلية ومتزامنة.

الأساليب الرئيسية:

• chrome.storage.local.set(): يخزن البيانات محليًا.
• chrome.storage.local.get(): يسترجع البيانات من التخزين المحلي.
• chrome.storage.sync.set(): يخزن البيانات التي تتم مزامنتها عبر أجهزة المستخدم.
• chrome.storage.sync.get(): يسترجع البيانات من التخزين المتزامن.

مثال: تخزين واسترجاع البيانات في التخزين المحلي

            // Store data
chrome.storage.local.set({key: "value"}, function() {
  console.log("Value is set to " + "value");
});

// Retrieve data
chrome.storage.local.get(["key"], function(result) {
  console.log("Value currently is " + result.key);
});

            

              
                Copy
              
            
          

3. chrome.tabs

تسمح واجهة برمجة تطبيقات chrome.tabs للإضافات بالتفاعل مع علامات تبويب المتصفح. توفر أساليب لإنشاء علامات تبويب والاستعلام عنها وتعديلها وإغلاقها.

الأساليب الرئيسية:

• chrome.tabs.create(): ينشئ علامة تبويب جديدة.
• chrome.tabs.query(): يستعلم عن علامات التبويب التي تتطابق مع معايير معينة.
• chrome.tabs.update(): يقوم بتحديث خصائص علامة تبويب.
• chrome.tabs.remove(): يغلق علامة تبويب.
• chrome.tabs.executeScript(): ينفذ كود JavaScript في علامة تبويب.

مثال: إنشاء علامة تبويب جديدة

            chrome.tabs.create({url: "https://www.example.com"}, function(tab) {
  console.log("New tab created with ID: " + tab.id);
});

            

              
                Copy
              
            
          

4. chrome.alarms

تسمح واجهة برمجة تطبيقات chrome.alarms للإضافات بجدولة المهام ليتم تنفيذها في وقت معين أو بعد فاصل زمني محدد. هذا مهم بشكل خاص في Manifest V3 لأنه يحل محل استخدام المؤقتات داخل صفحات الخلفية، والتي لم تعد مدعومة.

الأساليب الرئيسية:

• chrome.alarms.create(): ينشئ منبهًا جديدًا.
• chrome.alarms.get(): يسترجع منبهًا موجودًا.
• chrome.alarms.clear(): يمسح المنبه.
• chrome.alarms.getAll(): يسترجع جميع التنبيهات.
• chrome.alarms.onAlarm.addListener(): يستمع إلى أحداث التنبيه.

مثال: إنشاء تنبيه

            chrome.alarms.create("myAlarm", {delayInMinutes: 1, periodInMinutes: 1});

chrome.alarms.onAlarm.addListener(function(alarm) {
  if (alarm.name === "myAlarm") {
    console.log("Alarm triggered!");
  }
});

            

              
                Copy
              
            
          

5. chrome.scripting

تسمح واجهة برمجة تطبيقات chrome.scripting للإضافات بحقن JavaScript و CSS في صفحات الويب. تعد واجهة برمجة التطبيقات هذه مكونًا رئيسيًا في Manifest V3 ويستخدمها عمال الخدمة للتفاعل مع صفحات الويب بعد تحميلها.

الأساليب الرئيسية:

• chrome.scripting.executeScript(): ينفذ كود JavaScript في علامة تبويب أو إطار.
• chrome.scripting.insertCSS(): يدرج CSS في علامة تبويب أو إطار.

مثال: حقن JavaScript في علامة تبويب

            chrome.scripting.executeScript({
  target: {tabId: tabId},
  function: function() {
    console.log("Injected script!");
    document.body.style.backgroundColor = 'red';
  }
});

            

              
                Copy
              
            
          

6. chrome.notifications

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

الأساليب الرئيسية:

• chrome.notifications.create(): ينشئ إشعارًا جديدًا.
• chrome.notifications.update(): يقوم بتحديث إشعار موجود.
• chrome.notifications.clear(): يمسح إشعارًا.
• chrome.notifications.getAll(): يسترجع جميع الإشعارات.

مثال: إنشاء إشعار

            chrome.notifications.create('myNotification', {
  type: 'basic',
  iconUrl: 'icon.png',
  title: 'My Extension',
  message: 'Hello from my extension!'
}, function(notificationId) {
  console.log('Notification created with ID: ' + notificationId);
});

            

              
                Copy
              
            
          

7. chrome.contextMenus

تسمح واجهة برمجة تطبيقات chrome.contextMenus للإضافات بإضافة عناصر إلى قائمة سياق المتصفح (قائمة النقر بزر الماوس الأيمن). يوفر هذا طريقة ملائمة للمستخدمين للوصول إلى وظائف الإضافة مباشرة من صفحات الويب.

الأساليب الرئيسية:

• chrome.contextMenus.create(): ينشئ عنصر قائمة سياق جديدًا.
• chrome.contextMenus.update(): يقوم بتحديث عنصر قائمة سياق موجود.
• chrome.contextMenus.remove(): يزيل عنصر قائمة سياق.
• chrome.contextMenus.removeAll(): يزيل جميع عناصر قائمة السياق التي تم إنشاؤها بواسطة الإضافة.

مثال: إنشاء عنصر قائمة سياق

            chrome.contextMenus.create({
  id: "myContextMenuItem",
  title: "My Context Menu Item",
  contexts: ["page", "selection"]
}, function() {
  console.log("Context menu item created.");
});

chrome.contextMenus.onClicked.addListener(function(info, tab) {
  if (info.menuItemId === "myContextMenuItem") {
    console.log("Context menu item clicked!");
    alert("You clicked the context menu item!");
  }
});

            

              
                Copy
              
            
          

8. chrome.i18n

تُستخدم واجهة برمجة تطبيقات chrome.i18n لتوطين الإضافة، مما يجعلها في متناول المستخدمين بلغات ومناطق مختلفة. فهي تمكنك من توفير إصدارات محلية لواجهة مستخدم الإضافة والرسائل.

الأساليب الرئيسية:

• chrome.i18n.getMessage(): يسترجع سلسلة مترجمة من دليل _locales الخاص بالإضافة.

مثال: استخدام chrome.i18n للتوطين

أولاً، قم بإنشاء دليل _locales في المجلد الجذر للإضافة. في الداخل، قم بإنشاء مجلدات خاصة باللغة مثل en و es و fr وما إلى ذلك.

داخل كل مجلد لغة، قم بإنشاء ملف messages.json. على سبيل المثال، في _locales/en/messages.json:

            {
  "extensionName": {
    "message": "My Extension",
    "description": "The name of the extension."
  },
  "greetingMessage": {
    "message": "Hello, world!",
    "description": "A simple greeting message."
  }
}

            

              
                Copy
              
            
          

ثم، في كود JavaScript الخاص بك:

            let extensionName = chrome.i18n.getMessage("extensionName");
let greeting = chrome.i18n.getMessage("greetingMessage");
console.log(extensionName); // Output: My Extension
console.log(greeting);      // Output: Hello, world!

            

              
                Copy
              
            
          

التوافق عبر المتصفحات

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

لضمان التوافق عبر المتصفحات:

• استخدم واجهة برمجة تطبيقات WebExtensions: واجهة برمجة تطبيقات WebExtensions هي واجهة برمجة تطبيقات موحدة لتطوير إضافات المتصفح مدعومة بواسطة متصفحات متعددة.
• اختبر في متصفحات مختلفة: اختبر الإضافة الخاصة بك في متصفحات مختلفة لتحديد مشكلات التوافق وإصلاحها.
• استخدم polyfills: استخدم polyfills لتوفير وظائف واجهة برمجة التطبيقات المفقودة في متصفحات مختلفة.
• كود شرطي: استخدم كودًا شرطيًا للتكيف مع الاختلافات الخاصة بالمتصفح. على سبيل المثال: if (typeof browser === "undefined") { var browser = chrome; }

أفضل الممارسات لتطوير إضافات المتصفح

فيما يلي بعض أفضل الممارسات التي يجب اتباعها عند تطوير إضافات المتصفح:

• تقليل الأذونات: اطلب فقط الأذونات التي تحتاج إليها الإضافة الخاصة بك على الإطلاق. هذا يعزز خصوصية المستخدم وأمانه.
• استخدم ممارسات الترميز الآمنة: اتبع ممارسات الترميز الآمنة لمنع نقاط الضعف مثل البرمجة النصية عبر المواقع (XSS) وحقن التعليمات البرمجية.
• تحسين الأداء: قم بتحسين أداء الإضافة لتقليل تأثيرها على أداء المتصفح.
• توفير وثائق واضحة وموجزة: قدم وثائق واضحة وموجزة لمساعدة المستخدمين على فهم كيفية استخدام الإضافة الخاصة بك.
• التعامل مع الأخطاء بشكل سليم: قم بتطبيق معالجة الأخطاء لمنع تعطل الإضافة أو التسبب في سلوك غير متوقع.
• إبقاء الإضافة محدثة: قم بتحديث الإضافة بانتظام لمعالجة الأخطاء ونقاط الضعف الأمنية ومشكلات التوافق.
• ضع في اعتبارك التدويل (i18n): صمم الإضافة الخاصة بك بحيث يمكن ترجمتها بسهولة إلى لغات مختلفة. استخدم واجهة برمجة تطبيقات chrome.i18n.
• احترم خصوصية المستخدم: كن شفافًا بشأن كيفية جمع الإضافة الخاصة بك لبيانات المستخدم واستخدامها، واحصل على موافقة المستخدم عند الضرورة. الالتزام بلوائح الخصوصية ذات الصلة مثل GDPR و CCPA.

إرسال الإضافة الخاصة بك إلى المتاجر

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

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

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

الخلاصة

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

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

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