يمكن للإضافات الاستفادة من مزايا تصحيح الأخطاء نفسها التي توفّرها أدوات مطوري البرامج في 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 + '";'});
علامات تبويب الإضافات
يمكن العثور على سجلات صفحات الإضافات المعروضة ضمن علامة تبويب، مثل تجاوز الصفحات وخيارات ملء الصفحة، في وحدة تحكّم صفحة الويب وعلى صفحة إدارة الإضافات.
مراقبة طلبات الشبكة
غالبًا ما تُجري النافذة المنبثقة جميع طلبات الشبكة المطلوبة حتى قبل أن يتمكّن أسرع المطوّرين من فتح "أدوات مطوري البرامج". لعرض هذه الطلبات، يُرجى إعادة تحميل الصفحة من داخل لوحة الشبكة. ستعيد تحميل النافذة المنبثقة بدون إغلاق لوحة DevTools (أدوات مطوري البرامج).
الإفصاح عن الأذونات
على الرغم من إمكانات الإضافات نفسها كصفحات الويب، فهي غالبًا ما تحتاج إلى إذن لاستخدام ميزات معيّنة، مثل ملفات تعريف الارتباط ومساحة التخزين وXMLHttpRequsts متعدد المصادر. يُرجى الرجوع إلى مقالة الأذونات وواجهات برمجة تطبيقات 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 من خلال قراءة المستندات.