Разработка Google Extensions. Начальный уровень. MeetUP 4 #yarfrontend

Владимир Павлов делаю kaknado.mevladimir@kaknado.me

Пишем Google Extensions. Начальный уровень

1

Что такое 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

Владимир Павлов делаю kaknado.mevladimir@kaknado.me