Разработка google extensions. Начальный уровень. meetup 4 #yarfrontend
TRANSCRIPT
Что такое Google Extensions
https://developer.chrome.com/extensions
Google Extensions – это мелкое ПО, которое модифицирует и дополняет функционал браузера Chrome. Разрабатывается с
помощью web-технологий: HTML, JavaScript и CSS.
Google����������� ������������������ Mail����������� ������������������ Checker
2
Какие задачи можно решать
1. Влияние на содержимое web-страницы«Резать» рекламу, выделять полезную информацию и т.п.
2. УведомленияПримеры: почта, социальные сети и т.п.
3. Взаимодействие с пользователемПримеры: Evernote, Pocket.
4. Инструменты-фишкиСкриншот страницы, линейка и т.п. для удобства.
Магазин расширений https://chrome.google.com/webstore/category/extensions
3
Старт с Google Chrome 5 Сейчас версия 41
API определяет минимальную версию браузера. https://developer.chrome.com/extensions/api_index
https://developer.chrome.com/extensions/whats_new
4
Какими бывают Google Extensions
Вариант №1 background
Вариант №2 page actions
Вариант №3 popup
5
Кнопка с уведомлением
View (Pop-up HTML)
Логика (JS)
1 2 3
Не обязательно
Фундамент
6
Структура Google Extensions7
manifest.json Описывает весь проект
8
Структура Extensions
1. manifest.json
9
Структура Extensions
1. manifest.json
Название.Описание.
Версии и т.п.
10
Структура Extensions
1. manifest.json
«Основное»
11
Структура Extensions
1. manifest.json > browser_action
Автозумирование (BMP, GIF, ICO, JPEG, or PNG)
12
Структура Extensions
1. manifest.json > page_actionАвтозумирование
(BMP, GIF, ICO, JPEG, or PNG)
13
Структура Extensions
1. manifest.json
Разрешения
14
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
Примеры
16
background
17
background.js – печатаем
chrome.browserAction.onClicked.addListener – срабатывает при нажатии на иконку приложения.
Оно не сработает, если есть popup.html
chrome.tabs.update – изменяет свойство вкладки.
18
background.js – изменяем страницу
chrome.tabs.executeScript – добавление js-скрипта на страницу.
19
popup.html
Запускает скрипты при нажатии на расширение
20
popup.js
21
«С чистого листа. Шаг за шагом.»
22
Задача
Написать расширение Google Chrome, которое показывает
сколько cookie изменяет страница.
23
Шаг №0: Пустой проект
24
Шаг №1: Прописываем manifest.json
25
Задачи:1. Отлавливать события: – Обновление страницы. – Переход между разными вкладками. 2. Отлавливать изменение cookie. 3. Написать сохранение данных. 4. Сделать функцию визуализации счетчика у иконки расширения.
Шаг №2: Отлов событий
27
Шаг №3: Отлов cookie
28
Шаг №4: Получение tabId
29
Шаг №5: Сохранение.
30
Шаг №6: При переходе.
31
Шаг №7: Тестирование.
32
Шаг №8: Работает!
33
https://github.com/yajon/meetup-cookie
+34
Полезные ссылки
1. Основа – https://developer.chrome.com/extensions 2. Полезная статья – http://lifehacker.com/5857721/how-to-build-a-chrome-extension 3. Stackoverflow – http://stackoverflow.com/questions/tagged/google-chrome-extension
Владимир Павлов делаю [email protected]