Выступление Владимира Павлова, CEO kaknado.me, на 4 Ярославском frontend-митапе http://yarfrontend.ru/talks/chrome-extension/

1. Владимир Павлов
делаю kaknado.me
vladimir@kaknado.me
Пишем Google Extensions.
Начальный уровень
1

2. Что такое Google Extensions
https://developer.chrome.com/extensions
Google Extensions – это мелкое ПО, которое модифицирует и
дополняет функционал браузера Chrome. Разрабатывается с
помощью web-технологий: HTML, JavaScript и CSS.
Google

3. Mail

4. Checker
2

5. Какие задачи можно решать
1. Влияние на содержимое web-страницы
«Резать» рекламу, выделять полезную информацию и т.п.
2. Уведомления
Примеры: почта, социальные сети и т.п.
3. Взаимодействие с пользователем
Примеры: Evernote, Pocket.
4. Инструменты-фишки
Скриншот страницы, линейка и т.п. для удобства.
Магазин расширений
https://chrome.google.com/webstore/category/extensions
3

6. Старт с Google Chrome 5
Сейчас версия 41
API определяет минимальную версию браузера.
https://developer.chrome.com/extensions/api_index
https://developer.chrome.com/extensions/whats_new
4

7. Какими бывают Google Extensions
Вариант №1
background
Вариант №2
page actions
Вариант №3
popup
5

8. Кнопка с
уведомлением
View
(Pop-up HTML)
Логика
(JS)
1
2 3
Не обязательно
Фундамент
6

9. Структура Google Extensions
7

10. manifest.json
Описывает весь проект
8

11. Структура Extensions
1. manifest.json
9

12. Структура Extensions
1. manifest.json
Название.
Описание.
Версии и т.п.
10

13. Структура Extensions
1. manifest.json
«Основное»
11

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. Структура Extensions
1. manifest.json
Разрешения
14

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. Примеры
16

19. background
17

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. popup.js
21

24. «С чистого листа. Шаг за шагом.»
22

25. Задача
Написать расширение Google Chrome,
которое показывает
сколько cookie изменяет страница.
23

26. Шаг №0:
Пустой проект
24

27. Шаг №1:
Прописываем
manifest.json
25

28. Задачи:
1. Отлавливать события:
– Обновление страницы.
– Переход между разными вкладками.
2. Отлавливать изменение cookie.
3. Написать сохранение данных.
4. Сделать функцию визуализации счетчика
у иконки расширения.

29. Шаг №2:
Отлов событий
27

30. Шаг №3:
Отлов cookie
28

31. Шаг №4:
Получение tabId
29

32. Шаг №5:
Сохранение.
30

33. Шаг №6:
При переходе.
31

34. Шаг №7:
Тестирование.
32

35. Шаг №8:
Работает!
33

36. https://github.com/yajon/meetup-cookie
+
34

37. Полезные ссылки
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
Владимир Павлов
делаю kaknado.me
vladimir@kaknado.me