Введение в расширения Chrome и Manifest V3

Если вы когда-либо хотели добавить больше функций или индивидуальный подход к работе в браузере, вы не одиноки. Расширения Chrome — это идеальный способ настроить браузер в соответствии с вашими потребностями, а с последней версией Manifest V3 разработка этих расширений стала более безопасной и эффективной. В этой статье мы погрузимся в мир разработки расширений Chrome с использованием Manifest V3 и TypeScript, добавив немного React для хорошей меры.

Настройка среды разработки

Прежде чем мы начнём программировать, убедитесь, что у вас установлены необходимые инструменты:

  • Node.js: скачайте и установите Node.js с официального сайта. Это также установит npm, который вы будете использовать для управления зависимостями вашего проекта.
  • Vite: Vite — это быстрый и современный сервер разработки, который мы будем использовать для оптимизации процесса разработки. Вы можете создать новый проект Vite с React и TypeScript с помощью следующей команды:
npm create vite@latest my-chrome-extension -- --template react-ts
  • Плагин Vite для расширений Chrome: чтобы упростить сборку вашего расширения Chrome, вам понадобится плагин Vite. Установите его с помощью:
npm i @crxjs/vite-plugin@beta -D

Создание файла манифеста

Файл manifest.json — это сердце вашего расширения Chrome. Вот пример того, как он может выглядеть для базового расширения с использованием Manifest V3:

{
  "manifest_version": 3,
  "name": "Моё расширение Chrome",
  "version": "1.0.0",
  "description": "Расширение Chrome, созданное с помощью Vite и React",
  "action": {
    "default_popup": "index.html"
  },
  "permissions": ["activeTab", "storage"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content_scripts/content.js"]
    }
  ]
}

Ключевые компоненты файла манифеста

  • manifest_version: указывает, что вы используете Manifest V3.
  • permissions: запрашивает доступ к активной вкладке и API хранилища.
  • background: определяет фоновый скрипт-файл.
  • content_scripts: определяет, какой скрипт должен быть внедрён в веб-страницы.
  • action: определяет HTML-файл для всплывающего окна расширения.

Настройка конфигурации Vite

Чтобы интегрировать плагин Vite для расширений Chrome, обновите файл vite.config.ts, как показано ниже:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { crx } from '@crxjs/vite-plugin';
import manifest from './manifest.json';

export default defineConfig({
  plugins: [
    react(),
    crx({ manifest }),
  ],
});

Разработка расширения

Фоновый скрипт

В Manifest V3 фоновый скрипт заменён сервисным работником. Вот пример того, как может выглядеть ваш файл background.js:

chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({ colorCount: 0 });
});

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.action === "colorChanged") {
      console.log("Цвет фона был изменён");
    }
  }
);

Скрипт содержимого

Скрипт содержимого внедряется в веб-страницы для взаимодействия с DOM. Вот пример:

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.action === "changeColor") {
      document.body.style.backgroundColor = getRandomColor();
      sendResponse({ status: "Цвет изменён" });
    }
  }
);

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

Всплывающий скрипт

Всплывающий скрипт является точкой входа для пользовательского интерфейса вашего расширения. Вот пример с использованием React и TypeScript:

// popup.tsx
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

const Popup = () => {
  const [colorCount, setColorCount] = useState(0);

  useEffect(() => {
    chrome.storage.sync.get('colorCount', (result) => {
      setColorCount(result.colorCount);
    });
  }, []);

  const changeColor = () => {
    chrome.runtime.sendMessage({ action: "changeColor" });
    chrome.storage.sync.get('colorCount', (result) => {
      chrome.storage.sync.set({ colorCount: result.colorCount + 1 });
    });
  };

  return (
    <div>
      <h1>Смена цвета</h1>
      <button onClick={changeColor}>Изменить цвет</button>
      <p>Цвет менялся {colorCount} раз</p>
    </div>
  );
};

ReactDOM.render(<Popup />, document.getElementById('root'));

Загрузка и тестирование расширения

Чтобы протестировать ваше расширение, выполните следующие действия:

  1. Откройте Chrome и перейдите на страницу chrome://extensions/.
  2. Включите «Режим разработчика» в правом верхнем углу.
  3. Нажмите «Загрузить распакованное» и выберите папку вашего расширения.
  4. Ваше расширение должно появиться на панели инструментов Chrome.
  5. Откройте любую веб-страницу и нажмите на значок вашего расширения.
  6. Нажмите кнопку «Изменить цвет» и наблюдайте за изменениями.

Диаграмма последовательности взаимодействия расширений

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

sequenceDiagram participant Пользователь participant Всплывающее окно participant Фоновый режим participant Содержимое participant Chrome Пользователь->Всплывающее окно: Нажать на значок расширения Всплывающее окно->Фоновый режим: Отправить сообщение для изменения цвета Фоновый режим->Содержимое: Переслать сообщение скрипту содержимого Содержимое->Chrome: Изменить цвет фона веб-страницы Содержимое->Фоновый режим: Ответить обратно Фоновый режим->Всплывающее окно: Обновить количество цветов Всплывающее окно->Пользователь: Показать обновлённое количество цветов

Рекомендации и переход с Manifest V2

Сервисный работник фонового режима против фоновой страницы

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

Изоляция скриптов содержимого

Скрипты содержимого в Manifest V3 изолированы от расширения и могут взаимодействовать с ним только посредством обмена сообщениями. Это добавляет уровень безопасности, но требует тщательного управления обменом данными между скриптами.

Изменение структуры разрешений

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

Заключение

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

Помните, что ключ к успешной разработке расширения — внимание к деталям, особенно когда речь идёт о разрешениях и обмене данными между скриптами. Немного практики и терпения, и вы сможете создавать расширения как профессионал в кратчайшие сроки.

Так что вперёд, погружайтесь в мир расширений Chrome. Ваш браузер (и ваши пользователи) будут вам благодарны.