Как добавить стили CSS из файла в браузерном расширении на сайт?

Question

[dollar]

Расширение может иметь разный адрес. Оно может быть либо подключено как распакованное, либо из магазина. Так что вставить style элемент со ссылкой не получится.

Просто текст переслать и загнать в innerHTML - такое себе решение. Есть ли более красивый вариант?

Answer 1

[Алексей Ярков]

Оно может быть либо подключено как распакованное, либо из магазина.

Ну и что? Принцип один и тот же.
Получаем ссылку на файл с помощью chrome.runtime.getURL('style.css'). Путь задается от корня каталога расширения.
И инжектим на страницу:

injectCSSToPage (codeOrUrl, inline = true) {
  if (inline) {
    const style = document.createElement('style');
    style.textContent = codeOrUrl;
    document.head.appendChild(style);
  } else {
    const link = document.createElement('link');
    link.href = codeOrUrl;
    link.rel = 'stylesheet';
    document.head.appendChild(link);
  }
}

Comments

[dollar]

Только нужно ещё разрешение "externally_connectable"

[Алексей Ярков]

dollar, забыл )) Да, точнно.
Ну и до кучи можно еще прописать такую секцию в манифесте (копипаст):

"web_accessible_resources": ["sounds/*.mp3", "css/*.css", "toster.js"]