Пожалуйста, опишите ошибку

Нашли баг? Помогите нам его исправить, заполнив эту форму

Новое в блоге: Анимация Skeleton

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

Александр Хисматулин
web-разработчик

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

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

Стоит сказать пару слов о том, что же все-таки такое расширение для браузера. На самом деле, расширение — это обычное веб-приложение. Главное, что нужно для того, чтобы веб-приложение работало как расширение — это manifest.json файл. В нем мы описываем специфику работы расширения и некоторые его настройки. Для написания приложения мы будем использовать чистые HTML и JavaScript, однако ничто не мешает вам использовать для создания расширений веб-фреймоврки, такие как React или Angular.

Что ж, приступим. Первым делом опишем наше расширение в файле manifest.json:

Файл содержит несколько стандартных настроек, таких как версия манифеста, имя, версия расширения и описание. Подробнее стоит остановиться на свойствах content_scripts и browser_action.

Content Scripts — JS-файлы, которые запускаются в контексте открытой страницы. Эти скрипты могут могут получать данные страницы и модифицировать их. Мы используем всего один контентный скрипт. В поле matches объекта его описания мы указываем, в контексте каких страниц может работать наш скрипт. Существует свойство, обратное matches — exclude_matches, которое будет выполнять скрипт на всех страницах, кроме указанных. Далее мы вводим в нашу страницу скрипты и стили, которые мы добавим позже, — за это отвечают свойства JS и CSS. Свойство content_sctipts включает в себя еще некоторое количество настроек, с которыми вы можете ознакомиться в официальной документации — https://developer.chrome.com/extensions/content_scripts.

Следующее свойство, которое мы разберем — browser_action. Это свойство помогает нам выставить иконки, подсказки, значки. В нашем расширении мы не будем использовать никаких интерфейсов, однако если вы захотите добавить окошко для взаимодействия с пользователем, которое будет появляться при нажатии на иконку, вы должны будете сделать это в свойстве browser_actions. Для этого просто необходимо будет указать HTML-файл, который мы хотим использовать.

В нашем приложении мы будем заменять все вхождения ’S Media Link’ на официальных сайтах компании на тег #ILOVESML на розовом фоне. Для этого добавим дополнительный css-класс в файле index.css:

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

Теперь реализуем логику замены вхождений на странице:

Логика довольно-таки проста: мы получаем тело документа и проходимся по всем его элементам. Для каждого из них мы получаем внутренний HTML и разбиваем его по символам < и > на токены. Далее мы проходим по токенам и проверяем, является ли токен текстом, после чего заменяем в нем S Media Link на тег span с добавленным нами классом и текстом #ILOVESML. В конце мы снова объединяем наши токены в строку.

Посмотрим, как это работает!

https://ru.smedialink.com:

https://smedialink.com:

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

Теперь проверим расширение на блоге компании на Spark:

А здесь все вхождения S Media Link остались прежними, потому этот сайт не входит в список указанных нами адресов.

В этой статье мы создали расширение с минимальным функционалом, однако расширения способны на гораздо более сложные вещи. Если вас заинтересовала эта тема, советую ознакомиться с документацией — https://developer.chrome.com/extensions.

Читать и комментировать

Краснодар

Коммунаров, 268,
3 эт, офисы 705, 707

+7 (861) 200 27 34

Хьюстон

3523 Brinton trails Ln Katy

+1 833 933 0204

Москва

+7 (495) 145-01-05