Мой CSS не вводится через мой контент-скрипт

Question

Кто-нибудь может мне это объяснить. Я пытаюсь внедрить CSS-файл на веб-страницу, используя content_script с расширениями Google, но мой CSS-файл никогда не добавляется на веб-страницу. Может кто-нибудь сказать мне, что я делаю неправильно, и помочь мне это исправить? Спасибо

Manifest:

{
  "name": "Extension",
  "version": "0",
  "description": "",


  "permissions": ["tabs", "http://*/*", "https://*/*", "file:///*/*"],
    "content_scripts": [
    {
        "matches": [ "http://*/*", "https://*/*", "file:///*/*"],
        "css": ["myStyles.css"],
        "js": ["myScript.js"],
        "all_frames": true
    }
  ]
}

myStyles.css

#test {
    margin: 0 10px;
    background: #fff;
    padding: 3px;
    color: #000;
}

Answer 1

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

1. Увеличьте специфичность ваших правил CSS.

2. Суффикс каждое правило с !important:

   #test {
       margin: 0 10px !important;
       background: #fff !important;
       padding: 3px !important;
       color: #000 !important;
   }
   

3. Внедрить 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

   {
     "name": "Extension",
     "version": "0",
     "description": "",
     "manifest_version": 2,
     "permissions": ["tabs", "http://*/*", "https://*/*", "file:///*/*"],
       "content_scripts": [
       {
           "matches": [ "http://*/*", "https://*/*", "file:///*/*"],
           "js": ["myScript.js"],
           "all_frames": true
       }
     ],
     "web_accessible_resources": ["myStyles.css"]
   }
   

   Последний ключ, web_accessible_resources необходим, когда активна версия манифеста 2, чтобы файл CSS можно было читать со страницы без расширения.

Answer 2

Если вы хотите настроить таргетинг на конкретный веб-сайт, выполните следующие действия:

"matches": ["https://*.google.com/*"]

Который //* перед .google это настоящая уловка для меня использовать www не работает.