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

Браузерное расширение своими руками

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

Что будем делать?

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

Однако эти комментарии находятся в общей ленте и сразу не видны. Мы собираемся решить эту проблему.

Мы создадим расширение Transcribers of Reddit (TOR), которое будет искать и перемещать комментарии с расшифровкой на верх общего списка, а также добавлять aria-атрибуты для скрин-ридеров. Мы даже пойдем чуть дальше и добавим возможность изменить цвет фона и установить рамку для этих комментариев, чтобы улучшить визуальный контраст.

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

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

Рабочая директория

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

Создадим новую папку для проекта — можно назвать ее transcribers-of-reddit . А внутри нее папку src для исходного кода.

Манифест

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

Нашей точкой входа будет файл manifest.json в папке src . Добавим в него для начала три свойства:

Поле manifest_version — это версия используемой спецификации, она определяет, какие API доступны приложению. На данный момент самая свежая версия — mv3.
Поле name — название расширения, которое будет отображаться, например, в Chrome Web Store.
Поле version — это версия самого расширения. Она указывается в виде строки, которая должна содержать только цифры и точки. Можно указывать мажорные, минорные версии, а также патчи (например, 1.3.5).

Больше информации

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

Добавим также иконки приложения в разных разрешениях и урл домашней страницы проекта.

Поле description не должно быть длиннее 132 символов. , указанные в поле icons , используются во множестве мест. Предпочтительно загружать файлы png-формата. Иконки для нашего проекта вы можете загрузить прямо из его репозитория.
В поле homepage_url можно указать любую страницу, которая содержит информацию о приложении. Она будет отображаться в графе Open extention website на странице управления расширением.

Разрешения

Большой плюс расширений — это возможность взаимодействовать напрямую с браузером. Но для этого нужно явно указать, какие API мы собираемся использовать, чтобы получить разрешения. Это нужно сделать в секции permissions файла manifest.json:

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

Кроме того, мы должны отслеживать пользовательскую навигацию по текущей странице — разрешение webNavigation . Дело в том, что Reddit — это одностраничное приложение (SPA), которое не вызывает событий перезагрузки страниц. Нам нужно поймать взаимодействие и загрузку комментариев на страницу.

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

Управление переводами

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

Определяем, какой язык будет использоваться по умолчанию (английский):

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

Сами переводы определяются в папке _locales . Для каждого создается отдельная папка, внутри которой находится файл messages.json:

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

Определяется ключ перевода (translation key), или идентификатор фразы, по которому мы будем к ней обращаться.
Для каждого ключа указываются свойства: message , description и placeholders .

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

Вот пример перевода одной фразы:

Схема использования плейсхолдеров может показаться довольно сложной.

Для начала мы должны определить, какие части сообщения (фразы) являются динамическими. Их может и не быть. Если такие фрагменты нашлись, нужно обернуть их символами $ .

Каждый такой фрагмент нужно отдельно описать в поле placeholders. Это немного неинтуитивно, но Chrome хочет знать, какое значение следует вставить вместо плейсхолдера. Так как мы хотим использовать динамические (неопределенные) значения, нужно использовать специальную конструкцию $1 , которая является ссылкой на вставленный контент.

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

Давайте добавим переводы в наш проект. Это оригинальный английский файл, а вы можете добавить столько языков, сколько захотите. Например, для русского нужно создать папку ru , а для немецкого de .

Возможно, вы хотите знать, почему мы не указали API интернационализации в списке разрешений.

Chrome довольно непоследователен в этом отношении — вам не нужно указывать все необходимые разрешения, например, chrome.i18n. Некоторые другие разрешения требуется указывать, но пользователь, который устанавливает ваше расширение о них ничего не знает. Некоторые разрешения вообще являются «гибридными», вы можете использовать некоторые их функции без объявления, но другие обязательно нужно указать в манифесте. Чтобы разобраться во всем этом, загляните лучше в документацию.

Интернационализация манифеста

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

Это специальный синтаксис, который позволяет ссылаться на фразы в messages.json по их идентификатору. Например, строка __MSG_name__ использует фразу с идентификатором name .

Интернационализация HTML-страниц

