Создание расширений Chrome с помощью React и TypeScript: подробное руководство на 2021 год

В этой статье блога мы окунемся в захватывающий мир создания расширений Chrome с помощью React и TypeScript. Мы рассмотрим различные методы и приемы, которые помогут вам разработать мощные и многофункциональные расширения для браузера Chrome. Итак, хватайте инструменты для программирования и приступайте!

  1. Настройка среды разработки.
    Для начала убедитесь, что на вашем компьютере установлены Node.js и npm (менеджер пакетов Node). Создайте новый каталог для своего проекта и инициализируйте его, используя npm init.

  2. Создание базовой структуры расширения Chrome.
    Начните с создания базовой структуры вашего расширения Chrome. Создайте новый каталог с именем my-extension. Внутри этого каталога создайте файл manifest.json, который будет служить точкой входа для вашего расширения. Заполните необходимые данные, такие как имя расширения, версия и разрешения.

  3. Настройка React и TypeScript:
    Установите необходимые зависимости для React и TypeScript. Запустите следующую команду в каталоге вашего проекта:

npm install react react-dom react-scripts typescript @types/react @types/react-dom
  1. Создание компонента всплывающего окна.
    Компонент всплывающего окна — это пользовательский интерфейс, который появляется, когда пользователь щелкает значок расширения. Создайте новый каталог с именем srcвнутри каталога вашего проекта. Внутри каталога srcсоздайте новый файл с именем Popup.tsx. Этот файл будет содержать код вашего компонента всплывающего окна. Вот пример:
import React from 'react';
const Popup: React.FC = () => {
  return (
    <div>
      <h1>Hello, Chrome Extension!</h1>
    </div>
  );
};
export default Popup;
  1. Интеграция React с расширением Chrome:
    Чтобы интегрировать компонент React с расширением Chrome, измените файл popup.htmlв каталоге вашего проекта. Добавьте в файл следующий код:
<!DOCTYPE html>
<html>
  <head>
    <title>My Extension Popup</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="popup.js"></script>
  </body>
</html>
  1. Компиляция и объединение расширения.
    Чтобы скомпилировать и связать расширение, обновите раздел scriptsв файле package.jsonс помощью следующей команды:
"scripts": {
  "build": "react-scripts build",
  "start": "react-scripts start"
}
  1. Тестирование расширения.
    Чтобы протестировать расширение, выполните следующую команду в каталоге проекта:
npm run build

При этом будет создана папка build, содержащая скомпилированные файлы расширений. Откройте Chrome и перейдите к chrome://extensions. Включите «Режим разработчика» и нажмите «Загрузить распакованное». Выберите папку build, и ваше расширение будет загружено.

Поздравляем! Вы узнали, как создать расширение Chrome с помощью React и TypeScript. Мы рассмотрели основные шаги: от настройки среды разработки до интеграции компонентов React и тестирования расширения. Теперь ваша очередь раскрыть свой творческий потенциал и создать потрясающие расширения для браузера Chrome!