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

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

Репозиторий GitHub

Чувствуете нетерпение? Направляйтесь прямо к репозиторию GitHub. Не забудьте поставить звезду, если она вам помогла.

https://github.com/Harshita-mindfire/react-chrome-extension

Необходимо

Прежде чем мы углубимся в процесс разработки, вам необходимо иметь общее представление о React и его основных концепциях. Вы также должны иметь базовые знания JavaScript и HTML.

Кроме того, вам понадобятся следующие инструменты:

Гугл Хром
Visual Studio Code или любой другой редактор кода
Node.js и npm (менеджер пакетов узлов)

Шаг 1: Создайте приложение React

Для начала нам нужно создать новый проект TypeScript React. Откройте терминал или командную строку и выполните следующую команду. Это создаст новый проект React со всеми необходимыми зависимостями. Перейдите в только что созданную папку проекта:

npx create-react-app react-chrome-ext --template typescript
cd react-chrome-ext

Давайте удалим файлы, которые нам не нужны в данный момент. Убедитесь, что структура вашей папки после удаления выглядит примерно так:

Давайте обновим App.tsx, чтобы он стал основным компонентом Hello World в React.

function App() {
  return (
    <div className="App">
      Hello World
    </div>
  );
}

export default App;

Теперь мы обновляем index.tsx, чтобы создать корневой элемент в DOM и добавить в него наше приложение.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = document.createElement("div")
root.className = "container"
document.body.appendChild(root)
const rootDiv = ReactDOM.createRoot(root);
rootDiv.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Давайте добавим очень минимальный CSS в App.css:

.App {
    color: white;
    text-align: center;
}

.container {
    width: 15rem;
    height: 15rem;
    background-color: green;

}

Шаг 2: Добавьте веб-пакет

Далее нам нужно будет установить необходимые зависимости для объединения нашего приложения React. Выполните следующие команды в своем терминале:

npm install --save-dev webpack webpack-cli copy-webpack-plugin css-loader html-webpack-plugin

Обновите конфигурацию Webpack

По умолчанию шаблон create-react-app не предоставляет файл конфигурации Webpack, поэтому нам нужно его создать. Создайте новый файл с именем webpack.config.js в корневом каталоге вашего проекта и добавьте следующий код:

const path = require("path");
const HTMLPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin")

module.exports = {
    entry: {
        index: "./src/index.tsx"
    },
    mode: "production",
    module: {
        rules: [
            {
              test: /\.tsx?$/,
               use: [
                 {
                  loader: "ts-loader",
                   options: {
                     compilerOptions: { noEmit: false },
                    }
                  }],
               exclude: /node_modules/,
            },
            {
              exclude: /node_modules/,
              test: /\.css$/i,
               use: [
                  "style-loader",
                  "css-loader"
               ]
            },
        ],
    },
    plugins: [
        new CopyPlugin({
            patterns: [
                { from: "manifest.json", to: "../manifest.json" },
            ],
        }),
        ...getHtmlPlugins(["index"]),
    ],
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
    },
    output: {
        path: path.join(__dirname, "dist/js"),
        filename: "[name].js",
    },
};

function getHtmlPlugins(chunks) {
    return chunks.map(
        (chunk) =>
            new HTMLPlugin({
                title: "React extension",
                filename: `${chunk}.html`,
                chunks: [chunk],
            })
    );
}

Этот файл конфигурации определяет точку входа для нашего приложения (файл index.tsx), имя выходного файла, загрузчик TypeScript, загрузчик стилей и выходной каталог.
Теперь, когда мы настроили веб-пакет, обновите файл package.json, чтобы включить в него следующие скрипты:

  "scripts": {
    "build": "webpack --config webpack.config.js",
    "watch": "webpack -w --config webpack.config.js"
  }

Эти сценарии позволят вам создать расширение с помощью команды npm run build или запустить Webpack в режиме просмотра с помощью команды npm run watch.

Шаг 3: Добавьте файл манифеста

Файл манифеста используется для определения метаданных и разрешений для расширения Chrome. Создайте новый файл с именем manifest.json в корневом каталоге вашего проекта и добавьте следующий код:

{
    "version": "1.0.0",
    "manifest_version": 3,
    "name": "React Chrome Extension",
    "description": "This is a Chrome extension built with React and TypeScript",
    "action": {
        "default_popup": "js/index.html",
        "default_title": "React Chrome Extension"
    }
}

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

Шаг 4: Создайте приложение

Наконец, запустите команду npm run build в своем терминале, чтобы собрать расширение: Когда сценарий завершится → новая папка /dist будет создана в корне нашего приложения:

Шаг 5: Загрузите расширение

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

Заключение

Вот и все! Вы создали простое расширение «Hello World» для Chrome, используя TypeScript и Webpack. Отсюда вы можете начать изучать API расширений Chrome и создавать более сложные расширения. Я надеюсь, что этот блог был полезен для начала создания расширений Chrome с помощью React.