تصحيح أخطاء الإضافات

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

تحديد موقع السجلات

تتألف الإضافات من العديد من المكوّنات المختلفة، ولكل مكوّن منها واجبات محددة. يمكنك تنزيل إضافة متعطّلة هنا لبدء تحديد موقع سجلات الأخطاء لمختلف مكونات الإضافة.

نص برمجي في الخلفية

انتقِل إلى صفحة إدارة إضافات Chrome على الرابط chrome://extensions وتأكَّد من تفعيل وضع المطوِّر. انقر على الزر تحميل الملف غير المُجمَّع واختَر دليل الإضافة الذي يتضمّن أخطاء. بعد تحميل الإضافة، من المفترض أن تتضمّن ثلاثة أزرار: التفاصيل وإزالة والأخطاء بخطٍ أحمر.

انقر على الزر الأخطاء لعرض سجلّ الأخطاء. رصد نظام الإضافات مشكلة في النص البرمجي الذي يعمل في الخلفية.

Uncaught TypeError: Cannot read property 'addListener' of undefined

بالإضافة إلى ذلك، يمكن فتح لوحة "أدوات مطوّري البرامج في Chrome" للنص البرمجي في الخلفية من خلال النقر على الرابط الأزرق بجانب فحص طرق العرض.

ارجع إلى الرمز.

chrome.runtime.oninstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log('The color is green.');
  });
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostEquals: 'developer.chrome.com'},
      })],
      actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });
});

يحاول النص البرمجي الذي يعمل في الخلفية الاستماع إلى الحدث onInstalled، ولكن تتطلّب الخاصية name استخدام الحرف "I" باللغة الإنجليزية بأحرف كبيرة. عدِّل الرمز البرمجي ليعكس الطلب الصحيح، ثم انقر على الزر محو الكل في أعلى يسار الصفحة، ثم أعِد تحميل الإضافة.

نافذة منبثقة

بعد أن يتمّ إعداد الإضافة بشكلٍ صحيح، يمكن اختبار المكوّنات الأخرى. أعِد تحميل هذه الصفحة، أو افتح علامة تبويب جديدة وانتقِل إلى أي صفحة على developer.chrome.com، وافتح النافذة المنبثقة وانقر على مربع التصويت الأخضر. ولا يحدث أي شيء.

انتقِل مرة أخرى إلى صفحة "إدارة الإضافات"، سيظهر الزر الأخطاء مرة أخرى. انقر عليه لاطلاع على السجلّ الجديد.

Uncaught ReferenceError: tabs is not defined

يمكن أيضًا الاطّلاع على أخطاء النوافذ المنبثقة من خلال فحص النافذة المنبثقة.

يشير الخطأ tabs is undefined إلى أنّ الإضافة لا تعرف مكان إدراج النص البرمجي للمحتوى. يمكن تصحيح ذلك من خلال استدعاء طريقة tabs.query()، ثم اختيار علامة التبويب النشطة.

  let changeColor = document.getElementById('changeColor');

  chrome.storage.sync.get('color', function(data) {
    changeColor.style.backgroundColor = data.color;
    changeColor.setAttribute('value', data.color);
  });

  changeColor.onclick = function(element) {
    let color = element.target.value;
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.executeScript(
          tabs[0].id,
          {code: 'document.body.style.backgroundColor = color;'});
    });
  };

عدِّل الرمز، ثم انقر على الزر محو الكل في أعلى يسار الصفحة، ثم أعِد تحميل الإضافة.

نص برمجي للمحتوى

أعِد تحميل الصفحة، وافتح النافذة المنبثقة وانقر على المربّع الأخضر. لا، لم يتم تغيير ألوان الخلفية. انتقِل مرة أخرى إلى صفحة "إدارة الإضافات"، ولن يظهر زر الأخطاء. يُرجى العِلم أنّ البرنامج النصي للمحتوى هو السبب المحتمَل في حدوث المشكلة، ويتم تشغيله داخل صفحة الويب.

افتح لوحة أدوات المطوّرين في صفحة الويب التي تحاول الإضافة تغييرها.

لن يتم تسجيل سوى أخطاء وقت التشغيل وconsole.warning وconsole.error في صفحة إدارة الإضافات.

لاستخدام أدوات المطوّر من داخل نص المحتوى، انقر على سهم القائمة المنسدلة بجانب أعلى واختَر الإضافة.

يشير الخطأ إلى أنّه لم يتم تحديد color. يجب ألا تُرسل الإضافة المتغيّر بشكل صحيح. صحِّح النص البرمجي المُحقَّق لإدخال متغيّر اللون في الرمز.

  {code: 'document.body.style.backgroundColor = "' + color + '";'});

علامات التبويب الإضافية

يمكن العثور على سجلّات صفحات الإضافات المعروضة في علامة تبويب، مثل صفحات إلغاء الإعدادات وخيارات الصفحة الكاملة، في وحدة تحكّم صفحة الويب وعلى صفحة إدارة الإضافات.

مراقبة طلبات الشبكة

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

الإفصاح عن الأذونات

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

  {
    "name": "Broken Background Color",
    "version": "1.0",
    "description": "Fix an Extension!",
    "permissions": [
      "activeTab",
      "declarativeContent",
      "storage"
    ],
    "options_page": "options.html",
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
    "page_action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "images/get_started16.png",
        "32": "images/get_started32.png",
        "48": "images/get_started48.png",
        "128": "images/get_started128.png"
      }
    },
    "icons": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    },
    "manifest_version": 2
  }

الخطوات التالية

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