css - मेरी सीएसएस मेरी सामग्री स्क्रिप्ट के माध्यम से इंजेक्शन नहीं मिल रही है



google-chrome-extension content-script (1)

स्टाइल शीट वास्तव में इंजेक्शन है, लेकिन लागू नहीं है, क्योंकि अन्य स्टाइल नियमों को ओवरराइड करते हैं। नियमों को काम करने के लिए, आपके पास कुछ विकल्प हैं:

  1. अपने सीएसएस नियमों की विशिष्टता बढ़ाएं
  2. साथ हर नियम लागू करें !important :

    #test {
        margin: 0 10px !important;
        background: #fff !important;
        padding: 3px !important;
        color: #000 !important;
    }
  3. सामग्री स्क्रिप्ट के माध्यम से सीएसएस इंजेक्ट करें:

    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 सक्रिय है, ताकि सीएसएस फ़ाइल किसी गैर-एक्सटेंशन पृष्ठ से पढ़ा जा सके।

क्या कोई मुझे यह समझा सकता है। मैं Google एक्सटेंशन के साथ content_script का उपयोग करते हुए एक वेब पेज पर एक सीएसएस फ़ाइल को इंजेक्ट करने की कोशिश कर रहा हूं, लेकिन मेरी सीएसएस फ़ाइल वेबपेज में कभी नहीं जुड़ती है क्या कोई मुझे बता सकता है कि मैं क्या गलत कर रहा हूं और मुझे इसे ठीक करने में मदद करता हूं? धन्यवाद

मैनिफ़ेस्ट:

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




content-script