Upload
pavel-klimiankou
View
1.486
Download
4
Embed Size (px)
Citation preview
CHROMEEXTENSIONS…ФИКСИМ МИР (РАБОТУ)
ПАША КЛИМЕНКОВ
СОФТ МОГ БЫ БЫТЬ И ПОЛУЧШЕ
ФИКСИМ МИР
ЧТО ТАКОЕ ЭКСТЕНШН
Вэб приложение, в котором есть хотя бы:
• manifest.json
• любаяПолезность.js
MANIFEST.JSON
ПОЛЕЗНАЯ НАГРУЗКА.JS
• background page
• content script
• popup
• devtools panel
ВИД СО СТОРОНЫ
ПРИМЕР: ПРЕПРОЦЕССИМ БАГ-РЕПОРТЫ
СТАНДАРТНЫЙ (НЕ ВЕСЬ!) КУСОК РЕПОРТА:
Я СЛИШКОМ СТАР, ЧТОБЫ:
• Искать user agent
• Парсить json в уме
• Переводить миллисекунды в time span
• Находить символ в ужатой строке по номеру столбца
А ВОТ CONTENT SCRIPT МОЖЕТ ЭТО ПОДПРАВИТЬ
manifest.json
ВООБЩЕ ВСЁ ОСТАЛЬНОЕ + СВИСТЕЛКИ И АРОМАТИЗАТОРЫ
ГДЕ УСТАНАВЛИВАТЬ
КАК ДЕБАГИТЬ?
Просто вставить debugger;
ТА-ДАААМ!
BACKGROUND PAGE
ПОЛНЫЙ ДОСТУП К API(ПО ПЕРМИШЕНАМ)
WebRequest
Browser, PageAction
TextToSpeech
Popups, Notifications
ContextMenus
OmniBox
System.CPU, Memory
Tabs
ПРИМЕР: БРАУЗЕРНЫЙ РЕДИРЕКТ
ДАНО:
• Одностраничное приложение
• Базы клиентов распределены группами по серверам
• Иногда хочется дебагить локальные сырцы но с удаленными данными
• Серверный редирект – дорого
РЕШАЕМ ЧЕРЕЗ:
• webRequest API
• background.js
• page action
• popup window
MANIFEST.JSON
BACKGROUND:ДОБАВИТЬ PAGE ACTION
BACKGROUND PAGE:ПЕРЕХВАТ ЗАПРОСОВ
PAGE ACTION + POPUP:ВКЛ/ВЫКЛ
И ВСЕ ВМЕСТЕ
КАК ДЕБАГИТЬBACKGROUND
КАК ДЕБАГИТЬ POPUP
DEVTOOLS API
DEVTOOLS API МОГУТ
• общаться
• лазить в
• chrome.devtools.panels• chrome.devtools.inspectedWindow• chrome.devtools.network
ПРИМЕР:DEVTOOLS NETWORK PANELГЛАЗАМИ МЕНЯ
ЧТО НЕ ТАК
• Уйма запросов (RPC) к данным на сервер
• На один XHR приходится 1..2000 RPC
• Мне интересны в первую очередь RPC, а не XHR: параметры и результат
ЧТО МОЖЕТ ПРЕДЛОЖИТЬ NETWORK ПАНЕЛЬ
NETWORK ПАНЕЛЬ МЕЧТЫ
MANIFEST.JSON
ПАНЕЛЬКА
devtools.html
devtools.js
И ВОТ ЧТО ТВОРИТСЯ НА САМОМ ДЕЛЕ
КИЛЛЕР ФИЧА – ПРЕВЬЮ ЗАПРОСОВ И ОТВЕТОВ
ВСЁ
Вопросы? Что-нибудь простое
/pasha.klimenkov