Чтобы перевести тексты на страницах самого расширения, потребуется добавить немного JavaScript:

Этот код также использует идентификатор фразы из файла messages.json.

Чтобы передать динамические плейсхолдеры, используйте второй параметр метода:

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

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

Вот так выглядит сам код:

При выполнении этот скрипт найдет все элементы с атрибутом data-intl , найдет соответствующую указанному идентификатору переведенную фразу и вставит полученный текст в innerHTML элемента.

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

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

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

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

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

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

Выпадающее меню

Напишем HTML-код выпадающего меню, а также подключим туда CSS- и JS-файлы.

Заголовок первого уровня будет содержать название расширения и его текущую версию, а кнопка будет открывать страницу настроек. Обратите внимание, для кнопки установлен атрибут data-intl , то есть ее текст будет вставлен автоматически нашим вспомогательным скриптом.

Текст заголовка мы установим отдельно в файле popup.js . Там же будет обработчик клика по кнопке:

Чтобы получить доступ к данным манифеста, это скрипт использует runtime API браузера Chrome. Его метод getManifest возвращает JSON-объект (этот метод не требует специальных разрешений).

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

Стили меню в файле popup.css :

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

Страница настроек

Страница с пользовательскими настройками создается точно так же.

Начинаем с разметки — файл options.html :

Сейчас здесь нет никаких обещанных настроек, только подготовленный для них блок. Вставлять их мы будем с помощью JavaScript (в файле options.js ).

Сначала определим дефолтные значения и получим ссылку на DOM-элемент контейнера:

Теперь нужно загрузить сохраненные ранее настройки. Для этого нам понадобится storage API (который мы уже зарегистрировали ранее в манифесте).

Можно сохранять данные локально ( chrome.storage.local ) или синхронизировать их между разными устройствами пользователя ( chrome.storage.sync ). Для простоты будем использовать локальное хранилище.

Для получения данных предназначен метод get, который принимает два аргумента: ключ, с которым связано нужное значение, и коллбэк для обработки полученных данных.

У нас ключ — это строка ‘settings’ , но можно также передавать массив строк, если требуется загрузить несколько различных настроек.

Полученные из хранилища данные будут переданы функции-коллбэку:

Рендер опций вынесен в отдельную функцию createOption() :

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

Так как мы храним настройки в виде объекта, следует использовать spread-оператор, чтобы обновлять только нужный параметр, сохраняя актуальные значения прочих.

Стили страницы в файле options.css:

И конечно же, мы должны зарегистрировать новую страницу в манифесте:

При необходимости вы можете оформить страницу опций в виде модального диалога. Для этого нужно установить свойство open_in_tab: false .

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

Мы сделали всю подготовительную работу, и теперь неплохо было бы проверить, работает ли наше расширение.

Перейдите на страницу chrome://extensions и включите режим разработчика (в правом верхнем углу).

Появятся три кнопки, нам нужна первая — Загрузить распакованное расширение. Кликните на нее и в появившемся окне выберите папку src, в которой хранятся все файлы нашего проекта.

После этого наше расширение появится в списке в статусе Установлено. Также его иконка появится в верхней панели браузера рядом с адресной строкой (его можно найти, кликнув на иконку паззла ?) . Если вы нажмете на нее, то появится выпадающее меню с кнопкой:

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

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

Основной скрипт

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

Создайте новый файл comment.js внутри директории js .

Теперь его нужно добавить в манифест в секцию content_scripts :

Это массив, каждый элемент которого состоит из двух частей:

matches — содержит массив урлов, на которых браузер должен запускать наше расширение. Мы указываем всего один урл домен верхнего уровня — www.reddit.com , а изменяющиеся части обозначаются звездочками.
js — содержит массив скриптов, которые нужно запустить на подходящих урлах.

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

Давайте приступим уже к программированию.

Прежде всего добавим несколько констант в файл comment.js , в которых сохраним селекторы DOM-элементов и регулярные выражения для дальнейшей работы.

Объект CommentUtils содержит набор тестовых функций для определения, содержит ли пост «ToR-комментарии» и существует ли вообще блок комментариев на странице.

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

