Chrome Extensions

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Chrome Extensions

More Related Content

Chrome Extensions