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