Но в большинстве случаев переходы осуществляются внутри SPA. Чтобы отловить их, мы можем добавить слушатель сообщений, используя runtime API .

Теперь нам нужно написать реализацию функций moveComment и waitForComment .

moveComment — находит в общем списке «ToR-комментарии» с транскрипцией медиа-ресурсов и перемещает их в начало списка. Также при наличии соответствующих настроек она изменяет цвет фона и рамки этих комментариев (это проверяется с помощью уже знакомого нам метода get ).

Функция applyWaiAria добавляет комментариям aria -атрибуты для улучшения доступности для скринридеров. Мы также используем вспомогательную функцию uuidv4 для генерации уникальных идентификаторов.

Функция waitForComment ожидает, пока комментарии загрузятся, и после этого вызывает коллбэк, который был ей передан. Для отслеживания используется API браузера MutationObserver.

Добавляем сервис-воркер

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

Создайте новый файл sw.js внутри директории src (важно, чтобы он находился в корне проекта).

Сразу же зарегистрируем его в манифесте:

Начнем, как обычно, с констант для сообщений и типов страниц:

Мы будем следить за историей навигации браузера ( onHistoryStateUpdated ). Нужное нам событие будет вызываться каждый раз, когда SPA обращается к History API при обновлении контента страницы без перезагрузки.

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

Готово!

