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

Обновлено: 06.07.2024

— это встроенные в браузер мини-программы, которые добавляют в браузер новые функциональные возможности, например блокируют неприятную рекламу, включают ночной режим или управляют паролями. В Яндекс.Браузер можно устанавливать расширения, созданные командой браузера, а также расширения из Каталога браузера Opera.

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

Просмотр списка расширений

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

Чтобы открыть список расширений, нажмите → Дополнения .

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

Действия с расширениями

Установить
Включить или выключить
Настроить
Удалить

Вы можете установить расширения из Каталога браузера Opera, совместимого с Яндекс.Браузером.

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

Чтобы получить доступ к настройкам расширения:

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

Предустановленные расширения (Антишок, Блокировка рекламы, Советник, Эфир, Почта и т. п.) удалить нельзя, их можно отключить.

Расширение удалится из файлов браузера, но не пропадет со страницы Дополнения . При включении оно будет скачано и установлено заново.

Значок расширения

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

Скрыть значок
Показать значок
Свернуть несколько значков

Если значок расширения не отображается на панели браузера:

Если значков на панели очень много, их можно свернуть:

Наведите указатель на область между Умной строкой и значками расширений — указатель изменится на двустороннюю стрелку.

Чтобы увидеть все свернутые расширения, нажмите .

Задать горячие клавиши для расширений

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

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

Нажмите и удерживайте одну или несколько служебных клавиш ( Ctrl , Shift , Alt ) и клавишу по вашему выбору.

Какие расширения не поддерживает Яндекс.Браузер?

Расширение является вредоносным и находится в черном списке.

Расширение несовместимо с браузером технически.

Инсталлятор сообщает об успешной установке расширения, но оно не появляется на странице дополнений.

Расширение несовместимо с браузером технически.

Расширение является вредоносным и находится в черном списке.

Расширение несовместимо с браузером технически.

Инсталлятор сообщает об успешной установке расширения, но оно не появляется на странице дополнений.

Расширение несовместимо с браузером технически.

Как добавить новое расширение в Яндекс.Браузер?

После установки расширение появится в блоке Из других источников .

Проблемы с расширениями

Попробуйте переустановить его. Откройте в браузере страницу browser://extensions/ . Найдите нужное расширение и нажмите кнопку Удалить . Затем вновь установите его со страницы browser://tune или из источника, откуда вы раньше установили это расширение.

Просмотр списка расширений

Чтобы открыть список расширений, нажмите → Дополнения .

Действия с расширениями

Установить
Включить или выключить
Настроить
Удалить

Нажмите → Дополнения .

Вы можете установить расширения из Каталога браузера Opera, совместимого с Яндекс.Браузером.

Нажмите → Дополнения .

Чтобы получить доступ к настройкам расширения:

Нажмите → Дополнения .

Настройка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Теперь рассмотрим 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 позволяет вывести страницу расширения на основе несколько типов сопоставлений без необходимости получать права доступа к хосту Поэтому он нужен нам, чтобы расширение работало в браузере!

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

Расширение

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

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

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

Публикация

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

Заключение

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

Дайте знать, что вы думаете по данной теме в комментариях. За комментарии, подписки, лайки, отклики, дизлайки огромное вам спасибо!

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

В этой статье мы узнаем, как легко и просто создать расширение Google Chrome без необходимости ковыряния в кодах и программных API. Всего за несколько минут мы сделаем и опубликуем в Chrome Web Store браузерное расширение для вашего сайта, которое будет информировать пользователей о новых обновлениях и обеспечивать быстрый переход читателей на ваш ресурс.

Все элементы в магазине Chrome Web Store делятся на приложения и расширения. Мы сделаем и то, и другое. Созданное нами приложение будет отображаться в виде значка на новой вкладке браузера и даст возможность быстро запустить ваш сайт. Расширение представляет собой специальную кнопку на панели инструментов, щелчок по которой вызовет появление панели с последними обновлениями сайта.

Собираем приложение для Google Chrome

1. Скачиваем архив с шаблоном расширения по этой ссылке.

2. Разархивируем в любое удобное вам место. Внутри находится файл manifest.json и иконка icon.jpg.

3. Открываем файл manifest.json в блокноте и редактируем его содержимое. Вам необходимо в строке 2 ввести имя своего сайта, в строке 3 — его описание (до 132 символов), в строке 5 и 7 — адрес сайта. Сохраняем сделанные изменения.

4. Меняем иконку из архива на свое изображение в формате PNG, размером 128*128.

Собираем расширение для Google Chrome

Хотя расширение функционально существенно отличается от приложения, алгоритм его сборки не намного сложнее.

1. Получаем заготовку расширения по этой ссылке.

2. Разархивируем. Открываем в блокноте файл manifest.json и вставляем название своего сайта, его краткое описание и заголовок окна расширения (строки 2, 3 и 8).

3. Открываем файл labnol.js и указываем адрес RSS потока своего сайта.

