Список лучших инструментов, которые я обнаружил при разработке расширения Sync Tab Groups, и способы их использования. Эти инструменты упрощают и улучшают мой опыт программирования. Инструменты совместимы как с Firefox, так и с Chrome.

Управление сеансом браузера

Мотивация

Первое, что нужно подготовить, - это среда браузера. Я не рекомендую использовать ежедневные тренировки. При разработке вы делаете ошибки, которые могут нарушить работу расширения в сеансе или повредить ваши данные (закладки, открытые вкладки…).

Создайте индивидуальный сеанс браузера

На сегодняшний день лучший инструмент для экосистемы веб-расширений называется web-ext. Он открывает браузер с временным сеансом и уже установленным расширением. Браузер можно настроить для открытия некоторых страниц при запуске и изменения настроек. Этот инструмент принимает как файл конфигурации, так и параметры строки.

Изменение настроек было очень полезным, когда API скрытых вкладок все еще был экспериментальным в Firefox 59. Открытый браузер был совместим с расширением без каких-либо дополнительных ручных операций.

Полезно открыть страницу about:debugging, чтобы получить доступ к параметрам расширения.

Вы можете использовать расширение, чтобы открыть некоторые URL-адреса расширений, такие как параметры или некоторые тестовые страницы. Если вы ищете решение, вы можете прочитать раздел Автоматически открывать страницу из предыдущего сообщения в блоге.

Совместимость с Chrome

Я не нашел эквивалентного инструмента для Chrome. Приходится использовать ручной метод. Вы можете изменить сеанс, используя других «людей». Меню находится в правом верхнем углу окна браузера Chrome.

Проблема была открыта в репозитории web-ext, чтобы добавить возможность открытия Chrome вместо Firefox. Функция уже в разработке, мы надеемся, что это произойдет в ближайшее время.

Lint ваше расширение

Web-ext не только контролирует сеанс браузера, но и встраивает линтер. Линтер проверяет соответствие стандарту веб-расширений. Используя npx web-ext lint, вы можете узнать, соответствует ли ваш манифест стандартам. Если расширение не соответствует стандартам, оно отклоняется магазином браузера. Дабы избежать туда-сюда с магазином, линтер предупреждает о ваших проблемах. В моих случаях мне очень помогло предвидеть ошибки в manifest.json и JSON language files.

Линтер работает только с версией сборки расширения, если вы используете Webpack. В частности, имеет смысл линтовать только производственную версию. Компиляция Webpack часто позволяет DANGEROUS_EVAL и UNSAFE_VAR_ASSIGNMENT. Использование и выпуск расширения с такими предупреждениями - не проблема.

Переведите свое расширение

Процесс перевода расширения и поддержание перевода в актуальном состоянии может быть огромным. Переводы часто не выполняются разработчиками и не соотносятся с циклом выпуска. Я разработал инструмент под названием Translate Web-Ext, чтобы упростить процесс.

Три столпа:

  • Простая установка: загрузите языковые файлы через Интернет
  • Сосредоточьтесь: получайте отзывы о переводах, которые нужно сделать
  • Начните немедленно: переводите все прямо в браузере

Простой

Интерфейс абстрагирует синтаксис JSON. Вдобавок Translate Web-Ext дает вам отзывы об изменениях. Новые или измененные поля выделяются. Также окрашены слова, которые изменились.

Как только вы будете удовлетворены новым переводом, вы можете отметить его как выполненный. В конце концов, вам просто нужно скачать файл JSON с переводами внутри. Загруженный файл готов к использованию расширением.

Настраивать

Для работы приложению перевода необходимы некоторые предыдущие языковые файлы JSON.

  • Исходный текст для перевода (обязательно)
  • Предыдущий перевод, чтобы не начинать с нуля (необязательно)
  • Исходный текст во время предыдущего перевода, чтобы увидеть изменения (необязательно)

Со стороны разработчика расширения, чтобы использовать Translate Web-Ext, вам нужно только сделать файлы перевода JSON доступными в Интернете. Это прекрасно работает с репозиториями в Github.

