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

0 ∞

Google предоставляет подробную документацию о том, как сделать расширение для браузера Chrome. И помните, что браузерное расширения - это просто HTML, CSS и JavaScript. Вы можете добавлять библиотеки и фреймворки или разрабатывать код «старомодным» способом.

Содержание

Настройка

Что нужно знать:

  • Обратные вызовы;
  • Таймауты;
  • Инструменты разработчика Chrome.

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

Настройка

Преувеличение

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

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

Документация

Изучите:

  • Руководство Google по расширениям браузера.
  • Руководство по началу работы.
  • Обзор по расширениям Chrome.

Файл manifest.json предоставляет браузеру информацию о расширении. В том числе о том, где расположены файлы и иконки расширения, а также данные для доступа к API. Вот как выглядел мой файл manifest.json:

Документация
Как закрыть окно браузера с помощью JavaScript

https://github.com/jennz0r/eye-rest/blob/master/manifest.json

Изображение, которое описывает архитектуру расширения.

Документация - 2

Файл background.js является обработчиком событий расширения. Он постоянно прослушивает события браузера, которые вы передаете через Chrome Extension API. Google говорит, что эффективный фоновый скрипт загружается только тогда, когда он необходим, и выгружается, когда простаивает.

Popup - это маленькое окно, которое появляется при клике по иконке расширения в меню Chrome. Оно состоит из разметки и скрипта. Вы можете указать браузеру, где его найти, в разделе manifest.json - page_action: { "default_popup": FILE_NAME_HERE }.

Страница параметров является именно тем, что ожидается. На ней отображаются настраиваемые параметры, выводимые пользователю, только когда он кликает правой кнопкой мыши в меню Chrome и выбирают пункт «Параметры» для расширения. Эта страница также состоит из разметки и скриптов. Вы можете указать браузеру, где ее найти, в разделе options_page: FILE_NAME_HERE файла manifest.json.

Content scripts - это крипты, которые будут взаимодействовать с любыми окнами или вкладками, открытыми пользователем. Они также будут взаимодействовать с вкладками и окнами, открытыми расширением.

Отладка

Перед началом не забудьте ознакомиться с руководством по отладке!

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

Например, при тестировании расширения я получила ошибку “This request exceeds the MAX_WRITE_OPERATIONS_PER_HOUR quota”. Оказывается, существуют ограничения на синхронизацию хранимой информации.

Еще одна ошибка, которую я продолжала получать: “Alarm delay is less than minimum of 1 minutes. In released .crx, alarm “ALARM_NAME_HERE” will fire in approximately 1 minutes”. Оказывается, есть минимальные интервалы времени для предупреждений.

Старые добрые console.log действительно могут помочь с обратными вызовами и прослушивателями!

Отладка
Как с помощью JavaScript определить пустые вкладки браузера

Я добавила кучу "console.log", пытаясь убрать предупреждения.

Функционал Eye Rest

Что за расширение я создала? Оно позволяет отдохнуть глазам в течение двадцати секунд каждые двадцать минут.

Схема работы расширения:

  • Если расширение работает,
  • Если пользователь не нажал кнопку «Пауза» во всплывающем окне,
  • Если счетчик во всплывающем окне достиг отметки 00:00, ТОГДА
    • Открывается новое окно с HTML-таймером, И
    • Начинается 20-секундный обратный отсчет в HTML-таймере, И
    • Сбрасывается счетчик всплывающего окна на 20:00.
  • Если HTML-таймер достиг нуля, ТОГДА
    • Закрыть это окно и повторить цикл заново.

Звучит довольно просто, но эти таймеры запутали меня. Чтобы понять суть проблемы, посетите репозиторий GitHub для Eye Rest.

API

Теперь рассмотрим API, который я использовала для создания этого расширения.

Таймеры

Таймеры Chrome  - это в основном setTimeout и setInterval. Для получения дополнительной информации, ознакомьтесь с документацией.

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

Фоновые скрипты

В своем расширении Eye Rest используется два фоновых скрипта: прослушиватель событий и файл вспомогательных функций.

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

Чтобы сделать функцию clearAndCreateAlarm доступной для фонового скрипта, я добавила первый элемент helpers.js в background> scripts в файле manifest.json.

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

Другие API

Windows

Для создания окна таймера используется Windows API. Этот процесс инициируется фоновым скриптом. Я передаю timer.html, type, size, position и другие визуальные опции как параметр URL.

"Живые меню" или "Как сделать красиво с помощью CSS и JavaScript"

Хранилище

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

Обратный отсчет должен изменяться каждую секунду. Он довольно сложный, и для этого нужно много записей. Вот почему я выбрала вариант локального хранилища. Вы можете увидеть, как я получаю и устанавливаю эти переменные в скриптах Background, Helper и Popup. Найдите в коде date, nextAlarmTime и isPaused.

Declarative Content

Declarative Content API позволяет вывести страницу расширения на основе несколько типов сопоставлений без необходимости получать права доступа к хосту Поэтому он нужен нам, чтобы расширение работало в браузере!

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

Расширение

Расширение

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

Расширение - 2

И вот как оно выглядит с новыми стилями.

А вот как выглядят окно таймера и всплывающее окно!

Публикация

Публикация расширения стандартизирована: архивируете файлы, создаете новую или используете существующую учетную запись Google Developer, загружаете файлы, добавляете некоторые данные и платите 5 долларов США.  После этого ваше расширение будет доступно в магазине Chrome. Мое расширение теперь доступно для установки.

Заключение

Создание этого расширения Chrome стоило мне боли в плечах и уставших глаз. Но теперь Eye Rest может напоминать мне, что нужно делать перерыв каждые 20 минут.