Плагины расширения

Lighthouse предоставляет гибкий механизм расширения функциональности через плагины, которые позволяют добавлять новые аудиты, категории или отчёты, а также интегрировать кастомные проверки веб-страниц. Плагин в Lighthouse — это отдельный модуль Node.js, который следует строго определённой структуре и интерфейсу.

Структура плагина

Плагин обычно состоит из следующих компонентов:

Файл манифеста (index.js) Этот файл экспортирует объект конфигурации, включающий:
- audits — массив объектов, представляющих пользовательские аудиты.
- categories — описание новых категорий отчёта.
- groups — логическая группировка аудитов в рамках категорий.
Аудит Аудит — это класс, наследующий Lighthouse.Audit и реализующий статический метод audit. Метод должен возвращать объект с обязательными полями:
- score — числовое значение от 0 до 1, определяющее успешность аудита.
- numericValue — при необходимости, числовое измерение (например, время загрузки).
- details — структура с результатами проверки, включая таблицы, списки или графики.

Пример базового аудита:

const Audit = require('lighthouse').Audit;

class CustomAudit extends Audit {
  static get meta() {
    return {
      id: 'custom-audit',
      title: 'Пример кастомного аудита',
      description: 'Проверяет специфические условия на странице',
      requiredArtifacts: ['URL'],
    };
  }

  static async audit(artifacts) {
    const url = artifacts.URL;
    const passed = url.includes('example.com');

    return {
      score: passed ? 1 : 0,
      numericValue: passed ? 1 : 0,
      details: {
        type: 'text',
        text: passed ? 'Условие выполнено' : 'Условие не выполнено',
      },
    };
  }
}

module.exports = CustomAudit;

Категории и группы

Плагины могут создавать собственные категории, чтобы объединять несколько аудитов:

const categories = {
  'custom-category': {
    title: 'Кастомная категория',
    description: 'Собственная группа проверок',
    auditRefs: [
      { id: 'custom-audit', weight: 1 },
    ],
  },
};

Группы позволяют структурировать отображение аудитов внутри категории:

const groups = {
  'performance': {
    title: 'Производительность',
    description: 'Проверки, связанные с производительностью',
  },
};

Интеграция плагина с Lighthouse

Для использования плагина необходимо добавить его в конфигурацию при запуске:

const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

const plugin = require('./custom-plugin');

(async () => {
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
  const options = {port: chrome.port, plugins: [plugin]};
  const runnerResult = await lighthouse('https://example.com', options);
  console.log(runnerResult.lhr.categories);
  await chrome.kill();
})();

В конфигурации plugins может быть массив из нескольких модулей, что позволяет комбинировать наборы аудитов и категорий.

Использование артефактов

Артефакты — это данные о странице, полученные Lighthouse перед выполнением аудитов. Они включают DOM, сетевые запросы, скриншоты и метрики производительности. Аудит может требовать один или несколько артефактов через requiredArtifacts:

static get meta() {
  return {
    id: 'check-dom-elements',
    title: 'Проверка наличия элементов DOM',
    description: 'Аудит проверяет специфические элементы на странице',
    requiredArtifacts: ['DOM'],
  };
}

Артефакты доступны в методе audit через аргумент artifacts:

const dom = artifacts.DOM;
const elementExists = dom.querySelectorAll('img').length > 0;

Настройка и переиспользование

Плагины можно настраивать через опции, передаваемые при инициализации. Это позволяет использовать один и тот же аудит с различными параметрами:

class ConfigurableAudit extends Audit {
  static defaultOptions = { selector: 'img' };

  static async audit(artifacts, context) {
    const {selector} = context.options;
    const dom = artifacts.DOM;
    const count = dom.querySelectorAll(selector).length;

    return { score: count > 0 ? 1 : 0 };
  }
}

Контекст context.options передаётся через конфигурацию плагина:

const plugin = {
  audits: [
    { implementation: ConfigurableAudit, options: { selector: 'a' } },
  ],
};

Отчётность и визуализация

Аудиты плагинов автоматически интегрируются в стандартные отчёты Lighthouse (HTML, JSON, CSV). Для более сложных визуализаций можно использовать типы деталей:

table — табличное представление данных.
filmstrip — последовательность скриншотов.
opportunity — рекомендации по улучшению метрик.

Пример возвращения таблицы:

return {
  score: 1,
  details: Audit.makeTableDetails(
    ['Селектор', 'Количество'],
    [['img', 10], ['a', 5]]
  ),
};