Одни расширения добавляют в браузер новые функции, а другие предоставляют данные о посещаемых веб-страницах:
- Wappalyzer расскажет о технологиях, которые применялись в разработке сайта.
- Similar web показывает трафик и ранжировании сайта.
- Momentum изменяет содержание страниц или заменяет домашнюю страницу.
Я расскажу о разработке расширения для Chrome на Vue 3 и Quasar. Это расширение которое будет изменять размер шрифта на посещаемых веб-страницах. Подробности — к старту нашего курса по Fullstack-разработке на Python.
Как [обычно] устроены расширения
- Файл проекта
manifest.json
содержит все метаданные расширения. - Cкрипты расширения запускаются после его установки. Файл
manifest.json
указывает, где запускаются скрипты. Подробно поговорим об этом ниже.
Пишем расширение с фреймворком Quasar
BEX
— тип приложения Quasar для расширений браузера — расшифровывается как Browser Extension
, то есть браузерное расширение. Quasar BEX разрабатывался и тестировался для Chrome и Firefox, но должен работать во всех браузерах с движком Chromium.
Новый проект Quasar
Если вы еще не установили quasar-cli, сделайте это и создайте новый проект Quasar:
$ yarn global add @quasar/cli
$ yarn create quasar
# или:
$ npm i -g @quasar/cli
$ npm init quasar
- Выберите
App with QUasar CLI
- Введите имя вашего проекта. Quasar создаст новую папку и инициализирует ваш проект [создаст скелет проекта, его основную структуру, настройки по-умолчанию и т. д.] в ней.
Если проект находится в уже существующий папке, вместо её имени вы увидите .
- Выберите
Quasar V2 with Vue 3
- Выберите TypeScript или JavaScript. Я воспользуюсь TypeScript.
- Инициализируйте проект через Vite.
- Заполните оставшиеся поля значениями по умолчанию, или измените их, если нужно.
Специфика создания расширений с Quasar
Установите тип приложения Quasar — BEX. BEX — это набор вспомогательных функций Quasar.
Quasar позволяет указать расположение расширения:
- на новой вкладке;
- в инструментах разработчика, настройках и всплывающих окнах;
- на веб-странице позволит внедрить приложение Quasar в код сторонних веб-сайтов. Это самый мощный инструмент из этих трех.
Режим BEX в Quasar:
Чтобы создать приложение, добавьте в Quasar режим BEX:
quasar mode add bex
А если хочется приступить к разработке сразу, чтобы добавить в проект режим BEX
и (если её нет) папку src-bex/
, запустите другую команду:
quasar dev -m bex
Выберите Manifest Version 3. Пока пишется эта статья, он работает только в Chrome.
Чтобы лучше разобраться с src-bex
, прочитайте статью о структуре этой папки.
Настройка BEX
Самый важный файл конфигурации BEX — /src-bex/manifest.json
, то есть тот самый файл манифеста, о котором я говорил при обсуждении того, как работают расширения для браузера.
Прежде чем продолжить, советую ознакомиться с его устройством. В ней рассказывается, как изменить иконку расширения и другие важные параметры.
Нужно знать, что в работе каждого BEX-приложения участвуют два скрипта:
- Скрипт, работающий в фоновом режиме, запускается в контексте самого BEX-приложения и слушает все его события. Экземпляр фонового скрипта в BEX-приложении всегда только один.
- Скрипт контента запускается в контексте веб-страницы. Для каждой вкладки с запущенным расширением создается копия этого скрипта.
Больше о настройке BEX-приложения можно узнать в документации Quasar
Тестирование расширения
Откройте Google Chrome и перейдите по адресу chrome://extensions
. Убедитесь, что вы включили режим разработчика. Нажмите на "Загрузить распакованное расширение", чтобы ваше расширение установилось в браузер. Выберите папку с manifest.json
— здесь это корневая папка сборки (билда) вашего проекта. Загрузите эту папку. В Chrome она находится в /dist/bex
.
После загрузки для доступа к расширению можно использовать меню в правом верхнем углу в Chrome. Приложение при этом будет запушено.
Чтобы обновить расширение, нажмите кнопку его перезагрузки.
Функционал
Чтобы увеличить шрифт, добавим CSS в файл по адресу src-bex/assets/content.css
. Этот файл переопределяет CSS на всех страницах, где работает расширение.
Вот его код:
/* src-bex/assets/content.css/
p,
span,
code {
font-size: 21px !important;
line-height: 175% !important;
}
Обновите расширение и вы увидите, что размер шрифта на сайтах изменился.
Бонус
Если захочется заменить страницу, которая появляется при открытии новой вкладки в Chrome, в файл src/my-content-script.ts
добавьте код:
{
"chrome_url_overrides": {
"newtab": "www/index.html"
}
}
Заключение
В расширении можно написать JavaScript-код, который будет запускаться на посещаемых сайтах и блокировать рекламу. Я рассказал об основах разработки браузерных расширений. Если захочется узнать больше, ознакомьтесь с документацией для расширений Chrome и документацией Quasar BEX.
А мы погружаем в современную среду IT, чтобы вы прокачали карьеру? освоили новую профессию или приобрели опыт в сфере информационных технологий. Скидка 45% по промокоду HABR.
Data Science и Machine Learning
- Профессия Data Scientist
- Профессия Data Analyst
- Курс «Математика для Data Science»
- Курс «Математика и Machine Learning для Data Science»
- Курс по Data Engineering
- Курс «Machine Learning и Deep Learning»
- Курс по Machine Learning
Python, веб-разработка
- Профессия Fullstack-разработчик на Python
- Курс «Python для веб-разработки»
- Профессия Frontend-разработчик
- Профессия Веб-разработчик
Мобильная разработка
Java и C#
- Профессия Java-разработчик
- Профессия QA-инженер на JAVA
- Профессия C#-разработчик
- Профессия Разработчик игр на Unity
От основ — в глубину
А также
Lazytech
Использовать навороченный фреймворк Quasar для создания столь простого браузерного расширения несколько странно. VueJS там никаким боком не нужен - GUI же нету.
В оригинале статья называется "How to Create Browser Extensions Using Quasar and Vue 3", то есть хотя бы понятно, что это некий туториал (хотя для беглого ознакомления с Quasar гораздо полезнее почитать доку вместо такой статьи). А в переводе зачем-то еще добавили "для замены шрифтов". :)