Первый опыт разработки кроссплатформенного плагина для браузеров

Привет, друзья! Совсем недавно я написал hello world в мире плагинов (или дополнений) для бразуеров. В этой заметке я бы хотел кратко поделиться своими мыслями об этом.

Итак, дополнения для браузеров. Сразу чувствуется, что это что-то из мира веб разработки. Тут, наверное, должны быть HTML, CSS, и, конечно же, JavaScript. Что я могу сказать о своем опыте с этими технологиями? Если про английский язык я обычно отвечаю — читаю со славарём, то тут — программирую на jQuery c stackoverflow. Но, ничего страшного — прорвёмся!

Обычно, когда речь заходит про веб разработку, ты думаешь, что на гитхабе полно фреймворков для этого. Так уж исторически сложилось, что ребята в этой сфере программирования обожают тулинги, фреймворки, библиотеки, и вот это всё. Как же я был удивлен, когда сходу не смог найти какой-нибудь проект на гитхабе с 10_000 звёздочек, который поможет в одну кнопку создать каркас для кроссплатформенного дополнения к браузерам.

Таким образом, я пошёл читать разницую документацию про разработку плагинов. Самые полезные ресурсы, которые мне помогли:

Пара слов о кроссплатформенности разработки. Увы, тут всё не так гладко. Вообще, есть такой стандарт — Browser Extensions, который описывает, как делать дополнения для браузеров. К сожалению, этот стандарт поддерживает только Firefox. Хром на это дело плиёт (еще бы — монополия). Поэтому, firefox вынужден дополнительно к стандарту поддерживать проприетарные API-шки Хрома. Более дательно о проблемах пишет сама Мозила — https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Build_a_cross_browser_extension.

Однако, вся ситуация не совсем критичная. Есть таблица совместимости браузеров по API для дополнений — https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs, а еще есть polyfill от Mozila, который немного упрощает жизнь — https://github.com/mozilla/webextension-polyfill, реализуя в Хроме частично стандартное API.

Как я писал своё hello world дополнение?

  1. Посмотрел на примеры для firefox — https://github.com/mdn/webextensions-examples
  2. Установил себе супер полезную тулу для разработки для firefox — https://github.com/mozilla/web-ext. Она умеет делать hot reload по измениню файлов, а также запускать линтер и сборщик для упоковки дополнения.
  3. После окончания разработки под Firefox, отладил под Chrome — практически сразу всё заработало, но я использовал polyfill.

После разработки, я решил даже опубликовать свой аддон. Это тоже просто — https://extensionworkshop.com/documentation/publish/package-your-extension/. После того, как я залил дополнение, его заапрувили в течение 2 дней. К слову, в Chrome магазин я не стал заливать плагин — там регистрация стоит 5$ — большие деньги.

Собственно, перейдем к концу. Разрабатывать дополнения, в целом, довольно просто. Даже, если вы не веб разработчик (конечно, я говорю про очень простые плагины). Хотя я, конечно, был весьма удивлен, что тут нет какого-то супер популярного фреймворка (ну, или он есть, и я просто не умею гуглить).

Категории: Программирование