Сделайте так, чтобы таблицы стилей вашего расширения Chrome перезаписывали CSS сайта.

Question

Я пишу расширение Chrome для изменения CSS определенной страницы. Хотя, когда я пытаюсь применить стили, используя style.min.css, моя электронная таблица отображается перед каскадной таблицей сайта. Если быть точным, мои правила вычисляются раньше их, поэтому их правила переопределяют мои.

Например, если я попробую это

article {
    background-color: red;
}

, их правило будет вычислено последним, и мой фон не будеткрасный.

Так выглядят инструменты разработки. Мы видим, что моя вставленная таблица стилей не имеет приоритета в каскаде.

Также это мой manifest.json без описания и имени проекта.

"content_scripts": [{
      "css": ["style.min.css"],
      "js": ["main.js"],
      "matches": ["https://intra.epitech.eu/*"]
 }],
 "permissions": ["tabs"]

Так что, если у кого-то есть идеи, как обойти это, расставив приоритеты для ваших стилей в расширении chrome, оставьте комментарий:)

Answer 1

Более конкретные правила имеют приоритет над более общими (https://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade):

#homeboard section article {
  background-color: red;
}

Answer 2

Согласно комментариям ОП "run_at": "document_end" работает только для файлов js. Поэтому загрузите файл js в конце документа, а затем вставьте файлы css динамически, загрузив файлы css из этого файла js.

В manifest.json напишите

"content_scripts": [
    {
      "js": ["main.js"],
      "matches": ["https://intra.epitech.eu/*"],
      "run_at": "document_end"
    }
  ]

Answer 3

Вы уже пробовали это?

article {
  background-color: red !important;
}

Тег! Important не позволяет другим стилям переопределять ваши стили.