Пару месяцев назад мой друг, который работает в Estate Diamond Jewelry, попросил меня составить список покупок для Chrome Extension.

Идея заключалась в том, что когда клиенты покупали обручальные кольца в Интернете, они могли использовать расширение, чтобы сохранить все интересные обручальные кольца, которые они нашли. Это упростило поиск обручальных колец для знакомых пар, а также увеличило посещаемость веб-сайта компании.

В то время я ничего не знал о хромированных расширениях, за исключением нескольких странных, которые я использовал. Я начал учиться и в конце концов смог создать для них отличное приложение. Ниже приведены некоторые из уроков, которые я усвоил, чтобы облегчить вам жизнь.

1. Что такое расширения Chrome?

Расширения Chrome - это приложения, созданные с использованием JavaScript, HTML и небольшого количества CSS. По сути, это файлы JavaScript, которые взаимодействуют с браузером Chrome и могут читать и изменять содержимое посещаемых вами веб-страниц. Существуют расширения, которые могут применять собственный CSS, генерировать статистику посещаемых вами веб-сайтов и даже играть в игры в браузере. Honey, Pinterest и AdBlock - отличные примеры популярных расширений Chrome. Они действительно классные, рекомендую вам проверить их.

Расширения - отличные проекты JavaScript как для новичков, так и для опытных разработчиков.

2. Манифест

Первое, что вам следует знать при создании расширения, это то, что каждое расширение Chrome начинается с файла с именем manifest.json. Это простой файл JSON с полями, включающими имя, описание и все другие «настройки» приложения. В этом файле вы указываете сведения о приложении, и он позволяет браузеру знать, с чего «начать» при запуске вашего расширения.

Вот пример:

{
  "manifest_version": 2, // this is required
  "name": "My Extension",
  "version": "1.2.3",
  "description": "A plain text description",
  "icons": {...}, // icon file paths specified here

  // optional
  "background": {...}, // for the background script
  "content_scripts": [{ ... }], // for the content scripts
  "browser_action": {...}, // for the popup
  "permissions": [ ... ], 
  // plenty more options
}

3. Контент, фон, всплывающее окно

Три основные части любого расширения Chrome:

фоновый файл (который выполняет всю тяжелую работу в фоновом режиме, такую ​​как обработка данных и обмен данными между частями приложения), сценарий содержимого (который может просматривать содержимое посещаемых вами страниц) и необязательный сценарий всплывающего окна (для интерактивного всплывающего окна в углу браузера).

Эти необязательные файлы указаны в манифесте.

Мой друг из Estate Diamond Jewelry тоже хотел contextMenu. По сути, это настраиваемое меню, которое появляется, когда вы щелкаете правой кнопкой мыши в любом месте браузера. Я добавил это в фоновый файл.

4. Хранение

Если ваше приложение хранит данные, я бы рекомендовал использовать Chrome Storage API. Он поставляется с Chrome и имеет очень простые методы JavaScript для сохранения и извлечения данных. Я использовал его в своем расширении, чтобы сохранить URL каждого обручального кольца, имя, цену, описание и источник изображения.

Он имеет очень простой интерфейс и даже может быть синхронизирован на нескольких устройствах. Чтобы использовать его, вам нужно добавить "permissions": ["storage"] в файл манифеста.

В качестве альтернативы есть также localStorage, sessionStorage и файлы cookie.

Хром-расширение Storage Area Explorer - отличный инструмент, который поможет вам отслеживать используемое хранилище.

5. Интернет-магазин Chrome

Опубликовать расширение в Интернет-магазине Chrome очень просто. Просто имейте в виду, что все расширения проверяются перед публикацией. Чем меньше у приложения разрешений, тем выше ваши шансы на то, что вас примут. Перед отправкой попробуйте удалить все ненужные разрешения. Например, после безуспешной попытки отправить свое приложение в Интернет-магазин я удалил разрешение tabs (которое позволяет приложению читать весь контент на всех ваших вкладках) и вместо этого заменил его на activeTab (который позволяет приложению читать только вкладка, на которой вы находитесь). На его рассмотрение и одобрение уходит около дня (или несколько часов, если ваше приложение небольшое).

Вы также можете самостоятельно публиковать и распространять приложение.

Вы можете скачать созданное мной расширение Chrome здесь.

Удачи и дайте мне знать, как дела!

Полезные ресурсы: