How to Inject CSS into Webpage Through Chrome Extension

Chrome Extension: How do I inject CSS and Javascript into a certain URL?

Should get you started:
you need to inject it into the tab you have the site open on, look at the example here on injecting CSS:
Chrome extension: insertCSS once per tab

It won't be as simple as that and you'll need to add logic to replace the css via the content script.

To inject a content script:

import browser from "webextension-polyfill";
    
await browser.tabs.executeScript(tabId, {
     file: "/static/js/content.js",
});

Add /static/js/content.js and any files you want to inject to your manifest

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.

Cannot Inject CSS through Chrome Extension

Use chrome.tabs.insertCSS instead, as simple as that. Note that the tab id is optional:

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.insertCSS({file:"style.css"});
});

Oh. Also, you need to use either a popup or a listener to chrome.browserAction.onClicked.
You can't use both, as the event is not fired while a popup is defined.

Two possible solutions:

1. Your code should instead go into background:

   {
     "name": "Flat Firemem",
     "version": "1.0",
     "manifest_version": 2,
     "description": "Arranges the page properly in the dump.",
     "browser_action": {
       "default_icon": "logo.png",
     },
     "background": {
       "scripts": ["tester.js"]
     },
     "permissions": ["tabs", "<all_urls>", "file:///*"]
   }
   

2. Or, you just call the code when popup appears:

   // tester.js: no need to listen to event
   chrome.tabs.insertCSS({file:"style.css"});
   

Of note: your permissions are a bit excessive for the task. Look into activeTab permission, and also note that <all_urls> permission includes file:/// URLs.

Using Chrome Extension to inject CSS into the Document Inspector

I don't think Webkit allows you to inject CSS or Javascript into the developer tools. There is an experimental API for Chrome which allows you to add tabs and a few other things: http://code.google.com/chrome/extensions/trunk/experimental.devtools.html

Inject CSS conditionally via chrome extension options

If you have configured your manifest properly, then your content script will only execute on matched pages. See here for details: https://developer.chrome.com/extensions/content_scripts

As for injecting CSS, it depends on what you want to do. You'll want to read from storage in the content script to get the state of your check box obviously, and if found then you need to inject.

Is what you're trying to inject fairly small? If so, it is probably best to just do it with a bit of JavaScript by selecting the elements you need in the Dom and adding a class to them with the properties you want to set. For what it is worth, adding a class is probably the most efficient way to change the CSS of some element rather than directly editing its style.

If it is fairly large, you can use the insertCSS method on a tab as you've mentioned. You'll need to add the tabs permission (I think it is called activeTab or something strange) to your manifest file. From there, get the current tab then call insertCSS with either raw CSS code or better yet, a file reference to your CSS file along with the id of the current tab to on which to apply it. See here for more info: https://developer.chrome.com/extensions/tabs#method-insertCSS

Also, there's a zip file with relevant example in the chrome extension samples page here:
https://developer.chrome.com/extensions/examples/api/storage/stylizr.zip

---

Related Topics