Download to read offline
Uploaded bykaknado.me
Разработка Google Extensions. Начальный уровень. MeetUP 4 #yarfrontend
Документ описывает основы разработки расширений для браузера Google Chrome, включая их функциональность и структуру. Основное внимание уделяется manifest.json, который является ключевым компонентом расширения, и различным API, доступным для использования. В документ также включен пошаговый процесс создания простого расширения, отслеживающего изменения cookie.
Разработка Google Extensions. Начальный уровень. MeetUP 4 #yarfrontend
- 1. Владимир Павлов делаю kaknado.me vladimir@kaknado.me ПишемGoogle Extensions. Начальный уровень 1
- 2. Что такое GoogleExtensions https://developer.chrome.com/extensions Google Extensions – это мелкое ПО, которое модифицирует и дополняет функционал браузера Chrome. Разрабатывается с помощью web-технологий: HTML, JavaScript и CSS. Google
- 3.
- 4.
- 5. Какие задачи можнорешать 1. Влияние на содержимое web-страницы «Резать» рекламу, выделять полезную информацию и т.п. 2. Уведомления Примеры: почта, социальные сети и т.п. 3. Взаимодействие с пользователем Примеры: Evernote, Pocket. 4. Инструменты-фишки Скриншот страницы, линейка и т.п. для удобства. Магазин расширений https://chrome.google.com/webstore/category/extensions 3
- 6. Старт с GoogleChrome 5 Сейчас версия 41 API определяет минимальную версию браузера. https://developer.chrome.com/extensions/api_index https://developer.chrome.com/extensions/whats_new 4
- 7. Какими бывают GoogleExtensions Вариант №1 background Вариант №2 page actions Вариант №3 popup 5
- 8. Кнопка с уведомлением View (Pop-up HTML) Логика (JS) 1 23 Не обязательно Фундамент 6
- 9.
- 10.
- 11.
- 12.
- 13.
- 14. Структура Extensions 1. manifest.json browser_action Автозумирование (BMP, GIF, ICO, JPEG, or PNG) 12
- 15. Структура Extensions 1. manifest.json page_action Автозумирование (BMP, GIF, ICO, JPEG, or PNG) 13
- 16.
- 17. Permissions • host permissions •background • bookmarks • clipboardRead • clipboardWrite • contentSettings • contextMenus • cookies • debugger • history • idle • management • notifications • pageCapture • tabs • topSites • webNavigation • webRequest • webRequestBlocking Доступ запрашивается при установке. Больше информации: https://developer.chrome.com/extensions/permissions 15
- 18.
- 19.
- 20. background.js – печатаем chrome.browserAction.onClicked.addListener– срабатывает при нажатии на иконку приложения. Оно не сработает, если есть popup.html chrome.tabs.update – изменяет свойство вкладки. 18
- 21. background.js – изменяемстраницу chrome.tabs.executeScript – добавление js-скрипта на страницу. 19
- 22. popup.html Запускает скрипты принажатии на расширение 20
- 23.
- 24. «С чистого листа.Шаг за шагом.» 22
- 25. Задача Написать расширение GoogleChrome, которое показывает сколько cookie изменяет страница. 23
- 26.
- 27.
- 28. Задачи: 1. Отлавливать события: –Обновление страницы. – Переход между разными вкладками. 2. Отлавливать изменение cookie. 3. Написать сохранение данных. 4. Сделать функцию визуализации счетчика у иконки расширения.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.