#4 "Особенности разработки кросс-браузерных...

Особенности разработки кросс-браузерных расширений

Рашитов Сергей4b.69.6d.6f@gmail.com

Множество браузеров

Internet Explorer Firefox Google Chrome Safari Opera

Архитектурные различия

Фоноваястраница

Вкладка #1

Вкладка #2

Вкладка #3

Архитектурные различия

XUL Window

XUL Overlay

XUL Tab #1

XUL Browser #1

DOM

XUL Tab #2

XUL Browser #2

DOM

Архитектурные различия

XUL Window

XUL Script

XUL Tab #1

XUL Browser #1

DOM

XUL Tab #2

XUL Browser #2

DOM

bootstrap.js

Архитектурные различия

XUL Window

XUL Script

XUL Tab #1

XUL Browser #1

bootstrap.js

Frame script

DOM

Архитектурные различия

Browser Helper Object(dll)

Вкладка #1

Browser Helper Object(dll)

Вкладка #2

Поддержка технологий

● Хотите ли поддерживать IE?

Поддержка технологий

● Хотите ли поддерживать IE?● IE 8 — CSS 2 и JScript (ES 3)

Поддержка технологий

● Хотите ли поддерживать IE?● IE 8 — CSS 2 и JScript (ES 3)● IE 9 — CSS 3 и ES 5

Поддержка технологий

● Хотите ли поддерживать IE?● IE 8 — CSS 2 и JScript (ES 3)● IE 9 — CSS 3 и ES 5

● Пишите для корпоративного сектора?

Поддержка технологий

● Хотите ли поддерживать IE?● IE 8 — CSS 2 и JScript (ES 3)● IE 9 — CSS 3 и ES 5

● Пишите для корпоративного сектора?● IE 8 и Firefox 4 (JavaScript 1.8)

Поддержка технологий

● Хотите ли поддерживать IE?● IE 8 — CSS 2 и JScript (ES 3)● IE 9 — CSS 3 и ES 5

● Пишите для корпоративного сектора?● IE 8 и Firefox 4 (JavaScript 1.8)

● Иначе — зависит от задачи.

БОЛЬ

● IE 8

БОЛЬ

● IE 8● IE 9 + IE 8 Compatibility Mode (CM)

БОЛЬ

● IE 8● IE 9 + IE 8 Compatibility Mode (CM)● IE 10 + IE 9 CM + IE 8 CM

БОЛЬ

● IE 8● IE 9 + IE 8 Compatibility Mode (CM)● IE 10 + IE 9 CM + IE 8 CM● IE 11 …

БОЛЬ

● IE 8● IE 9 + IE 8 Compatibility Mode (CM)● IE 10 + IE 9 CM + IE 8 CM● IE 11 …● А еще есть Quirks Mode

БОЛЬ

● IE 8● IE 9 + IE 8 Compatibility Mode (CM)● IE 10 + IE 9 CM + IE 8 CM● IE 11 …● А еще есть Quirks Mode● И Doctype

БОЛЬ

● IE 8● IE 9 + IE 8 Compatibility Mode (CM)● IE 10 + IE 9 CM + IE 8 CM● IE 11 …● А еще есть Quirks Mode● И Doctype● И x64

БОЛЬ

Браузероспецифичное

● Какие есть плюшки?

● Какие есть плюшки?● Cross-domain запросы● Постоянное хранилище данных● Доступ к файловой системе● Работа с периферийными устройствами● NPAPI● … и т. д. и т. п.

Браузероспецифичное

Кросс-браузерность

Как быть?

● Писать отдельно под каждый браузер

Как быть?

Кросс-браузерность

● Писать отдельно под каждый браузер● Унифицировать разработку

Как быть?

Кросс-браузерность

● Писать отдельно под каждый браузер● Унифицировать разработку

● Разделение на Background и Foreground● Greasemonkey● Комбинированный подход

Как быть?

Кросс-браузерность

Greasemonkey

● Greasemonkey — расширение Mozilla Firefox, позволяющее добавить на любую страницу пользовательский JavaScript, записанный в формате этого расширения.

● Пример заголовка:// ==UserScript==// @include http://www.example.com/foo/*// @exclude http://www.example.com/foo/baz// @include /^https?://www\.example\.com/.*$/// ==/UserScript==

Ну вот и все

Что делать новичку?

Ну вот и все

● Написать расширение под любимый браузер● Использовать семейство Greasemonkey● Взять готовый framework

● Kango● BabelExt

● Использовать web решения● сrossrider.com● сrossbrowser.com

Что делать новичку?

Вопросы?

WAT?WAT?