На прошлой неделе я закончил создание хромированного расширения для клиента. Расширение было построено с использованием React в качестве механизма просмотра для отображения всплывающих окон. Поэтому я подумал про себя: не было бы неплохо написать о том, как создать собственное расширение с помощью React?

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

Итак, приступим.

Создание проекта

Первое, что вам нужно сделать, это создать проект расширения. Мы будем использовать проект create-react-app для создания проекта. Если вы не установили create-response-app, просто запустите следующий код в командной строке:

npm install -g create-react-app

Примечание. Я предполагаю, что вы уже установили node и npm на свой компьютер.

После того, как на вашем компьютере будет установлено create-response-app, сгенерируйте новый проект. В командной строке запустите следующий код:

create-react-app my-extension

create-response-app создаст новый проект с именем my-extension, который включает в себя все необходимые шаблоны React для запуска нового проекта.

Откройте новый сгенерированный проект в вашей любимой среде IDE и вперед.

Добавление манифеста

В корневой папке расширений Chrome должен быть файл manifest.json. Этот манифест сообщает Chrome, как создать расширение и как его запустить. В манифесте вы настроите такие вещи, как логотип, имя и описание вашего расширения. Поскольку вы хотите сделать манифест как часть корневой папки сборки, я предлагаю поместить его в общедоступную папку проекта. В create-response-app папка public просто копируется как есть в папку build при компиляции проекта. Другие вещи, которые я предлагаю поместить в общедоступную папку, включают содержимое, фоновые сценарии и ресурсы.

Примечание. В этом посте я не буду обсуждать, что такое контент и фоновые скрипты, поэтому рекомендую вам прочитать о них.

create-response-app уже включает файл manifest.json в общедоступную папку. переопределите файл следующим манифестом:

{
  "manifest_version": 2,

  "name": "My Extension",
  "description": "This extension is a starting point to create a real Chrome extension",
  "version": "0.0.1",

  "browser_action": {
    "default_popup": "index.html",
    "default_title": "Open the popup"
  },
  "icons": {
    "16": "logo-small.png",
    "48": "logo-small.png",
    "128": "logo-small.png"
  },
  "permissions": [
  ]
}

Что входит в этот manifest.json?
У нас есть версия, имя и описание манифеста, которые не требуют пояснений. Раздел browser_action сообщает Chrome, что у нас будет всплывающее окно, в котором будет запущен файл index.html. Значки будут использоваться для представления значка на панели расширений и в списке расширений Chrome. И последнее, но не менее важное: массив разрешений будет включать все разрешения, необходимые расширению для успешной работы. В настоящее время он пуст.

Примечание. Для получения дополнительной информации о формате манифеста расширения я предлагаю взглянуть на формат файла манифеста.

Вы можете добавить любое изображение шириной 128 пикселей в общедоступную папку с названием logo-small.png (или изменить это имя в манифесте на изображение вашего логотипа. имя).

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

npm run build

Добавление расширения в Chrome

Чтобы проверить новое расширение, вам необходимо установить его в Chrome. Чтобы установить его, вы можете сделать следующее:

В Chrome откройте список расширений, открыв новую вкладку и запустив следующий URL:

chrome://extensions/

Нажмите кнопку Загрузить распакованное расширение….
Перейдите в папку build и нажмите кнопку OK.

Если все пойдет правильно, ваше расширение будет установлено в Chrome.

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

Обновлять

Последние версии Chrome блокируют встроенные скрипты в расширениях Chrome. Поскольку сборка create-response-app в версии 2 создает встроенный скрипт для запуска приложения, вы можете наткнуться на сообщение об ошибке, связанное с политикой безопасности контента (CSP) в консоли. В сообщении об ошибке вы получите значение sha, которое можно добавить в файл manifest.json для решения проблемы. Это пример используемого мной манифеста (ключ sha выделен курсивом):

{
  "manifest_version": 2,

  "name": "My Extension",
  "description": "This extension is a starting point to create a real Chrome extension",
  "version": "0.0.1",

  "browser_action": {
    "default_popup": "index.html",
    "default_title": "Open the popup"
  },
  "icons": {
    "16": "logo-small.png",
    "48": "logo-small.png",
    "128": "logo-small.png"
  },
  "content_security_policy": "script-src 'self' 'sha256-GgRxr...'; object-src 'self'",  "permissions": [
  ]
}

Резюме

В этом посте я показал вам, как начать создавать расширение Chrome с помощью React в качестве движка просмотра. Для начала я использовал create-react-app и несколько простых манипуляций с манифестом. Конечно, разработка расширения - это больше, чем просто создание представления типа «привет, мир», но это то, что заслуживает отдельного поста.

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