Расширения могут использовать те же преимущества отладки, что и инструменты разработчика Chrome для веб-страниц, но они обладают уникальными свойствами. Чтобы стать мастером отладки расширений, необходимо понимать эти свойства, как компоненты расширений взаимодействуют друг с другом и где искать ошибки. Это руководство даст разработчикам базовое понимание отладки расширений.
Locate the logs
Расширения состоят из множества различных компонентов, и каждый из этих компонентов выполняет свою индивидуальную функцию. Загрузите неисправное расширение здесь , чтобы начать поиск журналов ошибок для различных компонентов расширения.
Фоновый скрипт
Перейдите на страницу управления расширениями Chrome по адресу chrome://extensions и убедитесь, что режим разработчика включен. Нажмите кнопку «Загрузить распакованное расширение» и выберите каталог поврежденного расширения. После загрузки расширения у него должны появиться три кнопки: «Подробности» , «Удалить» и «Ошибки» (выделены красным).
Нажмите кнопку «Ошибки» , чтобы просмотреть журнал ошибок. Система расширений обнаружила проблему в фоновом скрипте.
Uncaught TypeError: Cannot read property 'addListener' of undefined
Кроме того, панель инструментов разработчика Chrome можно открыть для фонового скрипта, выбрав синюю ссылку рядом с пунктом «Проверить элементы интерфейса» .
Return to the code.
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 не определена. Расширение, вероятно, неправильно передает эту переменную. Исправьте внедряемый скрипт, чтобы передавать переменную color в код.
{code: 'document.body.style.backgroundColor = "' + color + '";'});
Вкладки расширений
Журналы для страниц расширений, отображаемых в виде вкладок, таких как страницы переопределения и параметры полной страницы , можно найти в консоли веб-страницы и на странице управления расширениями.
Monitor network requests
Всплывающее окно часто выполняет все необходимые сетевые запросы еще до того, как даже самые быстрые разработчики смогут открыть инструменты разработчика. Чтобы просмотреть эти запросы, обновите страницу в панели «Сеть». Это перезагрузит всплывающее окно, не закрывая панель инструментов разработчика.
Объявить права доступа
Хотя расширения обладают схожими возможностями с веб-страницами, им часто требуется разрешение на использование определенных функций, таких как файлы cookie , хранилище и междоменные XMLHttpRequest . Обратитесь к статье о разрешениях и доступным API 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 Devtools , прочитав документацию.