Технологии меняются день ото дня.
От веб-сайтов до мобильных приложений и статей, и теперь расширения Chrome пользуются спросом, поэтому вам не нужно каждый раз проверять веб-сайт на наличие изменений или чего-то в этом роде.
Расширения Chrome - это небольшие веб-приложения, которые добавляют функции в браузер Google Chrome, чтобы упростить выполнение функций / задач, не открывая всю веб-страницу.
Существует ряд расширений Chrome, которые вы можете добавить в свой браузер Chrome, некоторые из них перечислены здесь, в Моем блоге. Вы можете добавить больше из Chrome store здесь.
Расширения Chrome - это просто приложения JavaScript, которые можно настраивать с помощью HTML, CSS и Javascript.
Итак, в этом руководстве мы создаем расширение Chrome с использованием Angular Framework, которое позволяет нам сохранять контактный номер и отображать его в списке.
Итак, вы готовы засучить рукава и заняться чем-нибудь практичным с Angular2. Давайте взглянем
Требования
- NodeJs (7 или 7+)
- Настройка проекта Angular CLI
- NodeJs / Python restful API (URL)
- Браузер 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. У вас должен быть значок расширения, файл манифеста и один шаблон.
Итак, после настройки проекта вы должны выполнить эти шаги здесь.
- Выполните команду «ng build» (давайте создадим вашу сборку для вашего проекта, чтобы опубликовать, это создает dist папка в вашем проекте)
- Создайте файл 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 здесь для получения дополнительной информации, клонируйте его, запускайте, продолжайте смотреть :)
также для получения дополнительной информации