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

يمكن للإضافات الاستفادة من مزايا تصحيح الأخطاء نفسها التي توفّرها أدوات مطوّري البرامج في 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، ولكن اسم السمة يتطلّب استخدام حرف "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 + '";'});

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

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

تتبُّع طلبات الشبكة

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

تضمين الأذونات في نماذج البيان

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

  {
    "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" من خلال قراءة المستندات.