Extension Content Script (Js/Or CSS) Is Not Applying

My CSS is not getting injected through my content script

The style sheet is actually injected, but not applied, because other styles override the rules. To get the rules to work, you have some options:

1. Increase the specificity of your CSS rules.

2. Suffix every rule with !important:

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

3. Inject the CSS via a content 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"]
   }
   

   The last key, web_accessible_resources is necessary when manifest version 2 is active, so that the CSS file can be read from a non-extension page.

How to inject CSS using content script file in Chrome extension?

You could add to the manifest's permissions field; See web_accessible_resources. So you would add this to the manifest:

    , "web_accessible_resources": [
        "fix.css"
    ]

---

See also "Programmatic injection". and insertCSS().

For most applications, forget all that createElement code and just add the CSS file to the manifest:

"content_scripts": [
   {
      "matches":    ["http://www.google.com/*"],
      "css":        ["fix.css"],
      "js":         ["script.js"]
   }
],

although I understand that you don't want to do that in this exact instance.

Chrome Extension Content Script Not Firing

As far as I understood, you have one script (test.js) that's being referenced both as a Content Script and as a script in the Popup

The script in the popup.html will only run in the context of the popup

The content script, however, will only run in the actual page

---

You can communicate between them using messages, which I believe is what you need.

Execute Content Script and associated CSS from Background (Manifest V3) - Chrome Extension

It's pretty simple :)

1. Change the manifest file to something like this.

manifest.json:

{

"name" : "Practice",
"version" : "1.0.0",
"manifest_version" : 3,
"background" : {
    "service_worker": "background.js"
},

"permissions" : ["scripting"],

"host_permissions": ["<all_urls>"]
"content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "css": ["content_style.css"],
      "js": ["content_script.js"],
      "run_at": "document_end"
    }
  ],

}

2. Invoke the content_script.js from background.js. You can whatever kind of listener for this.

background.js:

chrome.tabs.onUpdated.addListener(function () {
  chrome.tabs.executeScript(null, { file: "content_script.js" });
});

3. Use the content_script.js to do changes to the DOM. You can add style classes to DOM nodes which is applied from the content_style.css or add new elements like the ones you want. Write all your new CSS rules in content_style.css.

---

Related Topics