Введение в Manifest V3

Если вы веб-разработчик, вы, вероятно, не новичок в мире расширений браузера. Google Chrome, в частности, является фаворитом среди разработчиков и пользователей благодаря своей надёжной экосистеме расширений. Однако с появлением Manifest V3 ситуация значительно изменилась. В этой статье мы рассмотрим мир Manifest V3, узнаем, что это такое, почему это важно и, самое главное, как разрабатывать расширения Chrome с использованием этой новой платформы.

Что такое Manifest V3?

Manifest V3 — это последняя версия платформы расширений Chrome, предназначенная для решения проблем, связанных с безопасностью, производительностью и конфиденциальностью пользователей. Она вводит несколько ключевых изменений по сравнению со своим предшественником — Manifest V2.

  • Service Workers: одним из самых значительных изменений является замена фоновых страниц на сервисных рабочих. Сервисные рабочие запускаются вне основного потока, уменьшая влияние на производительность браузера и использование памяти.

  • Declarative Net Request: новый API declarativeNetRequest заменяет webRequest, позволяя расширениям блокировать или изменять сетевые запросы более эффективным и безопасным способом. Этот подход переносит обработку сетевых запросов из расширения в ядро браузера, повышая производительность и конфиденциальность.

  • Усиленная безопасность: Manifest V3 повышает безопасность, запрещая удалённо размещённый код и выполнение произвольных строк. Он также усиливает политику безопасности контента, защищая пользователей от вредоносных скриптов.

Миграция на Manifest V3

Если вы уже знакомы с Manifest V2, миграция на Manifest V3 включает несколько ключевых шагов.

Обновление файла Manifest

Первый шаг — обновить файл manifest.json в соответствии с новой версией.

{
  "name": "My Extension",
  "version": "1.0",
  "manifest_version": 3,
  "description": "A brief description of my extension",
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": ["storage", "activeTab", "scripting"],
  "background": {
    "service_worker": "background.js",
    "type": "module"
  }
}

Переход на Service Workers

Сервисные рабочие заменяют традиционные фоновые страницы. Вот пример того, как можно настроить сервисного рабочего в файле background.js:

// background.js
chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.sync.set({ key: 'value' });
});

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'doSomething') {
    // Perform some action
    sendResponse({ result: 'success' });
  }
});

Обновление вызовов API

Некоторые вызовы API были обновлены или заменены в Manifest V3. Например, webRequest теперь заменён на declarativeNetRequest.

{
  "permissions": ["declarativeContent", "activeTab"],
  "background": {
    "service_worker": "background.js",
    "type": "module"
  },
  "declarative_net_request": {
    "rule_resources": [
      {
        "id": "ruleset_1",
        "enabled": true,
        "path": "rules.json"
      }
    ]
  }
}

И вот пример файла rules.json:

[
  {
    "id": 1,
    "priority": 1,
    "action": { "type": "block" },
    "condition": { "urlFilter": "example.com", "resourceTypes": ["script"] }
  }
]

Включение внешних библиотек

Чтобы включить внешнюю библиотеку вроде SIPml.js в расширение, необходимо объявить её как web_accessible_resource в файле manifest.json.

{
  "web_accessible_resources": [
    {
      "resources": ["SIPml.js"],
      "matches": ["<all_urls>"]
    }
  ]
}

Затем можно включить эту библиотеку в файл background.js.

// background.js
importScripts('SIPml.js');

// Использовать библиотеку по необходимости

Пошаговое руководство по созданию нового расширения

Вот пошаговое руководство по созданию нового расширения Chrome с помощью Manifest V3.

Шаг 1: Создайте структуру каталогов

Создайте каталог для вашего расширения и добавьте необходимые файлы.

my-extension/
├── icons/
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
├── popup.html
├── popup.js
├── content-script.js
├── background.js
├── SIPml.js
├── rules.json
└── manifest.json

Шаг 2: Напишите файл Manifest

Создайте файл manifest.json с необходимыми настройками.

{
  "name": "My Extension",
  "version": "1.0",
  "manifest_version": 3,
  "description": "A brief description of my extension",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": ["storage", "activeTab", "scripting"],
  "background": {
    "service_worker": "background.js",
    "type": "module"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content-script.js"]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": ["SIPml.js"],
      "matches": ["<all_urls>"]
    }
  ],
  "declarative_net_request": {
    "rule_resources": [
      {
        "id": "ruleset_1",
        "enabled": true,
        "path": "rules.json"
      }
    ]
  }
}

Шаг 3: Реализуйте сервисного рабочего

Напишите файл background.js, чтобы управлять логикой сервисного рабочего.

// background.js
chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.sync.set({ key: 'value' });
});

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'doSomething') {
    // Выполнить действие
    sendResponse({ result: 'успех' });
  }
});

Шаг 4: Добавьте скрипты контента и всплывающие окна

Создайте файлы content-script.js и popup.js, чтобы обрабатывать взаимодействие с веб-страницами и пользовательским интерфейсом всплывающего окна.

// content-script.js
chrome.runtime.sendMessage({ action: 'doSomething' }, (response) => {
  console.log(response.result);
});

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
  <title>My Extension</title>
  <script src="popup.js"></script>
</head>
<body>
  <h1>Всплывающее окно My Extension</h1>
  <button id="myButton">Нажми меня</button>
</body>
</html>

// popup.js
document.getElementById('myButton').addEventListener('click', () => {
  chrome.runtime.sendMessage({ action: 'doSomething' }, (response) => {
    console.log(response.result);
  });
});

Блок-схема миграции на Manifest V3

Вот блок-схема, которая поможет визуализировать процесс миграции.

graph TD A("Начало") --> B{Is Manifest V2?} B -->|Да| C("Обновить Manifest до V3") B -->|Нет| D("Продолжить разработку с V3") C --> E("Мигрировать на сервисных работников") E --> F("Обновить вызовы API") F --> G("Реализовать декларативный запрос сети") G --> H("Протестировать и опубликовать") D --> E H --> B("Готово")

Заключение

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