Если есть сомнения, нажмите эту ссылку, чтобы увидеть интерфейс перевода в действии. Это процесс перевода на немецкий язык расширения, которое я разрабатываю, под названием Sync Tab Groups. Ссылка заранее устанавливает языковые файлы для извлечения, поэтому вашим переводчикам не нужно беспокоиться о настройке. Базовый перевод, последний из выполненных, находится в теге v0.6 на GitHub. В то время как перевод таргетинга - английский в последнем выпуске (master).

В разделе справки вы можете найти дополнительную информацию о том, как использовать Translate Web-Ext и генератор URL-адресов с настроенными языковыми файлами.

Как легко проверить языковые настройки

Во-первых, вы должны использовать линтер из web-ext, чтобы убедиться, что формат файла в порядке. Затем я предпочитаю использовать Chrome (или Chromium), чтобы проверить влияние интерфейса. Причина в том, что проще изменить настройку языка, чтобы расширение было на другом языке.

Разрабатывая Linux, я мог изменить язык вот так LANG=es chromium &. Альтернативные решения предлагаются в этой ветке StackOverflow, если предыдущее решение не работает. На Mac единственное решение, которое сработало для меня, - это изменить язык в настройках ОС.

Поддержка как Chrome, так и Firefox

Одинаковый код для всех расширений вашего браузера

Web Extension Polyfill - полезная библиотека для Chrome. Он создает объект browser, связанный с объектом chrome. Цель состоит в том, чтобы написать расширение только с объектом browser. Затем он работает как в браузерах Firefox, так и в Chrome.

Вы можете спросить, почему это полезно, поскольку Firefox уже хорошо понимает объект chrome. Причина в том, что объектный API browser использует обещания вместо обратного вызова. Хотя обратный вызов может сделать эту работу, обещания с async / await удобны в использовании.

Различия в API

Сегодня Firefox имеет гораздо больше функций, чем Chrome (скрытые вкладки, открытые отвергнутые вкладки, установка переменных окна / вкладки…). Ознакомьтесь с документацией Mozilla, чтобы узнать, какие функции доступны в каком браузере и с какой версии.

Когда я разрабатываю расширение Sync Tab Group для таргетинга на оба браузера, у меня есть 2 решения:

  1. Используйте один и тот же код и динамически отключайте отсутствующую функцию при выполнении
  2. Ограничьте эту функцию более ограниченным браузером

В качестве примера для второго пункта я ограничил количество команд (сочетаний клавиш расширения) в манифесте до 4. Это максимальное значение, разрешенное в Chrome. Другой пример, на этот раз на стороне клиента. В моем всплывающем интерфейсе я перестал использовать API элемента меню и переключился на домашнее меню.

Изменения в поведении

Отличается не только API, но и движок. Вот несколько советов по поведению Chrome:

  • browser.tabs.remove может выполнить обещание до того, как вкладка действительно будет удалена
  • Вкладки расширений всегда закрываются при удалении / перезагрузке расширения, даже если они не содержат вызова browser API.
  • activated событие запускается перед close событием для windows

Тесты

Тестирование - это основная стратегия поддержания качества кода и уверенности в том, что знания о приложении жестко запрограммированы в репозиторий.

Если вы знакомы с тестовыми библиотеками, такими как Jest или Jasmine, вы можете использовать их с пакетом sinon. Пакет имитирует все API веб-расширений, поскольку ни одна из предыдущих тестовых платформ не понимает этот API.

Если вы предпочитаете проводить настоящие интеграционные тесты, вы можете встроить тестовую страницу Jasmine в одну из страниц веб-расширений. Тогда у вас будет доступ к полному API, и вы даже сможете привязать тестовую страницу к фоновому скрипту. Если вам интересно узнать обо всех лучших практиках, вам может понравиться эта статья о том, как проводить интеграционные тесты с вашим веб-расширением.

Создайте свое расширение

Описание

