Технологии меняются день ото дня.

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

Расширения Chrome - это небольшие веб-приложения, которые добавляют функции в браузер Google Chrome, чтобы упростить выполнение функций / задач, не открывая всю веб-страницу.

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

Расширения Chrome - это просто приложения JavaScript, которые можно настраивать с помощью HTML, CSS и Javascript.

Итак, в этом руководстве мы создаем расширение Chrome с использованием Angular Framework, которое позволяет нам сохранять контактный номер и отображать его в списке.

Итак, вы готовы засучить рукава и заняться чем-нибудь практичным с Angular2. Давайте взглянем

Требования

  1. NodeJs (7 или 7+)
  2. Настройка проекта Angular CLI
  3. NodeJs / Python restful API (URL)
  4. Браузер Chrome

Поскольку мы создаем расширение Chrome, оно использует Angular2, поэтому для удобства лучше использовать Angular-CLI для настройки проекта, а не вручную.

NodeJs является обязательным условием для запуска любого проекта angular.

API-интерфейс Nodejs / Python необходим для обращения к службе HTTP для получения и сохранения данных в базе данных / серверной части.

Браузер Chrome, используемый для запуска нашего расширения.

Настройка и структура

Я предполагаю, что у вас есть API (URL) для HTTP-службы в angular2, также я предполагаю, что вы знаете об angular2 и его работе.

Итак, теперь давайте начнем с проекта. Прежде всего, давайте создадим новый Angular-CLI проект, используя командную строку, подобную этой

  • ng новый AngularProject

Приведенная выше команда создает для вас все необходимое для проекта angular2.

Теперь вы можете добавить стиль, HTML-код в свой проект в соответствии с вашими потребностями в компонентах. вы можете добавить маршрутизацию из angular2 по мере необходимости, но перед этим начните с проекта Hello App.

Шаги к развертыванию

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

Итак, после настройки проекта вы должны выполнить эти шаги здесь.

  1. Выполните команду «ng build» (давайте создадим вашу сборку для вашего проекта, чтобы опубликовать, это создает dist папка в вашем проекте)
  2. Создайте файл manifest.json в папке dist. (Базовый формат приведен ниже)

3. Добавьте значок в ту же папку dist.

вот и все, вы сделали свое первое расширение Chrome.

Структура файла manifest.json

{
 “manifest_version”: 2,
 “name”: “ng2 Extension”,
 “description”: “Todo app as chrome extension using angular4”,
 “version”: “1.0”,
 “browser_action”: {
 “default_icon”: “icon.png”,
 “default_popup”: “index.html”
 },
 “permissions”: [],
 “content_security_policy”: “script-src ‘self’ ‘unsafe-eval’; object-src ‘self’”,
 “web_accessible_resources”: [
 “assets/css/*”,
 “assets/js/*”,
 “assets/fonts/*”
 ]
}

Запуск расширения в браузере

Чтобы установить расширение в браузер Chrome, откройте Браузер и перейдите к диспетчеру расширений.

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

Хотите увидеть полный код?

Я загрузил весь код на Github здесь для получения дополнительной информации, клонируйте его, запускайте, продолжайте смотреть :)

также для получения дополнительной информации