Создаем Chrome Extensions для решения конкретных ежедневных рабочих задач

1. CHROME
EXTENSIONS
…ФИКСИМ МИР (РАБОТУ)
ПАША КЛИМЕНКОВ

2. СОФТ МОГ БЫ БЫТЬ И
ПОЛУЧШЕ

4. ФИКСИМ МИР

5. ЧТО ТАКОЕ ЭКСТЕНШН
Вэб приложение, в котором есть
хотя бы:
• manifest.json
• любаяПолезность.js

6. MANIFEST.JSON

7. ПОЛЕЗНАЯ НАГРУЗКА.JS
• background page
• content script
• popup
• devtools panel

8. ВИД СО СТОРОНЫ

9. ПРИМЕР:
ПРЕПРОЦЕССИМ БАГ-РЕПОРТЫ

10. СТАНДАРТНЫЙ (НЕ ВЕСЬ!)
КУСОК РЕПОРТА:

11. Я СЛИШКОМ СТАР, ЧТОБЫ:
• Искать user agent
• Парсить json в уме
• Переводить миллисекунды в time
span
• Находить символ в ужатой строке
по номеру столбца

12. А ВОТ CONTENT SCRIPT
МОЖЕТ ЭТО ПОДПРАВИТЬ
manifest.json

13. ВООБЩЕ ВСЁ ОСТАЛЬНОЕ +
СВИСТЕЛКИ И АРОМАТИЗАТОРЫ

14. ГДЕ УСТАНАВЛИВАТЬ

15. КАК ДЕБАГИТЬ?
Просто вставить debugger;

16. ТА-ДАААМ!

17. BACKGROUND PAGE

18. ПОЛНЫЙ ДОСТУП К API
(ПО ПЕРМИШЕНАМ)
WebRequest
Browser, PageAction
TextToSpeech
Popups, Notifications
ContextMenus
OmniBox
System.CPU, Memory
Tabs

19. ПРИМЕР:
БРАУЗЕРНЫЙ РЕДИРЕКТ

20. ДАНО:
• Одностраничное приложение
• Базы клиентов распределены группами по
серверам
• Иногда хочется дебагить локальные сырцы
но с удаленными данными
• Серверный редирект – дорого

21. РЕШАЕМ ЧЕРЕЗ:
• webRequest API
• background.js
• page action
• popup window

22. MANIFEST.JSON

23. BACKGROUND:
ДОБАВИТЬ PAGE ACTION

24. BACKGROUND PAGE:
ПЕРЕХВАТ ЗАПРОСОВ

25. PAGE ACTION + POPUP:
ВКЛ/ВЫКЛ

26. И ВСЕ ВМЕСТЕ

27. КАК ДЕБАГИТЬ
BACKGROUND

28. КАК ДЕБАГИТЬ
POPUP

29. DEVTOOLS API

30. DEVTOOLS API МОГУТ
• общаться
• лазить в
• chrome.devtools.panels
• chrome.devtools.inspectedWindow
• chrome.devtools.network

31. ПРИМЕР:
DEVTOOLS NETWORK PANEL
ГЛАЗАМИ МЕНЯ

32. ЧТО НЕ ТАК
• Уйма запросов (RPC) к данным на
сервер
• На один XHR приходится 1..2000
RPC
• Мне интересны в первую очередь
RPC, а не XHR: параметры и
результат

33. ЧТО МОЖЕТ ПРЕДЛОЖИТЬ
NETWORK ПАНЕЛЬ

34. NETWORK ПАНЕЛЬ МЕЧТЫ

35. MANIFEST.JSON

36. ПАНЕЛЬКА
devtools.html
devtools.js

37. И ВОТ ЧТО ТВОРИТСЯ
НА САМОМ ДЕЛЕ

38. КИЛЛЕР ФИЧА – ПРЕВЬЮ
ЗАПРОСОВ И ОТВЕТОВ 

39. ВСЁ
Вопросы? Что-нибудь простое
/pasha.klimenkov