4. Заменяем иконку из архива на свое изображение в формате PNG размером 128*128.

Публикация

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

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

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

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

В этом руководстве мы напишем расширение для Сhrome с помощью Parcel.js для упаковки и просмотра результатов, а также TailwindCSS для оформления. Кроме того, мы отделим стилизацию расширения от веб-сайта, чтобы избежать конфликта CSS.

Есть несколько типов расширений для Chrome, достойных упоминания:

Скрипты содержимого. Наиболее распространённый тип. Они запускаются в контексте веб-страницы и могут изменять её. Именно такое расширение мы и будем создавать.
Выпадающее окно (popup). Использует иконку справа от адресной строки, чтобы открыть окно с каким-то HTML.
UI с опциями. Пользовательский интерфейс для настройки параметров в качестве расширения. Получить доступ к нему можно, щелкнув правой кнопкой мыши по значку расширения и выбрав пункт “Параметры” или перейдя на страницу расширения из списка расширений Chrome: chrome://extensions .
Расширение DevTools. Добавляет функциональность в инструменты разработчика. Оно может добавлять новые панели интерфейса, взаимодействовать с проверяемой страницей, получать информацию о сетевых запросах и многое другое — документация Google Chrome.

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

Упаковываем расширение с Parcel.js V2

Добавляем манифест

Прежде чем углубиться в детали работы расширения Chrome, установим и настроим TailwindCSS.

Подключаем TailwindCSS

TailwindCSS — это CSS-фреймворк, применяющий служебные классы низкого уровня для создания переиспользуемых и настраиваемых компонентов интерфейса. Tailwind устанавливается двумя способами, самый распространённый — установка с помощью NPM. Кроме того, сразу же стоит добавить autoprefixer и postcss-import :

Они нужны, чтобы добавить префиксы поставщиков к стилям и иметь возможность писать конструкции @import "tailwindcss/base" , импортируя файлы Tailwind прямо из node_modules .

Теперь, когда всё установлено, давайте создадим файл postcss.config.js в корневом каталоге. Этот файл — конфигурация для PostCSS. Вставим в него такой код:

Порядок плагинов здесь имеет значение! Это всё, что нужно, чтобы начать использовать TailwindCSS в вашем расширении. Начинаем. Создадим файл style.css в папке src и импортируем в него стили Tailwind:

Очищаем CSS с помощью PurgeCSS

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

Теперь у нас есть tailwind.config.js . Чтобы удалить неиспользуемый CSS, добавляем пути ко всем нашим файлам JS в поле конфигурации purge :

Теперь CSS будут очищены, а неиспользуемые стили удалены при сборке для продакшна.

Включаем горячую перезагрузку

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

Чтобы использовать его, создадим файл background.js в папке src и импортируем в этот файл crx-hotreload :

Наконец, добавим указатель на background.js в manifest.json , чтобы он мог работать с нашим расширением: горячая перезагрузка в продакшне отключена по умолчанию:

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

Типы скриптов расширения Chrome

Как уже упоминалось, у расширений Chrome есть несколько типов скриптов:

Скрипты содержимого — это сценарии, которые выполняются в контексте посещаемой веб-страницы. Вы можете запустить любой код JavaScript, в противном случае доступный на любой обычной веб-странице, включая доступ к DOM и манипулирование им.
Фоновые скрипты — это место, где вы можете реагировать на события браузера с доступом к API расширения.

Добавляем скрипт содержимого

Создадим файл content-script.js в папке src . И добавим HTML-форму в только что созданный файл:

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

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

Теневой хост — это любой элемент DOM, к которому мы хотели бы присоединить теневое дерево. Теневой корень — это то, что возвращается из attachShadow , а его содержимое — то, что визуализируется.

Будьте осторожны: единственный способ стилизовать содержимое теневого дерева — встроить стили. Parcel V2 из коробки есть функция, благодаря которой вы можете импортировать содержимое одного пакета и использовать его в качестве скомпилированного текста внутри ваших файлов JavaScript. Именно это мы и сделали со своим пакетом style.css . Parcel заменит его во время упаковки.

Теперь мы можем автоматически встроить CSS в Shadow DOM во время сборки. Конечно, мы должны сообщить браузеру о файле content-script.js , в котором встраивается style.css . Для этого включаем скрипт содержимого в манифест. Обратите внимание на секцию content-scripts ниже первого блока:

Чтобы обслуживать наше расширение, добавим несколько скриптов к package.json :

Наконец, запускаем yarn watch , переходим в chrome://extensions и убеждаемся, что в правом верхнем углу страницы включен режим разработчика. Нажмите на кнопку “Загрузить распакованный” и выберите папку dist в разделе demo-extension .

Подготовка к публикации

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

Если у вас ещё не установлен zip, пожалуйста, выполните команду:

На MacOS: brew install zip .
На Linux: sudo apt install zip .
На Windows: powershell Compress-Archive -Path .\\dist\\ -Destination .\\chrome-extension.zip .

Заключение

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

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