Перейдите в менеджер расширений (chrome://extensions) и перезапустите наше расширение, чтобы все изменения применились.

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

Расширение Transcribers of Reddit находит комментарии с транскрибацией изображения, поднимает их на верх списка и выделяет красной рамкой и фоном

Заключение

Создавать браузерные расширения совсем несложно, как вы только что убедились. В них нет ничего особенного — те же самые HTML, CSS и JavaScript, которые вы пишете каждый день, плюс совсем немного магии в manifest.json .

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

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

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

Шаг 1: Создание папки, манифеста и логотипа

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

Создание папки

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

Создание файла манифеста

Откройте текстовый редактор, такой как Блокнот.
Наберите код JSON для манифеста. Общий формат файла должен быть следующим:

«name»: «Example Extension Name»,

«version»: «1.0»,

«description»: «Description of Example Extension»,

«manifest_version»: 2,

«permissions»: [

«background»: <

«scripts»: [«background.js»]

«browser_action»: <

«default_popup»: «popup.html»,

«default_icon»: «icon.png»

Сохраните в текстовом формате как manifest.json. Убедитесь, что расширение файла правильно указано.

Создание логотипа

Создайте изображение, которое лучше всего отражает ваше расширение.
Для создания образа используйте PNG или JPEG.
Сохраните файл в корневой папке расширения.

Шаг 2: Написание кода расширения

Для создания кода расширения используется HTML, CSS и JavaScript, а также API браузера для интеграции расширения в каждую страницу, на которую пользователь переходит. Нужно написать код, который обрабатывает события расширения и взаимодействует с браузером.

Использование API браузера

Укажите необходимые API-функции в файле манифеста.
Пример использования API-функции в JavaScript:

chrome.browserAction.onClicked.addListener(function(tab) <

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

Шаг 3: Установка расширения в различных браузерах

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

Google Chrome

Откройте интернет-магазин Chrome.
В левой колонке нажмите на Расширения.
Выберите нужное расширение из каталога.
Нажмите Установить рядом с названием расширения.

Яндекс Браузер

Откройте страницу расширений в разделе Дополнения.
Найдите нужное расширение и нажмите на + Добавить в Яндекс Браузер.
Ознакомьтесь со списком данных, к которым расширение получит доступ.

Opera

Нажмите на ссылку Get more extensions (Загрузить расширения) на боковой панели.
Перейдите в раздел расширений на сайте addons.opera.com/.
Выберите нужное расширение и нажмите Install.

Полезные советы и выводы

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

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

Как установить расширение из Гугла в оперу

Для установки расширения из магазина Google Chrome в браузер Opera необходимо выполнить несколько простых шагов. Сначала откройте браузер Opera и зайдите в магазин расширений. Затем найдите в нем расширение «Install Chrome Extensions» и установите его. После успешной установки вы можете переходить в магазин расширений Google Chrome и устанавливать любые расширения, которые вам нужны. Теперь вы можете наслаждаться всеми возможностями, предоставляемыми расширениями из магазина Google Chrome, прямо в браузере Opera. Это очень удобно, так как вы можете использовать любимые расширения в браузере, который вам нравится больше, без необходимости искать альтернативные решения.

Как добавить расширение из хрома в оперу

Для того чтобы установить расширение из хрома в оперу, нужно в строке поиска написать «Install Chrome Extensions» или «Установка расширений Chrome», а затем нажать клавишу «Enter». Никаких дополнительных действий не требуется. Теперь вы можете устанавливать расширения Chrome в оперу. Это очень удобно, так как разработчики часто создают одни и те же расширения как для хрома, так и для оперы. Если у вас уже есть скачанное расширение из хрома, просто установите его в оперу. Это поможет ускорить работу в браузере, а также предоставит вам широкие возможности и выбор в использовании подходящих для вас расширений. Таким образом, установка расширений Chrome в опере — простой и удобный способ обогатить браузер разнообразными функциями.

Как перенести расширения в опере

Для добавления расширений в браузер Opera можно воспользоваться несколькими способами. Например, на главной странице боковой панели нужно нажать на значок плюс и выбрать ссылку «Загрузить расширения». Она перенаправит на официальный сайт addons.opera.com, где можно найти разнообразные расширения, созданные сообществом Opera. Среди них есть утилиты для блокировки рекламы, изменения дизайна страниц и многое другое. Достаточно нажать на нужное расширение и нажать кнопку установки. Также можно легко управлять уже имеющимися расширениями, открыв их настройки и изменяя их параметры в соответствии с потребностями пользователя. Все это позволяет сделать работу в интернете проще и удобнее.

Как изменить путь установки в опере

Чтобы изменить путь установки в браузере Opera, нужно выполнить несколько простых действий. Сначала откройте окно настроек, для этого нажмите на значок «О», расположенный в левом верхнем углу экрана, и выберите пункт «Настройки». Далее перейдите на вкладку «Браузер» и найдите раздел «Загрузки». Нажмите на кнопку «Изменить…», чтобы выбрать новую папку для сохранения загруженных файлов. Откроется окно проводника, в котором нужно выбрать нужную папку и нажать кнопку «Выбрать». Теперь все загружаемые файлы будут сохраняться в указанной папке. Не забудьте сохранить изменения, нажав на кнопку «ОК», чтобы они вступили в силу. Вот и все, путь установки в Opera изменен!

Для создания расширения для браузера, нужно выполнить несколько простых шагов. Начните с того, чтобы создать папку на своем компьютере для хранения файлов приложения. Дайте приложению имя и создайте файл манифеста в формате JSON. В этом файле должны быть перечислены все необходимые компоненты, такие как название и описание расширения, версия приложения, доступные страницы для расширения и много другое. Файл манифеста нужно поместить в созданную папку. Теперь можно создать логотип, который будет отображаться в браузере. После этого, нужно написать код расширения на языке программирования, например на JavaScript, в соответствии с задачами корректной работы расширения и функционалом, который оно должно осуществлять. После написания кода, остается лишь убедиться, что приложение функционирует правильно и запаковать расширение в формате zip, чтобы загрузить его в браузер.

Делаем своё расширение для браузера за 10 минут

В конце 2020 года мы делали проект со снежинками — писали специальный скрипт, который запускал падающий снег на сайтах. Если бы мы хотели сделать такой снег на любом своём сайте, это не составило бы труда: добавляешь скрипт в код страницы, и готово.

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

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

�� Что такое расширение

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

Примеры того, что может сделать расширение:

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

В этой статье

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

Манифест

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

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

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

<
«name»: «Запускаем снежинки на любом сайте»,
«description»: «Проект журнала Код»,
«version»: «1.0»,
«manifest_version»: 3
>

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

Сохраняем файл и всё, расширение готово. Оно ничего не умеет, ничего не делает, зато мы уже можем добавить его в браузер. Для этого запускаем Хром и в адресной строке пишем:

Мы попадаем на страницу, которая нам покажет все установленные расширения: