Как сделать расширение для браузера

Обновлено: 21.11.2024

DigitalOcean объединяет усилия с CSS-Tricks! Специальное приветственное предложение: получите бесплатный кредит в размере 100 долларов США.

Держу пари, что вы используете расширения для браузера прямо сейчас. Некоторые из них чрезвычайно популярны и полезны, например, блокировщики рекламы, менеджеры паролей и программы просмотра PDF. Эти расширения (или «надстройки») не ограничиваются этими целями — с ними можно сделать гораздо больше! В этой статье я расскажу вам, как его создать. В конечном итоге мы заставим его работать в нескольких браузерах.

Что мы делаем

Мы делаем расширение под названием «Транскриберы Reddit», и оно улучшит доступность Reddit, перемещая определенные комментарии в верхнюю часть раздела комментариев и добавляя атрибуты aria- для программ чтения с экрана. Мы также расширим возможности нашего расширения, добавив к комментариям рамки и фон для улучшения контраста текста.

Суть в том, что вы получите хорошее представление о том, как разрабатывать расширение для браузера. Мы начнем с создания расширения для браузеров на базе Chromium (например, Google Chrome, Microsoft Edge, Brave и т. д.). В следующем посте мы портируем расширение для работы с Firefox, а также с Safari, в котором недавно была добавлена ​​поддержка веб-расширений в версиях браузера для MacOS и iOS.

Готовы? Давайте сделаем это по одному шагу за раз.

Создать рабочий каталог

Прежде всего нам нужно рабочее пространство для нашего проекта. Все, что нам действительно нужно, — это создать папку и дать ей имя (которое я называю transcribers-of-reddit). Затем создайте другую папку внутри этой папки с именем src для нашего исходного кода.

Определить точку входа

Точка входа — это файл, содержащий общую информацию о расширении (например, имя расширения, описание и т. д.) и определяющий разрешения или сценарии для выполнения.

Нашей точкой входа может быть файл manifest.json, расположенный в только что созданной папке src. В нем добавим следующие три свойства:

manifest_version аналогичен версии в npm или Node. Он определяет, какие API доступны (или нет). Мы собираемся работать на переднем крае и использовать последнюю версию 3 (также известную как mv3 ).

Второе свойство — name, и оно определяет имя нашего расширения. Это имя отображается везде, где появляется наше расширение, например в Интернет-магазине Chrome и на странице chrome://extensions в браузере Chrome.

Тогда есть версия . Он помечает расширение номером версии. Имейте в виду, что это свойство (в отличие от manifest_version ) представляет собой строку, которая может содержать только числа и точки (например, 1.3.5).

Дополнительная информация о файле manifest.json

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

