#4 "Особенности разработки кросс-браузерных...
TRANSCRIPT
![Page 2: #4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c57dfbbb61ebc75d8b4679/html5/thumbnails/2.jpg)
Множество браузеров
Internet Explorer Firefox Google Chrome Safari Opera
![Page 3: #4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c57dfbbb61ebc75d8b4679/html5/thumbnails/3.jpg)
Архитектурные различия
Фоноваястраница
Вкладка #1
Вкладка #2
Вкладка #3
![Page 4: #4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c57dfbbb61ebc75d8b4679/html5/thumbnails/4.jpg)
Архитектурные различия
XUL Window
XUL Overlay
XUL Tab #1
XUL Browser #1
DOM
XUL Tab #2
XUL Browser #2
DOM
![Page 5: #4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c57dfbbb61ebc75d8b4679/html5/thumbnails/5.jpg)
Архитектурные различия
XUL Window
XUL Script
XUL Tab #1
XUL Browser #1
DOM
XUL Tab #2
XUL Browser #2
DOM
bootstrap.js
![Page 6: #4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c57dfbbb61ebc75d8b4679/html5/thumbnails/6.jpg)
Архитектурные различия
XUL Window
XUL Script
XUL Tab #1
XUL Browser #1
bootstrap.js
Frame script
DOM
![Page 7: #4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c57dfbbb61ebc75d8b4679/html5/thumbnails/7.jpg)
Архитектурные различия
Browser Helper Object(dll)
Вкладка #1
Browser Helper Object(dll)
Вкладка #2
![Page 8: #4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c57dfbbb61ebc75d8b4679/html5/thumbnails/8.jpg)
Поддержка технологий
● Хотите ли поддерживать IE?
![Page 9: #4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c57dfbbb61ebc75d8b4679/html5/thumbnails/9.jpg)
Поддержка технологий
● Хотите ли поддерживать IE?● IE 8 — CSS 2 и JScript (ES 3)
![Page 10: #4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c57dfbbb61ebc75d8b4679/html5/thumbnails/10.jpg)
Поддержка технологий
● Хотите ли поддерживать IE?● IE 8 — CSS 2 и JScript (ES 3)● IE 9 — CSS 3 и ES 5
![Page 11: #4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c57dfbbb61ebc75d8b4679/html5/thumbnails/11.jpg)
Поддержка технологий
● Хотите ли поддерживать IE?● IE 8 — CSS 2 и JScript (ES 3)● IE 9 — CSS 3 и ES 5
● Пишите для корпоративного сектора?
![Page 12: #4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c57dfbbb61ebc75d8b4679/html5/thumbnails/12.jpg)
Поддержка технологий
● Хотите ли поддерживать IE?● IE 8 — CSS 2 и JScript (ES 3)● IE 9 — CSS 3 и ES 5
● Пишите для корпоративного сектора?● IE 8 и Firefox 4 (JavaScript 1.8)
![Page 13: #4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c57dfbbb61ebc75d8b4679/html5/thumbnails/13.jpg)
Поддержка технологий
● Хотите ли поддерживать IE?● IE 8 — CSS 2 и JScript (ES 3)● IE 9 — CSS 3 и ES 5
● Пишите для корпоративного сектора?● IE 8 и Firefox 4 (JavaScript 1.8)
● Иначе — зависит от задачи.
![Page 14: #4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c57dfbbb61ebc75d8b4679/html5/thumbnails/14.jpg)
БОЛЬ
![Page 15: #4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c57dfbbb61ebc75d8b4679/html5/thumbnails/15.jpg)
● IE 8
БОЛЬ
![Page 16: #4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c57dfbbb61ebc75d8b4679/html5/thumbnails/16.jpg)
● IE 8● IE 9 + IE 8 Compatibility Mode (CM)
БОЛЬ
![Page 17: #4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c57dfbbb61ebc75d8b4679/html5/thumbnails/17.jpg)
● IE 8● IE 9 + IE 8 Compatibility Mode (CM)● IE 10 + IE 9 CM + IE 8 CM
БОЛЬ
![Page 18: #4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c57dfbbb61ebc75d8b4679/html5/thumbnails/18.jpg)
● IE 8● IE 9 + IE 8 Compatibility Mode (CM)● IE 10 + IE 9 CM + IE 8 CM● IE 11 …
БОЛЬ
![Page 19: #4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c57dfbbb61ebc75d8b4679/html5/thumbnails/19.jpg)
● IE 8● IE 9 + IE 8 Compatibility Mode (CM)● IE 10 + IE 9 CM + IE 8 CM● IE 11 …● А еще есть Quirks Mode
БОЛЬ
![Page 20: #4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c57dfbbb61ebc75d8b4679/html5/thumbnails/20.jpg)
● IE 8● IE 9 + IE 8 Compatibility Mode (CM)● IE 10 + IE 9 CM + IE 8 CM● IE 11 …● А еще есть Quirks Mode● И Doctype
БОЛЬ
![Page 21: #4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c57dfbbb61ebc75d8b4679/html5/thumbnails/21.jpg)
● IE 8● IE 9 + IE 8 Compatibility Mode (CM)● IE 10 + IE 9 CM + IE 8 CM● IE 11 …● А еще есть Quirks Mode● И Doctype● И x64
БОЛЬ
![Page 22: #4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c57dfbbb61ebc75d8b4679/html5/thumbnails/22.jpg)
Браузероспецифичное
● Какие есть плюшки?
![Page 23: #4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c57dfbbb61ebc75d8b4679/html5/thumbnails/23.jpg)
● Какие есть плюшки?● Cross-domain запросы● Постоянное хранилище данных● Доступ к файловой системе● Работа с периферийными устройствами● NPAPI● … и т. д. и т. п.
Браузероспецифичное
![Page 24: #4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c57dfbbb61ebc75d8b4679/html5/thumbnails/24.jpg)
Кросс-браузерность
Как быть?
![Page 25: #4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c57dfbbb61ebc75d8b4679/html5/thumbnails/25.jpg)
● Писать отдельно под каждый браузер
Как быть?
Кросс-браузерность
![Page 26: #4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c57dfbbb61ebc75d8b4679/html5/thumbnails/26.jpg)
● Писать отдельно под каждый браузер● Унифицировать разработку
Как быть?
Кросс-браузерность
![Page 27: #4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c57dfbbb61ebc75d8b4679/html5/thumbnails/27.jpg)
● Писать отдельно под каждый браузер● Унифицировать разработку
● Разделение на Background и Foreground● Greasemonkey● Комбинированный подход
Как быть?
Кросс-браузерность
![Page 28: #4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c57dfbbb61ebc75d8b4679/html5/thumbnails/28.jpg)
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==
![Page 29: #4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c57dfbbb61ebc75d8b4679/html5/thumbnails/29.jpg)
Ну вот и все
Что делать новичку?
![Page 30: #4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c57dfbbb61ebc75d8b4679/html5/thumbnails/30.jpg)
Ну вот и все
● Написать расширение под любимый браузер● Использовать семейство Greasemonkey● Взять готовый framework
● Kango● BabelExt
● Использовать web решения● сrossrider.com● сrossbrowser.com
Что делать новичку?
![Page 31: #4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c57dfbbb61ebc75d8b4679/html5/thumbnails/31.jpg)
Вопросы?
WAT?WAT?
![Page 32: #4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55c57dfbbb61ebc75d8b4679/html5/thumbnails/32.jpg)