Настройка BEX режима

BEX (Browser Extension) режим в Quasar предназначен для разработки расширений для браузеров, таких как Chrome и Firefox. Он позволяет использовать возможности Quasar CLI, Vue.js и современных веб-технологий для создания мощных расширений с минимальными усилиями.

Структура проекта BEX

После создания проекта с поддержкой BEX через команду:

quasar create <project-name>

и выбора Browser Extension режима, структура проекта будет включать следующие ключевые директории и файлы:

  • /src-bex – корневая папка для всех исходных файлов расширения.

    • background.js – фоновый скрипт расширения.
    • content.js – контент-скрипт для взаимодействия со страницами веб-сайтов.
    • popup/ – директория для интерфейса всплывающего окна расширения.
    • manifest.json – основной манифест расширения, содержащий метаданные и разрешения.
    • icons/ – иконки расширения.

  • quasar.conf.js – конфигурационный файл Quasar, где настраиваются сборка и режимы, включая BEX.

Конфигурация quasar.conf.js для BEX

BEX режим имеет собственный раздел конфигурации внутри quasar.conf.js:

bex: {
  contentScripts: [
    'content.js'
  ],
  extendBexManifestJson (json) {
    json.permissions.push('storage');
  },
  vueRouterMode: 'hash'
}

Ключевые моменты:

  • contentScripts – массив файлов контент-скриптов, которые будут внедряться в веб-страницы.
  • extendBexManifestJson – функция для расширения манифеста браузера, добавления разрешений, ключей, web_accessible_resources и других настроек.
  • vueRouterMode – режим роутера Vue. Для BEX рекомендуется использовать hash, чтобы корректно работали пути в расширении.

Настройка манифеста manifest.json

Файл manifest.json в BEX строится автоматически через Quasar, но его можно кастомизировать через extendBexManifestJson. Важно правильно настроить следующие поля:

  • manifest_version – обязательно версия 3 для современных расширений Chrome.
  • name, description, version – базовые метаданные.
  • background – указывает на фоновый скрипт:
"background": {
  "service_worker": "background.js"
}
  • action – настройка popup интерфейса:
"action": {
  "default_popup": "popup/index.html",
  "default_icon": "icons/icon-128x128.png"
}

  • permissions – массив разрешений, необходимых расширению, например: storage, tabs, activeTab.

  • content_scripts – массив правил для внедрения контент-скриптов:

"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["content.js"]
  }
]

Настройка фонового скрипта background.js

Фоновый скрипт управляет событиями расширения, такими как клики по иконке или сообщения между контент-скриптами и popup. Пример базового скрипта:

chrome.runtime.onInstalled.addListener(() => {
  console.log('BEX extension installed');
});

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: () => alert('Hello from BEX!')
  });
});

Контент-скрипты и их интеграция

Контент-скрипты выполняются на страницах, определённых в манифесте. Они позволяют взаимодействовать с DOM сайта. Пример content.js:

document.body.style.border = '5px solid red';

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.action === 'changeBackground') {
    document.body.style.backgroundColor = msg.color;
    sendResponse({status: 'done'});
  }
});

Сообщения из popup или фонового скрипта можно отправлять так:

chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
  chrome.tabs.sendMessage(tabs[0].id, {action: 'changeBackground', color: 'yellow'});
});

Popup создаётся как отдельный Vue-компонент внутри src-bex/popup. Стандартная структура:

popup/
 ├─ index.vue
 └─ index.js

Пример базового компонента:

<template>
  <q-page class="flex flex-center">
    <q-btn label="Change Background" @click="changeBackground" />
  </q-page>
</template>

<script>
export default {
  methods: {
    changeBackground() {
      chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
        chrome.tabs.sendMessage(tabs[0].id, {action: 'changeBackground', color: 'blue'});
      });
    }
  }
}
</script>

Сборка и запуск расширения

Quasar предоставляет встроенные команды для BEX:

  • quasar dev -m bex -T <browser> – запуск в режиме разработки для Chrome или Firefox.
  • quasar build -m bex – сборка расширения для публикации.

При сборке Quasar генерирует папку /dist/bex с готовыми файлами для установки в браузер.

Полезные рекомендации

  • Всегда проверять соответствие manifest_version и возможностей браузера.
  • Контент-скрипты работают в изолированном контексте, поэтому прямой доступ к Vue компонентам страницы невозможен.
  • Использовать chrome.storage для хранения состояния между сессиями расширения.
  • Для дебага удобно включать console.log в фоновых и контент-скриптах и использовать инструменты разработчика браузера.

Эта структура и настройки обеспечивают полноценную работу BEX режима в Quasar, позволяя создавать расширения с современными веб-технологиями и интегрировать их с Vue и Quasar-компонентами.

Оглавление