- Instant help with your JavaScript coding problems

Add CSS to content script in Manifest V3

Question:
How to add CSS to content script in Manifest V3?
Answer:
{
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "css": ["static/style/content.css"],
      "js": ["content.js"]
    }
  ],

  "web_accessible_resources": [
    {
      "resources": [
        "static/style/content.css"
      ],
    }
  ],
}
Description:

If you want to add a CSS file to the content script for a Chrome extension using Manifest V3, you need to modify the manifest.json file in two places.
Firstly, for the "content_script" property, you need to extend the object with a css key whose value is the path to the CSS file:

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "css": ["static/style/content.css"],
      "js": ["content.js"]
    }
  ],

However, this is not enough, you also need to extend the web_accessible_resources property. You must also include the above CSS file in the array under the resources key:

"web_accessible_resources": [
    {
      "resources": [
        "static/style/content.css"
      ],
    }
  ],
Share "How to add CSS to content script in Manifest V3?"
Tags:
css, chrome, extension, manifest, v3 content, script
Technical term:
Add CSS to content script in Manifest V3