debugging-with-ChromeDevTools

Основы отладки простых расширений с помощью Chrome DevTools

Даже самые простые расширения могут содержать ошибки. Chrome DevTools – ваш лучший друг для поиска и исправления этих ошибок. В Модуле 5 мы подробно рассмотрим DevTools, но для начала давайте освоим базовые приемы отладки для простых расширений.

Основные инструменты DevTools для отладки:

Как открыть DevTools для расширения:

Простой пример отладки:

Предположим, у вас есть расширение, которое должно менять цвет фона страницы, но оно не работает.

Код popup.js (с ошибкой):

document.addEventListener('DOMContentLoaded', function() {
  const changeColorBtn = document.getElementById('changeColorBtn');
  changeColorBtn.addEventListener('click', function() {
    chrome.scripting.executeScript({
      function: changeBackgroundColor
    });
  });
});

function changeBackgroundColor() {
  const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
  document.body.style.backgroudColor = randomColor; // Ошибка: опечатка в "backgroundColor"
}

Шаги отладки:

  1. Загрузите расширение в Chrome.
  2. Откройте DevTools для всплывающего окна.
  3. Нажмите на иконку расширения и кнопку "Сменить цвет фона".
  4. Перейдите на вкладку Console. Вы должны увидеть сообщение об ошибке, например: "Uncaught TypeError: Cannot set property 'backgroudColor' of undefined".
  5. Ошибка указывает на проблему в функции changeBackgroundColor и свойстве backgroudColor.
  6. Перейдите на вкладку Sources и откройте файл popup.js.
  7. Просмотрите код функции changeBackgroundColor. Вы заметите опечатку: document.body.style.backgroudColor вместо document.body.style.backgroundColor.
  8. Исправьте опечатку в коде.
  9. Перезагрузите расширение на странице chrome://extensions/.
  10. Повторите шаги 3 и 4. Ошибка должна исчезнуть, и цвет фона страницы должен меняться.

Практическое задание:

  1. Скопируйте код popup.js с ошибкой (опечаткой в backgroundColor) в расширение "Смена фона" из Модуля 2.
  2. Отладьте расширение, используя Chrome DevTools и вкладку Console, чтобы найти и исправить ошибку.
  3. Добавьте console.log() в разные места кода popup.js (например, в начале функции changeBackgroundColor, после генерации randomColor) и посмотрите, как эти сообщения отображаются в Console.
  4. Установите точку останова на строке document.body.style.backgroudColor = randomColor; в Sources и пошагово выполните код, чтобы увидеть значения переменных.

5. Поиск и использование бесплатных иконок и ресурсов для расширений.

Визуальное оформление расширения играет важную роль. Качественные иконки делают расширение более привлекательным и профессиональным. К счастью, существует множество ресурсов, где можно найти бесплатные иконки и другие графические элементы для ваших расширений.

Ресурсы для поиска бесплатных иконок:

Советы по выбору иконок:

Как использовать иконки в расширении:

  1. Скачайте иконки: Найдите подходящие иконки на одном из ресурсов, скачайте их в формате PNG и нужных размерах.
  2. Создайте папку images: В папке вашего расширения создайте папку с названием images.
  3. Поместите иконки в папку images: Скопируйте скачанные иконки в папку images и переименуйте их в соответствии с размерами (например, icon16.png, icon48.png, icon128.png).
  4. Укажите пути к иконкам в manifest.json: В секциях "action" (default_icon) и "icons" файла manifest.json укажите пути к вашим иконкам относительно папки images. (Примеры уже были в теме 1).

Другие бесплатные ресурсы:

Практическое задание:

  1. Найдите набор бесплатных иконок для расширения "Привет, мир!" на Flaticon или Iconfinder.
  2. Скачайте иконки разных размеров (16x16, 48x48, 128x128) в формате PNG.
  3. Создайте папку images в папке расширения и поместите туда иконки.
  4. Обновите manifest.json расширения "Привет, мир!", указав пути к новым иконкам в секциях "action" и "icons".
  5. Обновите расширение в Chrome и проверьте, что иконка расширения изменилась.