Пару месяцев назад мой друг, который работает в 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 здесь.
Удачи и дайте мне знать, как дела!
Полезные ресурсы:
- Используйте Видео по обучению программированию, чтобы получить очень полезный и информативный учебник по программированию.
- Ознакомьтесь с документацией по расширению Google Chrome здесь.