Обновление расширения Chrome с Manifest V2 до Manifest V3 — важнейший шаг для разработчиков, поскольку Google прекратил поддержку Manifest V2. В этой статье мы рассмотрим процесс обновления расширения Pomodoro Timer, изначально созданного с помощью Manifest V2, до нового стандарта Manifest V3.

Моя история

У меня было расширение Pomodoro Timer, которое я сделал бесплатно 4 года назад, и получил уведомление от Google о том, что мне нужно обновить Manifest.

Первоначальную версию моего таймера Помидора я разработал сам, с ревом тиранозавра в качестве уведомления об окончании цикла ?. Это было необычно и весело, я даже был удивлен, увидев, что им воспользовались 24 человека.

Вот как это выглядело:

Моя жена недавно начала изучать дизайн, и, поскольку мне нужно обновить Manifest, я попросил ее освежить дизайн. Результат в конце статьи. Спойлер: Думаю, получилось здорово.

Зачем выполнять обновление до Manifest V3?

В манифесте V3 представлено несколько ключевых изменений, направленных на повышение конфиденциальности, безопасности и производительности расширений Chrome. Эти изменения включают в себя:

• Сервис-воркеры: Фоновые страницы заменяются сервис-воркерами, которые более эффективны, поскольку не работают непрерывно.
• Повышенная безопасность: Уменьшенные области разрешений и введение API-интерфейса declarativeNetRequest для управления сетевыми запросами.
• Улучшенная производительность: За счет оптимизации взаимодействия расширений с ресурсами браузера V3 обеспечивает лучшее управление ресурсами.

Шаг 1. Понимание основных различий

Прежде чем погрузиться в обновление, важно понять ключевые изменения между Manifest V2 и V3:

1. Фоновые сценарии: В V2 фоновые сценарии выполнялись непрерывно. В V3 они заменены сервисными работниками, которые запускаются только при необходимости.
2. Разрешения: Манифест V3 требует явного объявления всех разрешений, а некоторые разрешения устарели или заменены.
3. Изменения API: Некоторые API были удалены или заменены, а также обновлена ​​система обмена сообщениями между различными компонентами расширения.

Шаг 2. Обновление файла манифеста

Вот как можно обновить файл Manifest.json с версии V2 на версию V3 для расширения таймера Pomodoro:

Пример исходного манифеста версии 2:

{
  "name": "Pomodoro Clock",
  "version": "1.1.0",
  "description": "Simple background timer for productivity",
  "manifest_version": 2,
  "permissions": ["storage"],
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "img/tomato16.png",
      "32": "img/tomato32.png",
      "48": "img/tomato48.png",
      "128": "img/tomato128.png"
    }
  },
  "icons": {
    "16": "img/tomato16.png",
    "32": "img/tomato32.png",
    "48": "img/tomato48.png",
    "128": "img/tomato128.png"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "options_page": "options.html"
}

Пример обновленного манифеста версии 3:

{
  "name": "Pomodoro Timer & Focus Clock",
  "version": "2.0.1",
  "description": "Boost productivity with this simple Pomodoro timer. Focus on tasks, minimize distractions, and manage your time effectively.",
  "manifest_version": 3,
  "permissions": ["storage","notifications","alarms"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "img/tomato16.png",
      "32": "img/tomato32.png",
      "48": "img/tomato48.png",
      "128": "img/tomato128.png"
    }
  },
  "icons": {
    "16": "img/tomato16.png",
    "32": "img/tomato32.png",
    "48": "img/tomato48.png",
    "128": "img/tomato128.png"
  },
  "background": {
    "service_worker": "background.js"
  }
}

Основные изменения в манифесте:

Фоновый сценарий:

• V2: "background": {"scripts": ["background.js"]}
• V3: "background": {"service_worker": "background.js"}

В V3 фоновые сценарии заменены сервисными работниками. Сервисные работники работают только при необходимости, что повышает эффективность использования ресурсов.

Действие или действие браузера:

• V2: "browser_action": { ... }
• V3: "действие": { ... }

browser_action заменено действием, которое объединяет функциональность и упрощает манифест.

Шаг 3. Обновление фонового сценария для использования сервисных работников

Мое расширение использовало простой setInterval() в фоновом режиме, с сервис-воркером такое поведение работать не будет, поскольку для экономии ресурсов браузера оно запускается только при необходимости.

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

И, конечно же, использовал встроенные уведомления Chrome для отправки уведомлений, чтобы избавиться от надоедливой задней части тираннозавра. Если меня читают первые пользователи моего расширения, мне очень жаль?

Примера кода здесь не будет, поскольку он слишком специфичен.

Заключение

Вот результат. Я думаю, это довольно круто. Минималистичный и простой в использовании

Обновление оказалось не таким уж и сложным, главное понять разницу между старым фоновым скриптом и сервис-воркером, но будьте осторожны с Тревогами, мне даже удалось пару раз крашить Chrome при тестировании ?

Не стесняйтесь попробовать обновленное расширение Pomodoro Timer & Focus Clock и удачи в обновлении!