Создание моего первого расширения Chrome

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

Параметр

Что необходимо знать:

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

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

Создание моего первого расширения Chrome

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

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

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

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

Изучите:

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

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

Создание моего первого расширения Chrome

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

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

Создание моего первого расширения Chrome

Файл 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 действительно могут помочь с обратными вызовами и прослушивателями!

Создание моего первого расширения Chrome

Я добавила кучу «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.

Хранилище

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

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

Declarative Content

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

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

Расширение

Создание моего первого расширения Chrome

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

Создание моего первого расширения Chrome

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

Создание моего первого расширения Chrome

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

Публикация

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

Заключение

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *