Content scripts

Content scripts — это скрипты, которые внедряются в веб-страницы и взаимодействуют с их содержимым. В контексте Quasar Framework они используются преимущественно при разработке расширений браузера на базе Vue.js, позволяя интегрировать функционал приложения непосредственно в DOM сторонних страниц.

Ключевые особенности:

  • Изоляция: Content script выполняется в отдельном контексте страницы, что предотвращает прямое вмешательство в глобальные переменные сайта.
  • Доступ к DOM: Скрипт имеет полный доступ к DOM страницы, позволяя добавлять элементы, изменять стили и обрабатывать события.
  • Ограниченный доступ к JS сайта: Несмотря на доступ к DOM, скрипт не имеет прямого доступа к скриптам страницы, за исключением случаев внедрения через window объекты или <script> теги.

Подключение Content Scripts в Quasar

В Quasar проекте content scripts настраиваются через конфигурацию quasar.config.js, чаще всего в разделе build или при использовании плагинов для расширений браузеров.

Пример настройки для Chrome Extension:

// quasar.config.js
module.exports = {
  build: {
    extendWebpack(cfg) {
      cfg.entry['content-script'] = './src-content-scripts/content-script.js';
    }
  }
}

Особенности:

  • Скрипт должен быть отдельным entry point.
  • При сборке Quasar генерирует отдельный бандл, который можно подключать в манифест расширения браузера (manifest.json).
  • Сборка обычно отличается от основного SPA, так как content scripts работают вне контекста приложения Vue.

Работа с DOM и Vue компонентами

Content script может динамически создавать Vue компоненты и рендерить их прямо на странице. Для этого используется обычный механизм createApp:

import { createApp } from 'vue';
import MyWidget from '../components/MyWidget.vue';

const mountPoint = document.createElement('div');
mountPoint.id = 'my-widget-container';
document.body.appendChild(mountPoint);

createApp(MyWidget).mount('#my-widget-container');

Важные моменты:

  • Создание отдельного контейнера гарантирует, что стили и структура страницы не будут нарушены.
  • Для работы с Quasar UI компоненты нужно подключать через createApp с use(Quasar, { plugins: [...] }).

Пример с Quasar:

import { createApp } from 'vue';
import { Quasar } from 'quasar';
import MyWidget from '../components/MyWidget.vue';
import 'quasar/dist/quasar.css';

const mountPoint = document.createElement('div');
mountPoint.id = 'quasar-widget';
document.body.appendChild(mountPoint);

createApp(MyWidget).use(Quasar, { plugins: {} }).mount('#quasar-widget');

Взаимодействие с фоновыми скриптами

Content scripts часто обмениваются данными с background scripts расширений. В Quasar это осуществляется через стандартные методы Chrome API:

// Отправка сообщения в background script
chrome.runtime.sendMessage({ action: 'getData' }, (response) => {
  console.log(response.data);
});

// Получение сообщений от background script
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if(request.action === 'updateWidget') {
    // обновляем контент Vue компонента
  }
});

Особенности:

  • Контент скрипт не может напрямую взаимодействовать с API браузера, которое ограничено для background scripts, но может пересылать сообщения.
  • Использование асинхронного обмена данными позволяет обновлять UI без перезагрузки страницы.

Управление стилями и scoped CSS

Content scripts требуют аккуратного обращения со стилями, чтобы не ломать внешний вид страницы:

  • Scoped CSS компонентов: помогает локализовать стили компонента.
  • Dynamic style injection: можно создавать <style> теги через JS и добавлять их в <head>:
const style = document.createElement('style');
style.textContent = `
  #my-widget-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
  }
`;
document.head.appendChild(style);
  • Использование Quasar CSS: при подключении Quasar важно убедиться, что стили не конфликтуют с глобальными стилями страницы.

Оптимизация и производительность

Content scripts могут значительно нагружать страницу при неправильной реализации. Рекомендуется:

  • Минимизировать количество DOM-операций.
  • Использовать requestAnimationFrame для плавного обновления UI.
  • Отключать наблюдатели MutationObserver, когда они не нужны.
  • Ленивая инициализация Vue компонентов только при необходимости.

Примеры практических сценариев

  1. Встраиваемый виджет – добавление интерактивной панели с кнопками и формами на сторонние сайты.
  2. Автоматизация задач – изменение содержимого страницы в ответ на данные из background script.
  3. Интерактивные подсказки – добавление тултипов и всплывающих окон без изменения кода сайта.

Важные ограничения

  • Content script не имеет доступа к переменным и функциям страницы напрямую.
  • Вставка Vue компонентов должна выполняться в отдельный контейнер.
  • Обновление контента страницы должно быть безопасным и не ломать существующую верстку.
  • Для работы с внешними библиотеками через CDN желательно использовать dynamic import или отдельные бандлы.

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

Оглавление