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


  • 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 позволяет указать расположение расширения:



Режим 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.




Комментарии (1)


  1. Lazytech
    14.01.2023 05:27
    +6

    Использовать навороченный фреймворк Quasar для создания столь простого браузерного расширения несколько странно. VueJS там никаким боком не нужен - GUI же нету.

    В оригинале статья называется "How to Create Browser Extensions Using Quasar and Vue 3", то есть хотя бы понятно, что это некий туториал (хотя для беглого ознакомления с Quasar гораздо полезнее почитать доку вместо такой статьи). А в переводе зачем-то еще добавили "для замены шрифтов". :)