Подтвердить что ты не робот

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

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

манифеста:

{
  "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;
}
4b9b3361

Ответ 1

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

  • Увеличьте specificity ваши правила CSS.
  • Суффикс каждого правила с !important:

    #test {
        margin: 0 10px !important;
        background: #fff !important;
        padding: 3px !important;
        color: #000 !important;
    }
    
  • Внесите CSS через содержимое script:

    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 необходим, если манифеста версия активна, так что файл CSS может быть прочитан с нераспространенной страницы.