Webpack - это то, что нужно для компиляции полного проекта JavaScript. Он управляет зависимостями и преобразует код. Обычно бывает как минимум 2 конфигурации: разработка и производственная. Разработка добавляет дополнительные инструменты и является более подробной, тогда как производство сохраняет только самое необходимое и оптимизирует код для скорости по сравнению с размером и простотой чтения.

Преобразования кода интересны:

  • Код, совместимый со старым браузером
  • Компиляция «клиентского кода» наподобие формата JSX в React

Стройте цели

Веб-расширение не всегда является одностраничным приложением, поскольку для каждой страницы есть как минимум фоновый скрипт и запись (всплывающее окно, боковая панель, вкладки…). По умолчанию Webpack создает файл JavaScript. Если вы хотите создать шаблон и связать HTML-страницу, вам следует посмотреть html-webpack-plugin.

В моем расширении я не связывал HTML-страницы напрямую, чтобы контролировать включенный CSS и прежде всего импортировать библиотеку webextension-polyfill (скомпилированная версия).

Если вы не добавите библиотеку полифиллов перед любым другим кодом, вызывающим объект browser, в Chrome произойдет сбой. Другой вариант - импортировать объект браузера в каждый файл (import browser from "webextension-polyfill"). Затем Webpack добавляет и собирает необходимую библиотеку.

Скопируйте статические файлы

Многие файлы являются просто активами для расширения, просто скопируйте их.

Добавьте свой CSS

Вы можете либо импортировать CSS в HTML-страницы, как обычно, либо импортировать его прямо в код JS с помощью import ‘../css/font-awesome.scss’. Недостатком второго метода является то, что он дублирует CSS в каждой цели JS. В своем проекте я в основном использовал первый метод CSS, который я написал, чтобы избежать дублирования и уменьшить размер расширения. Я использовал только импортированный метод для библиотеки Font Awesome. Таким образом, я мог бы добавить его как зависимость в package.json и позволить Webpack построить его для меня.

Импортировать скомпилированные библиотеки из node_modules

С помощью Webpack и плагина copy-webpack-plugin вы даже можете получить исходный код из папки node_modules. Таким образом, вы можете получить доступ к скомпилированным библиотекам, напрямую импортируемым вашим веб-расширением.

Подсказки отладки

Глобальная переменная с Webpack

Вы можете получить доступ к расширению из консоли, однако, когда Webpack построит расширение, вы потеряете ссылки.

Решение состоит в том, чтобы прикрепить функцию в исходном коде к окну, как это window.openTab = openTab;. После этого функция будет доступна в консоли!

Установите переменную среды с помощью Webpack

Глобальная переменная особенно полезна, чтобы узнать, находитесь ли вы в режиме разработки. Вы можете изменить поведение и подробность расширений.

Отладка из VS Code

По умолчанию каждый браузер предлагает консоль отладки, где вы можете взаимодействовать с расширением. Однако, если вы хотите быть ближе к исходному коду и используете VS Code, вы можете использовать расширение отладчика.

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

Он работает с Firefox, однако после непродолжительного использования он давал сбои. Несколько месяцев я ни разу не пробовал, так что ситуация могла быть лучше.

Используйте исходную карту для отладки с помощью Webpack

Чтобы получить исходную строку исходного кода из веб-расширения, созданного с помощью Webpack, вы должны установить это в конфигурации Webpack devtool: ‘inline-source-map’.

Даже если это не лучшая рекомендация из документации Webpack, в Firefox работает только тип inline. В противном случае файл исходной карты не найден в упакованном расширении. Другие конфигурации исходной карты, похоже, работают в Chrome.

Для получения дополнительной информации ознакомьтесь с проблемой Webpack или проблемой web-ext.

Заключение

Я надеюсь, что вам понравятся инструменты, описанные в этой статье, и что они помогут вам улучшить ваш опыт кодирования. Не все из них могут вас заинтересовать сейчас, просто выберите несколько и вернитесь позже, если возникнет необходимость.

Все инструменты здесь реализованы в расширении Sync Tab Groups. Я все еще ищу участников, которые помогут мне в разработке расширения. :)