Как написать расширение браузера для замены шрифтов на Quasar и Vue 3

Одни расширения добавляют в браузер новые функции, а другие предоставляют данные о посещаемых веб-страницах:

• 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.

• Профессия Fullstack-разработчик на Python (16 месяцев)
• Профессия Data Scientist (24 месяца)

Краткий каталог курсов

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-разработчик
• Профессия Веб-разработчик

Мобильная разработка

• Профессия iOS-разработчик
• Профессия Android-разработчик

Java и C#

• Профессия Java-разработчик
• Профессия QA-инженер на JAVA
• Профессия C#-разработчик
• Профессия Разработчик игр на Unity

От основ — в глубину

• Курс «Алгоритмы и структуры данных»
• Профессия C++ разработчик
• Профессия «Белый хакер»

А также

• Курс по DevOps
• Все курсы