Расширение Chrome: Внедрить желаемый CSS пользователя перед загрузкой

Содержание

Вопрос или проблема
Ответ или решение
1. Проблема визуального сбоев
2. Использование chrome.storage для хранения пользовательских настроек
3. Генерация CSS на основе настроек пользователя
4. Пример реализации
manifest.json
background.js
enhancer.js
5. Заключение

Вопрос или проблема

Я создаю расширение для Chrome, в этом расширении я позволяю пользователю выбирать, чтобы скрывать некоторые элементы, например, верхнюю панель. Я использую chrome.storage для хранения настроек, выбранных пользователем, и инъектирую CSS в своём .js файле при загрузке.

Дело в том, что js инъектируется после загрузки DOM, поэтому есть визуальное залипание.

Я добавил это в manifest.json

"content_scripts": [
    {
        "matches": ["https://www.goodreads.com/*"],
        "css": ["assets/css/enhancer.css"],
        "js": ["assets/js/enhancer.js"],
        "runAt": "document_start"
    }
  ]

Я попробовал простую инъекцию CSS без обращения к chrome.storage:

let cssStyle=".siteHeader__topFullImageContainer {display : none !important; }";
style.appendChild(document.createTextNode(cssStyle));
document.getElementsByTagName('head')[0].appendChild(style);

Но это все еще слишком медленно, верхняя панель появляется и исчезает. Поэтому я задумался, есть ли возможность хранить CSS файл, заполненный настройками пользователя?

=> Пользователь выбирает что-то, я форматирую это в CSS файл, и этот CSS файл вызывается в моём manifest.json, так что технически загружается с DOM.

Спасибо, что прочитали меня, хорошего дня!

Ответ или решение

Чтобы создать расширение Chrome, которое позволяет пользователю интерактивно управлять стилями сайта (например, скрывать верхнюю панель), необходимо учесть несколько важных аспектов, чтобы минимизировать визуальные сбои при загрузке страницы. Давайте рассмотрим, как можно достичь этого, используя хранение настроек пользователя и событий загрузки документа.

1. Проблема визуального сбоев

Как вы уже заметили, проблема возникает из-за того, что JavaScript-инъекция происходит после загрузки DOM, что приводит к "морганию" элементов. Чтобы избежать этого, вы можете использовать content_scripts в стиле document_start, что позволяет прикрепить CSS до того, как пользователь увидит страницу. Однако для этого нужно учитывать настройки пользователя.

2. Использование chrome.storage для хранения пользовательских настроек

Вы можете сохранить пользовательские настройки (например, заданные пользователем CSS-правила) в chrome.storage. Это позволит вам динамически генерировать CSS, основанный на предпочтениях пользователя.

3. Генерация CSS на основе настроек пользователя

Вот как можно создать CSS-файл на основе настроек пользователя:

Создание ввода пользователя: Создайте интерфейс, позволяющий пользователям выбирать, какие элементы скрыть (например, checkbox для верхней панели).
Сохранение настроек: Используйте chrome.storage для сохранения выбранных пользователем параметров.
Генерация CSS в JavaScript: Вы можете динамически создавать класс CSS на основе сохраненных настроек.

4. Пример реализации

Вот пример того, как вы можете это реализовать.

`manifest.json`

{
  "manifest_version": 3,
  "name": "Стиль расширения",
  "version": "1.0",
  "permissions": ["storage"],
  "content_scripts": [
    {
      "matches": ["https://www.goodreads.com/*"],
      "js": ["assets/js/enhancer.js"],
      "runAt": "document_start"
    }
  ],
  "background": {
    "service_worker": "assets/js/background.js"
  }
}

`background.js`

Этот файл будет управлять хранилищем Chrome и инициализировать настройки по умолчанию.

chrome.runtime.onInstalled.addListener(() => {
    chrome.storage.sync.set({ showTopBar: true }, function () {
        console.log("Настройки по умолчанию установлены.");
    });
});

`enhancer.js`

Этот файл отвечает за динамическую генерацию и внедрение CSS.

chrome.storage.sync.get(['showTopBar'], function (result) {
    let cssStyle = "";
    if (!result.showTopBar) {
        cssStyle += ".siteHeader__topFullImageContainer { display: none !important; }";
    }

    // Создаем элемент стиля и добавляем его в head
    const style = document.createElement('style');
    style.appendChild(document.createTextNode(cssStyle));
    document.head.appendChild(style);
});

5. Заключение

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

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