👋 Эй! Я обновил эту статью 13 июня 2020 года.
Завершенный проект на моем GitHub также был обновлен!

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

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

🚧 Создайте фундамент

Откройте свой терминал в папке, которую вы хотите использовать, и init ваш проект с помощью следующей команды:

$ npm init -y

Создайте первые папки и файлы:

$ mkdir src && cd src && mkdir assets background contentscript
$ cd background && touch background.ts
$ cd ../contentscript && touch contentscript.ts contentscript.scss

ℹ️Если вы не знаете, для чего нужны background и contentscript, прочтите управлять событиями с помощью фоновых сценариев и сценариев содержимого.

Установите первый пакет зависимостей:

$ npm i -D @types/chrome @types/node awesome-typescript-loader css-loader mini-css-extract-plugin node-sass sass-loader ts-node tslint typescript webpack webpack-cli

📦 Настроить веб-пакет

В корневом каталоге создайте tsconfig.json и webpack.config.js.

$ touch tsconfig.json webpack.config.js

Заполните файлы, как показано ниже:

Я не буду объяснять, что мы здесь делаем, это простая конфигурация веб-пакета, которая не требует пояснений.

Мы говорим webpack получить наши background.ts и contentscript.ts, преобразовать их в JavaScript и преобразовать .scss файлы в .css.

Давайте создадим сценарий в нашем package.json, чтобы использовать эту конфигурацию Webpack.

Я использую пакет под названием npm-run-all для одновременного запуска нескольких скриптов, его можно установить как devDependency следующим образом:

$ npm i -D npm-run-all

Теперь при запуске npm run watch и npm run build должно быть создано несколько файлов в папке ./dist.

Большой! Пока что мы создали режим разработки и производственный режим для наших сценариев фона и содержимого.

📋 Добавление Manifest.json

manifest.json сообщит Chrome, что делать со всеми нашими файлами, и определит некоторые возможности нашего расширения.

Создадим его в корневом каталоге.

$ touch manifest.json

Заполните его этим содержанием:

Папка ./dist будет папкой, которую мы импортируем в Chrome позже.

У него всегда должна быть копия manifest.json. Для этого мы добавим в наш package.json три новых скрипта:

  • Сценарий clean очистит папку ./dist и предоставит ей новую копию нашего manifest.json. И, поскольку мы здесь, сценарий также скопирует нашу папку ./assets в папку ./dist.
  • Сценарии prebuild и prewatch будут вызываться каждый раз, когда мы запускаем сценарий наблюдения или сборки (выполняя npm run ...), но до того, как сам сценарий будет выполнен.

Как видите, я использую пакет cpy-cli для копирования файлов. Не забудьте установить его:

$ npm i -D cpy-cli

🎟 Импортировать в Chrome

Попробуем импортировать наше расширение в Chrome.

Запустите сценарий просмотра (npm run watch) и, когда код будет скомпилирован, откройте Chrome.

В меню ›Дополнительные инструменты› Расширения нажмите Загрузить распакованные и выберите нашу ./dist папку.

Ваше расширение должно быть добавлено в Chrome, и если вы добавили какой-то контент в background.ts или contentscript.ts файлы (только console.log некоторые вещи), вы должны увидеть их на соответствующих консолях.

💣 Создайте всплывающее окно на основе реакции

Мы собираемся использовать create-react-app для простоты.

Перейдите в папку ./src и создайте приложение React.

⚠️Пожалуйста, используйте всплывающее окно в качестве имени, мы собираемся использовать это имя позже.

$ cd src && npx create-react-app popup --template typescript

Здесь мы столкнемся с нашей первой проблемой.

Нам нужно поместить скомпилированный код React в папку ./dist корневого каталога. Мы можем сделать это легко, но если нам придется использовать npm run build каждый раз, когда мы меняем строку кода, чтобы посмотреть, работает ли она, это будет довольно утомительно.

Мы также не можем использовать npm run start, потому что у нас нет доступа к сгенерированным файлам, поэтому мы не можем поместить их в папку ./dist.

Чтобы иметь возможность компилировать и просматривать наши файлы одновременно, мы собираемся использовать пакет с именем cra-build-watch.

В своем терминале перейдите в корневой каталог и установите этот пакет:

$ npm i -D cra-build-watch

Теперь откройте package.json только что созданного приложения React (не того, что находится в корневом каталоге).

Добавьте следующий скрипт, а также настройки домашней страницы (чтобы убедиться, что все пути к ресурсам относятся к index.html):

Еще раз откройте файл package.json в корневом каталоге и добавьте следующий скрипт, который будет использоваться для отслеживания модификации файла в нашем приложении React.

ℹ️Обратите внимание на флаг префикса, который позволяет нам перейти в другой каталог (с другим package.json).

Если вы все сделали правильно и протестировали с npm run watch в основном каталоге, сценарий должен теперь скомпилировать ваш фон, сценарий содержимого, всплывающее окно React и поместить все в папку ./dist.

Добавьте в package.json последний скрипт, который позволит нам создать всплывающее окно React:

Помимо сборки приложения, оно будет скопировано в папку ./dist корневого каталога.

Мы должны обновить manifest.json нашего расширения Chrome, чтобы оно знало, что теперь у нас есть всплывающее окно:

Теперь вы можете npm run build и добавить расширение в Chrome, как и раньше.

Ошибка Chrome

Информация: следующая ошибка возникает из-за того, что CRA встроил сценарий времени выполнения в index.html при сборке для производства.
Как предложил Орен Зомер в комментариях, используя INLINE_RUNTIME_CHUNK = false внутри скрипта сборки, предотвратите это.
Скрипт сборки всплывающего окна можно обновить следующим образом:

"build:popup": "INLINE_RUNTIME_CHUNK=false npm run build --prefix src/popup && cd src/popup/build && cpy * /static/* ../../../dist/popup --parents"

После этого вы можете игнорировать эту часть 😃.

Если вы нажмете на значок расширения, вы увидите белый квадрат ... А не наше обещанное всплывающее окно React.

Щелкните правой кнопкой мыши белый квадрат, проверьте и откройте консоль разработчика.

Вы увидите эту ошибку:

Это наша последняя проблема. Что тут происходит?

Chrome блокирует встроенные скрипты в расширениях. Версия сборки нашего приложения-реакции имеет встроенный скрипт в скомпилированном index.html файле.

Как написано в консоли, один из обходных путей - скопировать SHA из этого сообщения и добавить его в параметр manifest.json “content_security_policy”, как показано ниже:

npm run build снова и перезагрузите расширение в Chrome. Если вы нажмете на значок своего расширения, вы должны увидеть, как загружается наше приложение React, как на этом экране:

🎁 Архивирование вашего расширения

Если вы хотите использовать сценарий для заархивирования вашего расширения, установите пакет bestzip и добавьте следующий сценарий в ваш основной package.json файл:

$ npm i -D bestzip

Заключение

На сегодня все! Спасибо за чтение, надеюсь, вы кое-что узнали. Теперь у вас есть расширение Chrome, готовое к использованию с TypeScript и React!

🏎️ Получите полный код здесь.

Эта статья оказалась полезной? Следуйте за мной (Thomas Guibert) на Medium и ознакомьтесь с моими самыми популярными статьями ниже! Пожалуйста, поделитесь этой статьей!