Проблемы внедрения CSS в скриптах контента для расширений

Несмотря на определение внедрения CSS в манифесте, ваш файл CSS по-прежнему отсутствует на веб-странице. Вот возможные причины и решения:

Причина: Конфликт правил CSS

Таблица стилей внедряется, но не применяется, поскольку другие стили переопределяют ее правила.

Решение:

• Увеличить CSS Специфика: Добавьте в правила CSS более конкретные селекторы.
• Используйте «!important»: Добавьте к каждому правилу суффикс «!important», чтобы переопределить существующие стили.

Причина: Предел внедрения скрипта содержимого

Ограничения манифеста версии 3 скрипты контента путем прямого внедрения CSS.

Решение: Внедрите CSS через скрипт контента следующим образом:

myScript.js:

var style = document.createElement('link');
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = chrome.extension.getURL('myStyles.css');
(document.head||document.documentElement).appendChild(style);

manifest.json:

"web_accessible_resources": ["myStyles.css"]

Примечание: При использовании манифеста версии 2 Ключ «web_accessible_resources» необходим для разрешения доступа к файлу CSS со страницы без расширения.