Доклад с 4front meetup #8.
Видео здесь: https://youtu.be/-i9nNmCCFpA
В докладе речь идет о том как портировать Chrome Extension в Firefox Extension или сразу написать кросс-браузерное расширение с нуля.
Оранжевый - новый синий: Как портировать Chrome Extension в Firefox Extension
1. Оранжевый - новый синий
Как портировать Chrome Extension в Firefox Extension
или написать кросс-браузерное расширение с нуля
Борис Мосунов
facebook.com/mossounov
linkedin.com/in/borismossounov
anotherguru.me
14. Из чего состоит среднестатистическое
браузерное расширение?
manifest
background script
content scripts,
styles, assets
toolbar button
popup
locales
embedded pages
(options / help)
15. Основное и самое главное отличие
Chrome Extension и Firefox Addon
состоит в способах взаимодействия
javascript сценариев из 3 блоков:
background.js
contentscript.js popup.js
16. В Google Chrome целых два API обмена сообщениями:
• Simple one-time requests
• Long-lived connections
https://developer.chrome.com/extensions/messaging
24. background.js
contentscript.js popup.js
• есть два разных API обмена сообщениями
• contentscript.js и popup.js могут получить
background window и сохранить там объект
с методами
• все могут обмениваться безымянными
сообщениями, задавая колбек для ответа.
• background.js ничего не знает об
остальных, пока они к нему не подключатся
25. А что там у Firefox?
eloper.mozilla.org/en-US/Add-ons/SDK/Guides/Content_Scripts/u
30. Разберем отличия Mozilla Extension и Chrome Extension
по составляющим
manifest
background script
content scripts,
styles, assets
toolbar button
popup
locales
embedded pages
(options / help)
31. manifest
manifest.json
описывает:
• название, описание,
версия, лицензия,
• расположение всех
компонентов,
• права доступа
расширения
package.json
описывает:
• название, описание,
версия, лицензия,
• расположение
background script
а background script
подгружает все
компоненты
33. • Виртуальная html
страница со своим
window js-объектом,
• этот window
выполняется в одном
контексте content
script и popup script,
примерно как iframe
• Отдельный JavaScript,
без window.
• выполняется в
отдельном от
остальных контексте
• Из него подгружаются
content scripts, styles,
popup, etc.
• EcmaScript 6
background script
34. Как сделать кросс-браузерно:
1. Вообще не пользоваться
chrome.extension.getBackgroundPage()
2. Для firefox - отдельный background script поскольку все
firefox addon sdk на ES6.
3. Написать прослойку - систему обмена с content-script и
popup script именованными сообщениями c колбеками
который использовать и там и там
4. Заранее разделять скрипты для background и content
scripts, вплоть до клиент-серверной архитектуры.
background script
35. • выполняются в
изолированном мире
веб-страницы
• можно получить
доступ к background
window
• кросс-доменные
запросы в рамках
прав доступа
• выполняются в
изолированном мире
веб-страницы
• выполняются в
контексте
изолированном от
background script
• кросс-доменные
запросы запрещены
content scripts,
styles, assets
36. Как сделать кросс-браузерно:
1. Вообще не пользоваться chrome.extension.getBackgroundPage()
2. Написать прослойку - систему обмена с content-script и popup
script именованными сообщениями c колбеками который
использовать и там и там
3. Заранее разделять скрипты для background и content scripts,
вплоть до клиент-серверной архитектуры.
4. Для ajax запросов в firefox использовать Request на стороне
background и вышеупомянутую систему обмена сообщениями с
колбеками
content scripts,
styles, assets
37. • кнопка может быть только
одна
• можно получить доступ к
background window
• попап загружается по клику
на кнопку и выгружается
после закрытия
• javascript подгружается
через тег <script>
• размер попапа вычисляется
автоматически
• кнопок может быть
несколько
• контекст изолирован от
background script
• попап загружается при
старте экстеншена и
остается в памяти
• скрипты надо подгружать
как контент скрипты
• размер попапа задается
вручную
toolbar button
popup
38. Как сделать кросс-браузерно:
1. Вообще не пользоваться chrome.extension.getBackgroundPage()
2. Считать, что кнопка на тулбаре может быть только одна.
3. Писать popup script так, словно он загружается один раз и выгружается
при закрытии браузера (отключении экстеншена), при этом popup
должен реагировать на события экстеншена и, а не рендериться один
раз.
4. При этом помнить, что все же в разных браузерах он загружается в
разное время.
5. В firefox скрипты подгружать через content scripts, а <script>
блокировать (https://developer.mozilla.org/en-US/Add-
ons/SDK/Tutorials/Display_a_Popup).
toolbar button
popup
39. Формат: .json
доступны из:
• background script
• content script
• popup script
Формат: .properties
доступны из:
• только background
script, который может
передать остальным
• в popup.html можно
использовать
идентификаторы
locales
40. Как сделать кросс-браузерно:
1. Выбрать один из форматов как основной (json).
2. Использовать в firefox файлы .properties только
для хранения идентификатора языка.
3. В Firefox Запрашивать из content script и popup
script весь словарь сразу, который background
считывает из json. Или передавать словарь при
инициализации контент и попап скриптов в конфиге.
locales
41. Как собрать экстеншен
npm install -g yo
npm install -g generator-chrome-extension
npm install -g generator-firefox-extension
npm install -g jpm
46. en-US.properties содержит одну строку:
lng= en
это служит только для определения локали,
а национализированные строки подгружаются из .json
в bg-main-firefox
locales
50. Как сделать кросс-браузерно:
• Для генерации пустого проекта использовать yeoman генераторы: generator-chrome-extension и
generator-firefox-extension. Заменить cfx на jpm.
• Свести всю базу кода в один проект и настроить grunt build.
• Настроить grunt task, который будет синхронизировать общие поля в manifest.json и package.json
(версию, название, описание…).
• Сделать прослойку адаптер, которая будет использовать api того браузера, в котором запущено
расширение.
• Реализовать кросс-браузерный механизм обмена именованных сообщений с колбеками.
• Вообще не пользоваться chrome.extension.getBackgroundPage()
• Сделать два отдельных background script для Chrome и Firefox.
• Заранее разделять скрипты для background и content scripts, вплоть до клиент-серверной архитектуры.
• Для ajax запросов в firefox использовать Request на стороне background и вышеупомянутую систему
обмена сообщениями с колбеками, для Chrome - jQuery.ajax отлично подойдет.
• Считать, что кнопка на тулбаре может быть только одна.
• Писать popup script так, словно он загружается один раз и выгружается при закрытии браузера
(отключении экстеншена). Другими словами popup должен подписываться на события экстеншена и
реагировать на них, а не рендериться один раз. При этом помнить, что все же в разных браузерах он
загружается в разное время.
• В firefox popup скрипты подгружать через content scripts, а <script> блокировать.
• Локали хранить в формате Chrome - json. В firefox использовать файлы .properties только для хранения
идентификатора языка и запрашивать из content script и popup script весь словарь сразу, который
background считывает из json.
manifestbackground script
content scripts,
styles, assets
toolbar button
popup
все вместе
54. Чтобы реализовать экстеншен, подобный по
функционалу на Chrome Extension или Firefox Extension,
необходимо писать на C#, так что про кросс-
браузерность здесь можно забыть.
Google Chrome = Webkit = Opera = Yandex Browser, и т.д.
Apple Safari - это почти Webkit.
К слову сказать: