Chrome Extensions

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