В этом случае мы не только добавляем описание, но и предоставляем значки и веб-адрес, на которые Chrome Web Store указывает на странице расширения.

  • Описание отображается на странице управления Chrome ( chrome://extensions ) и должно быть кратким, не более 132 символов.
  • Значки используются во многих местах. Как указано в документации, лучше предоставить три версии одного и того же значка в разных разрешениях, предпочтительно в виде файла PNG. В этом примере вы можете использовать репозиторий GitHub.
  • Homepage_url можно использовать для подключения вашего веб-сайта к расширению. Кнопка со ссылкой будет отображаться при нажатии на «Подробнее» на странице управления.

Одним из основных преимуществ расширений является то, что их API позволяют напрямую взаимодействовать с браузером. Но мы должны явно предоставить расширению эти разрешения, которые также содержатся в файле manifest.json.

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

Мы также предоставили расширению разрешение отслеживать, как пользователь переходит к текущему экрану. Reddit — это одностраничное приложение (SPA), что означает, что оно не вызывает обновление страницы. Нам нужно «поймать» это взаимодействие, так как Reddit будет загружать комментарии к сообщению только в том случае, если мы нажмем на него. Вот почему мы подключаемся к веб-навигации .

Мы вернемся к выполнению кода на странице позже, так как для этого требуется совершенно новая запись в файле manifest.json.

/explanation В зависимости от того, какие разрешения разрешены, браузер может отображать предупреждение для пользователя о принятии разрешений. Однако это только некоторые из них, и в Chrome они хорошо описаны.

Расширения браузера имеют встроенный API интернализации (i18n). Это позволяет вам управлять переводами для нескольких языков (полный список). Чтобы использовать API, мы должны определить наши переводы и язык по умолчанию прямо в файле manifest.json:

Это устанавливает английский язык в качестве языка. Если в браузере установлен какой-либо другой неподдерживаемый язык, расширение вернется к языковому стандарту по умолчанию ( en в этом примере).

Наши переводы определены в каталоге _locales. Давайте создадим там еще одну папку для каждого языка, который вы хотите поддерживать. Каждый подкаталог получает свой собственный файл messages.json.

Файл перевода состоит из нескольких частей:

  • Ключ перевода («id»): этот ключ используется для ссылки на перевод.
  • Сообщение: фактическое содержание перевода
  • Описание (необязательно): описывает перевод (я бы не стал их использовать, они просто раздувают файл, и ваш ключ перевода должен быть достаточно описательным).
  • Заполнители (необязательно): можно использовать для вставки динамического содержания в перевод.

Вот пример, который объединяет все это:

Использование заполнителей немного сложнее. Сначала нам нужно определить заполнитель внутри сообщения. Заполнитель должен быть заключен между символами $. После этого мы должны добавить наш заполнитель в «список заполнителей». Это немного не интуитивно понятно, но Chrome хочет знать, какое значение следует вставить для наших заполнителей. Мы (очевидно) хотим использовать здесь динамическое значение, поэтому мы используем специальное значение содержимого $1, которое ссылается на наше вставленное значение.

Свойство примера является необязательным. Его можно использовать, чтобы дать переводчикам подсказку, каким значением может быть заполнитель (но на самом деле он не отображается).

Нам нужно определить следующие переводы для нашего расширения. Скопируйте и вставьте их в файл messages.json. Не стесняйтесь добавлять другие языки (например, если вы говорите по-немецки, добавьте папку de внутри _locales и т. д.).

Использование переводов внутри манифеста

Первое, что увидит наш конечный пользователь, — это запись в Интернет-магазине Chrome или обзорная страница расширения. Нам нужно настроить наш файл манифеста, чтобы убедиться, что все переведено.

При применении этого синтаксиса используется соответствующий перевод в нашем файле messages.json (например, _MSG_name_ использует перевод имени).

Использование переводов на HTML-страницах

Применение переводов в файле HTML требует немного JavaScript.

Этот код возвращает заданный нами перевод (т.е. Transcribers of Reddit ). Заполнители можно сделать аналогичным образом.

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

Это делает работу:

После добавления этого скрипта на HTML-страницу мы можем добавить атрибут data-intl к элементу, чтобы установить его содержимое. Язык документа также будет установлен на основе языка пользователя.

Добавление всплывающего окна и страницы параметров

Прежде чем мы погрузимся в настоящее программирование, нам нужно создать две страницы:

  1. Страница параметров, содержащая пользовательские настройки.
  2. Всплывающая страница, которая открывается при взаимодействии со значком расширения рядом с адресной строкой. Эту страницу можно использовать для различных сценариев (например, для отображения статистики или быстрых настроек).

Вот список папок и файлов, которые нам понадобятся для создания страниц:

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

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

Создание всплывающего окна

Вот скелет HTML, который связывает файлы CSS и JavaScript и добавляет заголовок и кнопку внутри .

h1 содержит имя и версию расширения; кнопка используется для открытия страницы параметров. Заголовок не будет заполнен переводом (потому что у него нет атрибута data-intl), а у кнопки пока нет обработчика кликов, поэтому нам нужно заполнить наш файл popup.js:

Всплывающая страница готова, но расширение еще не знает о ее существовании. Мы должны зарегистрировать всплывающее окно, добавив следующее свойство в файл manifest.json.

Создание страницы параметров

Создание этой страницы происходит примерно так же, как и то, что мы только что завершили. Во-первых, мы заполняем наш файл options.html. Вот разметка, которую мы можем использовать:

Настоящих опций пока нет (только их обертки). Нам нужно написать скрипт для страницы опций.Во-первых, мы определяем переменные для доступа к нашим оболочкам и настройкам по умолчанию внутри options.js. «Замораживание» наших настроек по умолчанию предотвращает их случайное изменение позже.

Далее нам нужно загрузить сохраненные настройки. Для этого мы можем использовать (ранее зарегистрированный) API хранилища. В частности, нам нужно определить, хотим ли мы хранить данные локально ( chrome.storage.local ) или синхронизировать настройки на всех устройствах, на которые вошел конечный пользователь ( chrome.storage.sync ). Давайте воспользуемся локальным хранилищем для этого проекта.

Извлечение значений необходимо выполнять с помощью метода get. Он принимает два аргумента:

  1. Записи, которые мы хотим загрузить
  2. Обратный вызов, содержащий значения

Наши записи могут быть либо строкой (например, как настройки ниже), либо массивом записей (полезно, если мы хотим загрузить несколько записей). Аргумент внутри функции обратного вызова содержит объект всех записей, которые мы ранее определили в :

Чтобы отобразить параметры, нам также нужно создать функцию createOption().

Внутри прослушивателя события onchange нашего переключателя (он же радиокнопка) мы вызываем функцию updateSetting . Этот метод запишет обновленное значение нашего переключателя в хранилище.

Для этого мы воспользуемся функцией set. У него есть два аргумента: запись, которую мы хотим перезаписать, и (необязательный) обратный вызов (который мы не используем в нашем случае). Поскольку наша запись настроек является не логическим значением или строкой, а объектом, содержащим различные настройки, мы используем оператор распространения ( … ) и перезаписываем наш фактический ключ (настройку) только внутри объекта настроек.

И снова нам нужно «информировать» расширение о нашей странице параметров, добавив следующую запись в файл manifest.json:

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

Установка расширения для разработки

Теперь, когда мы успешно настроили файл манифеста и добавили всплывающее окно и страницу параметров, мы можем установить наше расширение, чтобы проверить, действительно ли наши страницы работают. Перейдите к chrome://extensions и включите «Режим разработчика». Появятся три кнопки. Щелкните файл с надписью «Загрузить распакованное» и выберите папку src вашего расширения, чтобы загрузить его.

Теперь расширение должно быть успешно установлено, и на странице должна появиться плитка «Транскриберы Reddit».

Мы уже можем взаимодействовать с нашим расширением. Нажмите на значок кусочка головоломки (🧩) рядом с адресной строкой браузера и нажмите на недавно добавленное расширение «Транскриберы Reddit». Теперь вас должно приветствовать небольшое всплывающее окно с кнопкой для открытия страницы параметров.

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

Если вы включите настройки "Показать фон комментария" и "Показать границу комментария", а затем перезагрузите страницу, состояние сохранится, поскольку мы сохраняем его в локальном хранилище браузера.

Добавление сценария содержимого

Хорошо, мы уже можем вызвать всплывающее окно и взаимодействовать с настройками расширения, но расширение еще не делает ничего особенно полезного. Чтобы оживить его, мы добавим сценарий содержимого.

Добавьте файл comment.js в каталог js и обязательно определите его в файле manifest.json:

content_scripts состоит из двух частей:

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

Теперь давайте начнем писать сценарий контента. Во-первых, мы добавляем некоторые константы в comment.js. Эти константы содержат выражения RegEx и селекторы, которые будут использоваться позже. CommentUtils используется, чтобы определить, содержит ли сообщение «комментарий tor» или существуют ли оболочки комментариев.

Затем мы проверяем, открывает ли пользователь страницу комментария («публикацию») напрямую, затем выполняем проверку RegEx и обновляем переменную directPage. Это происходит, когда пользователь напрямую открывает URL-адрес (например, введя его в адресную строку или щелкнув элемент на другой странице, например в Twitter).

Помимо непосредственного открытия страницы, пользователь обычно взаимодействует с SPA. Чтобы уловить этот случай, мы можем добавить прослушиватель сообщений в наш файл comment.js с помощью API среды выполнения.

Все, что нам сейчас нужно, это функции. Давайте создадим функцию moveComments(). Он перемещает специальный «комментарий tor» в начало раздела комментариев. Он также условно применяет цвет фона и рамку (если границы включены в настройках) к комментарию. Для этого вызываем API хранилища и загружаем запись настроек:

Функция applyWaiAria() вызывается внутри функции moveComments() — она добавляет атрибуты aria. Другая функция создает уникальный идентификатор для использования с атрибутами aria-.

Следующая функция ожидает загрузки комментариев и вызывает параметр обратного вызова, если находит оболочку комментария.

Добавление сервисного работника

Помните, как мы добавили прослушиватель сообщений в скрипт содержимого? Этот слушатель в настоящее время не получает сообщения. Нам нужно самим отправить его в контент-скрипт. Для этого нам нужно зарегистрировать сервис-воркер.

Мы должны зарегистрировать нашего сервис-воркера в файле manifest.json, добавив к нему следующий код:

Не забудьте создать файл sw.js в каталоге src (служебные рабочие процессы всегда нужно создавать в корневом каталоге расширения, src .

Теперь давайте создадим некоторые константы для типов сообщений и страниц:

Мы можем добавить фактический контент сервис-воркера. Мы делаем это с помощью прослушивателя событий в состоянии истории ( onHistoryStateUpdated ), который определяет, когда страница была обновлена ​​с помощью History API (который обычно используется в SPA для навигации без обновления страницы). Внутри этого прослушивателя мы запрашиваем активную вкладку и извлекаем ее tabId. Затем мы отправляем сообщение нашему скрипту содержимого, содержащее тип страницы и URL-адрес.

Мы закончили! Перейдите на страницу управления расширениями Chrome ( chrome://extensions ) и нажмите значок перезагрузки на распакованом расширении. Если вы откроете сообщение Reddit, содержащее комментарий «Транскриберы Reddit» с транскрипцией изображения (например, этот), он будет перемещен в начало раздела комментариев и выделен, если мы включили его в расширении. настройки.

Было ли это так сложно, как вы думали? Это определенно намного проще, чем я думал, прежде чем копаться в этом. После настройки manifest.json и создания всех файлов страниц и ресурсов, которые нам нужны, все, что мы на самом деле делаем, это пишем HTML, CSS и JavaScript, как обычно.

Если вы когда-нибудь застрянете на этом пути, документация по Chrome API поможет вам вернуться в нужное русло.

Еще раз, вот репозиторий GitHub со всем кодом, который мы рассмотрели в этой статье. Прочтите его, используйте и дайте мне знать, что вы о нем думаете!

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

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

Для начала создайте новый каталог для хранения файлов расширения.

Завершенное расширение можно скачать здесь.

Расширения начинаются со своего манифеста. Создайте файл с именем manifest.json и включите в него следующий код.

Каталог, содержащий файл манифеста, можно добавить в качестве расширения в режиме разработчика в его текущем состоянии. Чтобы загрузить распакованное расширение в режиме разработчика, выполните следующие действия:

  1. Откройте страницу управления расширениями, перейдя по адресу chrome://extensions .
    • Можно также открыть эту страницу, нажав кнопку меню "Расширения" и выбрав "Управление расширениями" в нижней части меню.
    • Кроме того, откройте эту страницу, нажав на меню Chrome, наведя указатель мыши на "Дополнительные инструменты" и выбрав "Расширения".
  2. Включите режим разработчика, нажав переключатель рядом с режимом разработчика.
  3. Нажмите кнопку «Загрузить распакованное» и выберите каталог расширения.

Та-да! Расширение успешно установлено. Поскольку в манифест не включены значки, для расширения будет создан общий значок.

Теперь расширение установлено, но пока ничего не делает, потому что мы не сказали ему, что и когда делать. Давайте исправим это, добавив код для хранения значения цвета фона.

Фоновые сценарии, как и многие другие важные компоненты, должны быть зарегистрированы в манифесте. Регистрация фонового скрипта в манифесте сообщает расширению, на какой файл ссылаться и как этот файл должен себя вести.

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

Этому расширению потребуется информация из постоянной переменной, как только оно будет установлено. Начните с включения события прослушивания для runtime.onInstalled в фоновый сценарий. Внутри прослушивателя onInstalled расширение установит значение с помощью API хранилища. Это позволит нескольким компонентам расширения получить доступ к этому значению и обновить его. Внутри каталога расширения создайте файл с именем background.js и добавьте следующий код.

Большинство API, включая API хранилища, должны быть зарегистрированы в поле "разрешения" в манифесте, чтобы расширение могло их использовать.

Вернитесь на страницу управления расширениями и нажмите ссылку "Обновить". Новое поле Inspect views становится доступным с синей ссылкой Service Worker.

Нажмите на ссылку, чтобы просмотреть журнал консоли фонового скрипта, "Цвет фона по умолчанию установлен на зеленый"

Расширения могут иметь множество форм пользовательского интерфейса; этот будет использовать всплывающее окно. Создайте и добавьте файл с именем popup.html в каталог расширения. Это расширение использует кнопку для изменения цвета фона.

Как и фоновый скрипт, этот файл должен быть объявлен в манифесте, чтобы Chrome отображал его во всплывающем окне расширения. Для этого добавьте объект действия в манифест и установите popup.html в качестве default_popup действия.

HTML этого всплывающего окна ссылается на внешний файл CSS с именем button.css . Добавьте еще один файл в каталог расширения, назовите его соответствующим образом и добавьте следующий код.

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

Расширения также отображают изображения на странице управления расширениями, предупреждение о правах доступа и значок значка. Эти изображения обозначены в манифесте под иконками.

По умолчанию расширения отображаются в меню расширений (элемент головоломки). При закреплении расширения на панели инструментов отобразится значок.

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

Последним шагом для пользовательского интерфейса всплывающего окна является добавление цвета к кнопке. Создайте и добавьте файл с именем popup.js со следующим кодом в каталог расширения.

Этот код берет кнопку из popup.html и запрашивает значение цвета из хранилища. Затем он применяет цвет в качестве фона кнопки. Включите тег скрипта в popup.js в popup.html .

Перезагрузите расширение, чтобы увидеть зеленую кнопку.

Теперь у расширения есть собственный значок и всплывающее окно, а цвет кнопки всплывающего окна зависит от значения, сохраненного в хранилище расширения. Далее ему нужна логика для дальнейшего взаимодействия с пользователем. Обновите popup.js, добавив следующее в конец файла.

Обновленный код добавляет к кнопке прослушиватель событий щелчка, который запускает программно внедренный сценарий содержимого. Это превращает цвет фона страницы в тот же цвет, что и кнопка. Программная инъекция позволяет запускать скрипты контента, запускаемые пользователем, вместо автоматической вставки нежелательного кода на веб-страницы.

Манифесту потребуется разрешение activeTab, чтобы разрешить расширению временный доступ к текущей странице, и разрешение на использование сценария для использования метода executeScript Scripting API.

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

В настоящее время расширение позволяет пользователям менять фон только на зеленый. Включение страницы параметров дает пользователям больший контроль над функциями расширения, что позволяет дополнительно настраивать их работу в Интернете.

Начните с создания файла в каталоге с именем options.html и включите в него следующий код.

Затем зарегистрируйте страницу параметров в манифесте,

Перезагрузите расширение и щелкните правой кнопкой мыши значок расширения на панели инструментов, затем выберите "Параметры". Либо нажмите ПОДРОБНОСТИ, прокрутите страницу сведений и выберите Параметры расширения.

Последний шаг — добавить логику параметров. Создайте файл с именем options.js в каталоге расширения со следующим кодом.

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

Поздравляем! Теперь каталог содержит полнофункциональное, хотя и упрощенное расширение Chrome.

Примечание. В этой статье обсуждается создание кроссбраузерных расширений для manifest v2. На момент написания статьи (декабрь 2021 г.) основные поставщики браузеров представляют манифест версии 3. Manifest v3, вероятно, изменит способ разработки кросс-браузерных расширений. Однако работа над Manifest v3 не завершена. Основные поставщики браузеров сотрудничают (с членами сообщества), чтобы упростить разработку кросс-браузерного расширения в группе сообщества W3C WebExtensions.

Появление API расширений браузера создало единую среду для разработки расширений браузера. Однако существуют различия в реализации API и охвате браузеров, использующих API расширений (основными из них являются Chrome, Edge, Firefox, Opera и Safari).

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

Препятствия при кодировании межплатформенных расширений

Есть шесть аспектов, которые необходимо учитывать при работе над межплатформенным расширением:

  • Пространство имен API
  • Асинхронная обработка событий API
  • Охват функций API
  • Ключи манифеста
  • Дополнительная упаковка
  • Публикация расширений

Пространство имен API

В основных браузерах используются два пространства имен API:

  • browser.* , предлагаемый стандарт API расширений, используемый Firefox и Safari.
  • chrome.* используется в Chrome, Opera и Edge.

Firefox также поддерживает пространство имен chrome.* для API, совместимых с Chrome, в первую очередь для облегчения переноса. Однако предпочтительнее использовать пространство имен browser.*. Браузер.* не только является предлагаемым стандартом, но и использует промисы — современный и удобный механизм для обработки асинхронных событий.

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

Асинхронная обработка событий API

В основных браузерах используются два подхода к обработке асинхронных событий:

  • Promises, предлагаемый стандарт API расширений, используемый Firefox и Safari.
  • Обратные вызовы, используемые Chrome, Edge и Opera.

Firefox также поддерживает обратные вызовы для API, поддерживающих пространство имен chrome.*. Однако рекомендуется использовать промисы (и пространство имен browser.*). Обещания были приняты как часть предлагаемого стандарта. Это значительно упрощает асинхронную обработку событий, особенно когда вам нужно объединить события в цепочку.

Примечание. Если вы не знакомы с различиями между этими двумя методами, ознакомьтесь со статьей Знакомство с асинхронным JavaScript: обратные вызовы, промисы и Async/Await или на странице MDN Использование промисов.

Полифилл API браузера WebExtension

Как легко воспользоваться обещаниями? Решение состоит в том, чтобы написать код для Firefox с помощью промисов и использовать Polyfill API браузера WebExtension для работы с Chrome, Opera и Edge.

Этот полифилл обращается к пространству имен API и асинхронной обработке событий в Firefox, Chrome, Opera и Edge.

Чтобы использовать полифилл, установите его в среду разработки с помощью npm или загрузите прямо из выпусков GitHub.

Затем укажите ссылку browser-polyfill.js в:

  • manifest.json , чтобы сделать его доступным для фоновых и контентных сценариев.
  • Документы HTML, такие как всплывающие окна browserAction или вкладки.
  • Вызов executeScript в скриптах с динамически внедряемым контентом, загружаемых с помощью tabs.executeScript , если он не был загружен с использованием объявления content_scripts в manifest.json .

Так, например, этот код manifest.json делает полифилл доступным для фоновых скриптов:

Ваша цель — обеспечить выполнение полифилла в вашем расширении раньше, чем любые другие сценарии, ожидающие выполнения браузера.* Выполнение пространства имен API.

Примечание. Дополнительные сведения об использовании полифилла с сборщиком модулей см. в файле readme проекта на GitHub.

Есть и другие варианты полифилла. Однако на момент написания ни один из других вариантов не обеспечивал покрытие API Polyfill браузера WebExtension. Таким образом, если вы не выбрали Firefox в качестве своего первого выбора, вы можете принять ограничения альтернативных полифиллов, перенести их на Firefox и добавить кросс-браузерную поддержку или разработать собственный полифилл.

Охват функций API

Разницы в функциях API, предлагаемых в каждом из основных браузеров, можно разделить на три основные категории:

  1. Отсутствие поддержки всей функции. Например, на момент написания статьи Edge не поддерживал функцию browserSettings.
  2. Варианты поддержки функций внутри функции. Например, на момент написания этой статьи Firefox не поддерживал метод функции уведомления messages.onButtonClicked , а Firefox — единственный браузер, который поддерживает уведомления.onShown .
  3. Проприетарные функции, поддерживающие функции браузера. Например, на момент написания статьи контейнеры были специфичной функцией Firefox, поддерживаемой функцией contextualIdentities.

Подробные сведения о поддержке API-интерфейсов расширений в основных браузерах, а также в Firefox для Android и Safari для iOS можно найти на странице поддержки API-интерфейсов JavaScript браузером Mozilla Developer Network. Информация о совместимости браузера также включена в каждую функцию и ее методы, типы и события на справочных страницах JavaScript API Mozilla Developer Network.

Обработка различий API

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

Вместо этого при наличии различий между API следует либо предлагать альтернативные реализации, либо резервные функции. (Помните: вам также может понадобиться сделать это, чтобы учесть различия в поддержке API между версиями одного и того же браузера.)

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

Следующий код позволяет выполнить проверку во время выполнения:

Ключи манифеста

Разницы в ключах файла manifest.json, поддерживаемых основными браузерами, можно разделить на три категории:

  1. Информационные атрибуты расширения. Например, на момент написания статьи Firefox и Opera включали ключ разработчика для получения подробной информации о разработчике расширения.
  2. Функции расширения. Например, на момент написания статьи Chrome не поддерживал ключ browser_specific_settings.
  3. Необязательный ключ. На момент написания, как правило, обязательными ключами являются только «manifest_version», «version» и «name».

Информация о совместимости браузера включена в каждый ключ на справочных страницах Mozilla Developer Network manifest.json.

Поскольку файлы manifest.json, как правило, мало изменяются (за исключением номеров выпусков, которые могут различаться в разных браузерах), создание и редактирование статической версии для каждого браузера обычно является самым простым подходом.

Дополнительная упаковка

Упаковать расширение для распространения через магазины расширений браузера относительно просто. Firefox, Chrome, Edge и Opera используют простой формат zip, который требует, чтобы файл manifest.json находился в корне zip-пакета. Safari требует, чтобы расширения были упакованы аналогично приложениям.

Подробнее об упаковке см. в руководстве на порталах разработчиков соответствующих расширений.

Публикация расширения

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

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

Создать расширение для браузера Chrome очень просто! В этой статье и видеоруководстве я расскажу вам о каждом шаге, как создать расширение Chrome, которое работает, за 10 минут; или даже быстрее, если вы быстро копируете и вставляете.

Может показаться, что для Chrome есть плагин практически для всего, что вам может понадобиться. Но держу пари, что вы можете придумать какую-нибудь удобную функцию, которая добавит дополнительные функции как вам, так и другим пользователям.

Что такое расширения в Chrome?

Прежде чем приступить к созданию своего первого расширения, вам, вероятно, будет полезно иметь общее представление о том, что такое расширение Chrome и как на самом деле работают расширения браузера Chrome.

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

На самом базовом уровне расширение Chrome — это всего лишь HTML, CSS и JavaScript, которые позволяют вам добавлять некоторые функции в Chrome; через некоторые API-интерфейсы JavaScript, предоставляемые Chrome. Расширение — это просто веб-страница, размещенная в Chrome и имеющая доступ к некоторым дополнительным API. – Джон Сонмез

Какое расширение для Chrome мы делаем?

Что-то похожее на расширение White Rabbit SEO Tools для Chrome; мы создадим плагин для браузера, который предоставляет только один из инструментов, доступных в полном плагине, который мы создали.

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

А было бы неплохо, если бы существовало расширение для Chrome, которое позволяло бы вам использовать GTmetrix и проверять скорость любого сайта, который вы просматриваете, просто нажав кнопку?

Это отличный пример для нашего руководства и видеоруководства. Объединение основных файлов и структуры любого плагина для браузера Chrome; помимо использования некоторых удобных функций JavaScript, для легкой интеграции с другими онлайн-инструментами и приложениями.

Как создать расширение для Chrome

В этом руководстве я покажу вам, как создать базовый подключаемый модуль Chrome, называемый расширением Browser Action. Этот тип расширения помещает значок кнопки на панель инструментов браузера Chrome; при нажатии на которую открывается HTML-страница, а затем при необходимости активируется JavaScript.

Большая часть кода для этой статьи была впервые опубликована в публикации Джона Сонмеза под названием "Как создать расширение Chrome за 10 минут". Однако я обнаружил, что его часть была неполной и не соответствовала последним требованиям Chrome.

Шаг 1. Создайте папку проекта расширения Chrome

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

Шаг 2. Определите структуру файла

Далее вам понадобятся несколько файлов значков для расширения вашего браузера. Создайте следующие версии своего значка в каталоге «GTmetrix Extension».

  • icon.jpg
  • icon16.jpg
  • icon32.jpg
  • icon48.jpg
  • icon128.jpg

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

Верхний совет. Убедитесь, что исходный файл значка имеет размер не менее 128 × 128, тогда он подойдет для всех версий.

Теперь нам нужно создать следующие новые файлы в каталоге расширения:

  • Манифест. Для всех расширений Chrome требуется файл манифеста. Файл манифеста сообщает Chrome все, что ему нужно знать, чтобы правильно загрузить расширение в браузере Chrome. Итак, мы создадим файл manifest.json и поместим его в созданную нами папку. Вы можете пока оставить файл манифеста пустым.
  • HTML-страница. Далее нам понадобится HTML-страница, чтобы показать, когда пользователь нажимает кнопку «Действие в браузере», поэтому мы создадим файл popup.html.
  • JavaScript. Из-за ограничений безопасности мы не можем вставлять встроенный JavaScript в наши HTML-файлы внутри наших расширений Chrome; поэтому вместо этого нам нужно создать отдельный файл для хранения любого кода JavaScript, который нам нужен, и мы будем ссылаться на него из файла HTML. Создайте файл с именем popup.js в нашем каталоге «GTmetrix Extension».

Шаг 3. Напишите основной файл манифеста

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

Откройте файл manifest.json в текстовом редакторе и введите следующий код:

Большинство полей в этом файле JSON говорят сами за себя, поэтому я не буду тратить ваше время на все объяснения. но обратите внимание на раздел browser_action, где мы указываем значок по умолчанию и какая HTML-страница должна открываться при нажатии кнопки «Действие в браузере».

Вы также заметите раздел разрешений, в котором указано, что нам необходимо разрешение на доступ к activeTab. Это необходимо для того, чтобы получить URL-адрес текущей вкладки браузера и передать его на страницу теста скорости GTmetrix. Большинство API, предоставляемых Chrome для использования с вашими расширениями, требуют от вас указания необходимых разрешений.

Шаг 4. Создайте пользовательский интерфейс расширения Chrome

Следующий шаг — создать пользовательский интерфейс, который будет отображаться при нажатии на наше действие в браузере. Это будет выглядеть примерно так:

Наш пользовательский интерфейс будет очень простым и будет состоять из текста «GTmetrix Speed ​​Test», за которым следует кнопка, которую пользователь может нажать, чтобы выполнить анализ на текущей странице.

Откройте страницу popup.html в текстовом редакторе и добавьте следующее:

На этом этапе вы можете добавить в файл любой дополнительный HTML-код; может быть цвет фона, изображение заголовка, цвет текста или содержимое нижнего колонтитула и авторские права, если желание вас захватит. Измените стиль кнопки, если хотите.

Вы заметите, что в этот HTML-код включен скрипт popup.js. Здесь мы поместим логику JavaScript для нашего расширения, она будет выполняться при нажатии кнопки с идентификатором checkPage.

Шаг 5. Реализуйте логику JavaScript

Последнее, что нам нужно сделать для создания подключаемого модуля Chrome, — это реализовать логику, которая должна выполняться, когда пользователь нажимает кнопку «Проверить скорость на GTmetrix» на вкладке браузера. Это может быть любой JavaScript, который вы хотите, но для этого примера руководства мы хотим открыть новую вкладку и запустить анализ скорости страницы GTmetrix.

Здесь мы должны добавить прослушиватель событий, чтобы прослушивать событие щелчка пользователя по кнопке checkPage. Когда эта кнопка нажата, нам нужно создать новую форму. Эта форма должна содержать URL-адрес текущей страницы, отправляет ее, а затем отображает результат в новой вкладке.

Откройте файл popup.js в текстовом редакторе и добавьте следующий код:

Я обновил код из исходного сообщения, чтобы создать и отправить форму, используя букмарклет, представленный на веб-сайте GTmetrix. Джон только что модифицировал код, чтобы он принимал URL-адрес текущей активной вкладки, и мне пришлось его изменить; чтобы расширение работало корректно и запускалось в текущем браузере Chrome.

Как работает этот код?

Если вы изучите приведенный выше код JavaScript, то увидите, что сначала мы регистрируем обработчик события нажатия кнопки checkPage. Когда кнопка нажата, мы получаем текущую выбранную вкладку и выполняем JavaScript для создания формы (с некоторыми скрытыми полями), которая затем отправляется в GTmetrix. Мы добавляем URL-адрес с текущей вкладки, чтобы сообщить GTmetrix, для какой страницы выполнить тест скорости.

Протестировать расширение в локальном браузере Chrome

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

  1. Введите «chrome://extensions» в окне браузера Chrome, чтобы открыть страницу расширений.
  2. В правом верхнем углу включите «Режим разработчика», чтобы разрешить установку распакованных расширений.
  3. Наконец, нажмите «Загрузить распакованное расширение» и перейдите в папку разработки; или просто перетащите папку «GTmetrix Extension» на страницу, чтобы загрузить расширение.

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

Чтобы протестировать новое расширение, перейдите в браузере на страницу, которую вы хотите протестировать с помощью GTmetrics. Затем нажмите кнопку со значком для нашего расширения GTmetrix. Когда откроется HTML-страница, нажмите «Проверить скорость на GTmetrix», и вы должны немедленно увидеть запрос, открытый в новой вкладке, и результаты теста скорости с текущей страницы будут обработаны в ближайшее время (в зависимости от загрузки сервера GTmetrix).

Публикация расширения для браузера

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

Все общедоступные расширения для Chrome публикуются в Интернет-магазине Chrome. Думайте об этом как об эквиваленте Google Play Store для Android или Apple App Store, но только для расширений и тем браузера Chrome.

Чтобы опубликовать расширение браузера в Интернет-магазине Chrome, выполните следующие действия:

  1. Создайте ZIP-файл приложения.
  2. Создайте аккаунт разработчика
  3. Оплатите регистрационный взнос разработчика (в настоящее время 5 долларов США)
  4. Загрузите свое приложение
  5. Выберите платежную систему
  6. Получите ограничения приложения и завершите код.
  7. Получить идентификатор приложения
  8. Получите токен OAuth
  9. Завершить работу приложения
  10. Предоставить содержимое магазина
  11. Опубликуйте свое приложение

Полное описание того, как это сделать, можно найти на собственных страницах Google для разработчиков, посвященных публикации расширений Chrome.

Заключение урока

Мы благодарим Джона за его первоначальный пост о том, как создать расширение Chrome, и надеемся, что эта обновленная версия окажется более полезной в наше время.

Вот оно! Если у вас есть какие-либо проблемы или вопросы, не стесняйтесь спрашивать в комментариях ниже. Не забудьте заглянуть в наш блог, чтобы найти больше бесплатных руководств, подобных этому, о том, как создать работающее расширение Chrome за 10 минут или быстрее.

Я надеюсь, что это обновленное введение в создание расширений Chrome было полезным для вас.

Будьте первым, кто поделится этим!

Основатель и стратег White Rabbit. Ассоциированный член Чартерного института маркетинга, ориентированный на обслуживание клиентов с помощью творческой и этичной бизнес-модели. Цифровой филантроп, уделяющий время поддержке благотворительных групп, проектов и организаций; которые связаны с искусством, охраной дикой природы, местными сообществами и историческими ремеслами.

Читайте также: