Как сделать расширение для google chrome: Как сделать расширение для Google Chrome и немного улучшить UX на главной странице почты — Разработка на vc.ru

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

2023-02-03

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

• Настройка
• Документация
• Отладка
• Функционал Eye Rest
• API
  • Таймеры
  • Фоновые скрипты
• Другие API
  • Windows
  • Хранилище
  • Declarative Content
• Расширение
• Публикация
• Заключение

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

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

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

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

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

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

Изучите:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вадим Дворниковавтор-переводчик статьи «Creating My First Chrome Extension»

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

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

Содержание

• Руководство
  • Начало
  • Итоги
• Полезные ссылки

Руководство

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

• У вас есть базовые навыки программирования, хотя бы с JavaScript, HTML и основы работы с CSS.
• Или же огромное желание со всем разобраться.

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

А сейчас же мы разберем процедуру более кратко.

Начало

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

Когда базовые условия поставлены, нужно их записать на том языке, что будет понят Гугл Хромом. А он в случае с расширениями оперирует JSON. Так что итоговый вариант нужно сохранять в файле manifest.json. Правильность исходного кода следует проверить с помощью сервиса JSONLint.

Теперь разберем все на конкретном примере. В качестве задаче возьмем такую установку: переход на главную страницу нашего сайта (CHROMEUM. RU) по одному клику. Код будет выглядеть следующим образом:

Тут имеются параметры:

• manifest_version – подключенная версия скрипта.
• name – заголовок для расширения
• description – подробное описание для него
• version – текущая версия.
• icons – ссылки на иконки. В данном случае используется только стандартная, с размером 128х128.
• permissions – предоставляемые расширения.

Файл manifest.json готов, можно переходить к сборке плагина. Для этого:

1. Создайте на компьютере отдельный каталог, в названии только английские буквы, цифры или символы.
2. Переместите туда файл.
3. Дополнительно закиньте иконку. В данном случае она идет с расширением .png и названием 128.png. В коде можно прописать и другой вариант.

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

Следующий этап – отладка. Для этих целей нужно установить дополнение в Гугл Хром:

1. Запускаем браузер и кликаем на значок вызова меню управления.
2. Наводим курсор мыши на пункт «Дополнительные инструменты».
3. В подменю выбираем пункт с названием «Расширения».
4. В верхней панели на открывшейся страничке нужно включить ползунок «Режим разработчика».
5. Теперь щелкните ЛКМ по пункту «Загрузить распакованное…».
6. В файловом обозревателе выберите каталог, где хранится manifest.json.
7. Кликните на кнопку подтверждения.

В результате в разделе «Приложения Chrome» появится новый элемент. Самое время проверить работоспособность нашей разработки. Для этого:

1. Переходим на страницу «Приложения» (ссылка – chrome://apps/).
2. Кликаем по картинке с подписью Access to Chromeum.ru.
3. Дожидаемся загрузки нашего сайта.

Как видите, все работает, а значит, дополнение готово для публикации в общем магазине.

Итоги

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

Полезные ссылки

Прикрепляем ссылки, которые будут полезны в случае написания плагина для интернет-обозревателя Chrome:

Getting Started Tutorial – вводная информация по тому, как следует структурировать json-скрипт. Все описано на конкретных примерах и максимально детально. Есть инструкции по внедрению базовых инструкций, подключению пользовательского интерфейса, логике кода и установке своего плагина в браузер от Гугл.

Overview – детальные сведения по структуре и архитектурным особенностям расширений для Chrome, интеграции API, доступу к тем или иным функциям программы (приватный просмотр, сохранение трафика и т. д.).

Debugging Extensions – основы отладки, распространенные ошибки исполнения для аддонов, просмотр логов и многое другое.

Publish in the Chrome Web Store – подготовка расширения к публикации в интернет-магазине Chrome, создание аккаунта разработчика и так далее.

Develop Extensions – статья с огромным количеством ссылок на материалы и инструкции от Google, которые будут полезны при разработке.

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

Добро пожаловать

Добро пожаловать в руководства по началу работы.

Опубликовано в 4 октября 2022 г.

Содержание

• Концепции разработки расширений
• Руководства по расширениям
• Поделитесь своим отзывом

Добро пожаловать в Руководство по началу работы! Цель этой страницы — описать каждую статью и поделиться своими отзывами.

# Концепции разработки расширений

Расширения 101

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

Основы разработки

Знакомит с рабочим процессом разработки расширений путем создания примера «Hello, Extensions». Он проходит через загрузку расширения во время разработки, поиск журналов и ошибок, выбор структуры проекта и использование Typescript.

# Учебники по расширениям

Время чтения

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

Режим фокусировки

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

Диспетчер вкладок

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

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

Каждое руководство включает следующие разделы:

• Задача, которую будет выполнять расширение.
• Уроки, которые будут рассмотрены.
• Что нужно знать перед началом.
• Пошаговые инструкции по сборке расширения.
• Как загрузить и протестировать расширение.

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

# Поделитесь своим отзывом

Мы рады услышать от вас! Вы можете внести свой вклад двумя способами:

Улучшить существующие руководства

Если вы заметили что-то неправильное или непонятное, сообщите об ошибке в наш репозиторий GitHub.

Запросить руководство для начинающих

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

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

Обновлено Вторник, 4 октября 2022 г. • Улучшение статьи

Расширения Chrome 101 — Разработчики Chrome

Расширения 101

Изучите основные принципы разработки расширений Chrome.

Опубликовано 4 октября 2022 г.

Содержание

• Что такое расширения?
• Веб-технологии
• API расширений Chrome
• Файлы расширений
• Разработка расширения
• Разработка функций расширения
• Распространение расширения
• 🚀 Готовы начать сборку?

На этой странице описывается, что такое расширение, и приводится краткое введение в разработку расширений для Chrome. Он также включает ссылки на учебные пособия для начинающих.

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

Расширения Chrome расширяют возможности просмотра, добавляя в браузер Chrome функции и возможности, предоставляя такие вещи, как:

• Инструменты повышения производительности.
• Обогащение содержимого веб-страницы.
• Агрегация информации.

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

# Веб-технологии

Расширения написаны с использованием тех же веб-технологий, которые используются для создания веб-приложений:

• В качестве языка разметки содержимого используется HTML.
• Для оформления используется CSS.
• JavaScript используется для сценариев и логики.

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

# API-интерфейсы расширений Chrome

Расширения могут использовать все API-интерфейсы JavaScript, предоставляемые браузером. Что делает расширения более мощными, чем веб-приложения, так это их доступ к API Chrome. Вот лишь несколько примеров того, что могут делать расширения:

• Изменять функциональность или поведение веб-сайта.
• Разрешить пользователям собирать и упорядочивать информацию на веб-сайтах.
• Добавьте функции в Chrome DevTools.

Полный список возможностей API см. в разделе Обзор разработки расширений.

# Файлы расширений

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

Манифест

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

Работник службы

Работник службы расширений обрабатывает и прослушивает события браузера. Существует множество типов событий, таких как переход на новую страницу, удаление закладки или закрытие вкладки. Он может использовать все API-интерфейсы Chrome, но не может напрямую взаимодействовать с содержимым веб-страниц; это работа скриптов контента.

Сценарии содержимого

Сценарии содержимого выполняют Javascript в контексте веб-страницы. Они также могут читать и изменять DOM страниц, в которые они внедряются. Сценарии содержимого могут использовать только подмножество API Chrome, но могут косвенно обращаться к остальным, обмениваясь сообщениями с работником службы расширения.

Всплывающее окно и другие страницы

Расширение может включать различные HTML-файлы, такие как всплывающее окно, страница параметров и другие HTML-страницы. Все эти страницы имеют доступ к Chrome API.

Посетите раздел «Архитектура расширений и проектирование пользовательского интерфейса» для более глубокого изучения.

💡 У всех расширений есть всплывающее окно?

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

# Разработка расширения

Несмотря на то, что веб-приложения и расширения во многом используют одни и те же технологии, процесс разработки расширений отличается. Ознакомьтесь с основами разработки, чтобы создать пример «Hello, Extensions» и ознакомиться с рабочим процессом разработки расширений.

# Разработка функций расширения

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

💡 Что именно означает «одноцелевое»?

«Одна цель» может относиться к одному из двух аспектов расширения:

1. Расширение может иметь единственную цель, ограниченную узкой областью внимания или предметом . Например, «заголовки новостей», «погода», «сравнение покупок».

2. Или расширение может иметь единственную цель, ограниченную узкой функцией браузера . Например, «новая вкладка», «управление вкладками» или «поиск».

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

Дополнительную информацию см. в Руководстве по обеспечению качества расширений.

# Распространение вашего расширения

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

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

Что делать, если я хочу распространять расширение только внутри своей организации?

Некоторые организации используют политики предприятия для установки расширений на устройства своих пользователей.