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"
],
}
],
Reference:
Chrome web_accessible_resources reference
Share "How to add CSS to content script in Manifest V3?"
Related snippets:
Tags:
css, chrome, extension, manifest, v3 content, script Technical term:
Add CSS to content script in Manifest V3