content_scripts 的 css 字段必须是字符串数组，与 js 同级，路径相对于 manifest.json；错误写法（如单字符串或绝对路径）会导致样式静默不加载。
content_scripts 的 css 字段必须写对，否则样式根本不会注入——不是“没生效”，而是压根没加载。
content_scripts 里 css 字段的写法必须是字符串数组
它和 js 字段同级，不能嵌套、不能省略方括号、不能写成单个字符串：
- ✅ 正确：
"css": ["content.css"]或"css": ["css/base.css", "css/theme.css"] - ❌ 错误：
"css": "content.css"（类型错，Chrome 静默忽略） - ❌ 错误：
"css": { "file": "content.css" }（结构错，不识别） - ❌ 错误：
"css": ["/css/content.css"]（开头斜杠会被视为绝对路径，实际找不到）
路径始终相对于 manifest.json 所在目录。比如你的 CSS 在 src/css/main.css，那就要写成 ["src/css/main.css"]。
为什么加了 css 字段但页面没变样
常见原因不是配置写错了，而是作用域或优先级问题：
- 选择器权重被页面原有样式盖掉：比如你写
.btn { color: red }，但页面用了button.btn.primary { color: blue !important }，你的规则就输了 - CSS 文件 404：Chrome 不报错，但打开
chrome://extensions→ 点开你的插件 → 查看Manifest→ 展开content_scripts，能看到实际匹配到的资源列表；点进去如果显示 “Not found”，说明路径不对 - 匹配规则没覆盖目标页：比如
"matches": ["https://example.com/*"]，但你在http://example.com（少了个s）测试，协议不匹配就完全不触发 - 目标元素在 Shadow DOM 里：普通 CSS 无法穿透，得改用
:host、::slotted，或者用 JS 把<style></style>插入到 shadowRoot 中
css 和 js 注入时机完全不同
css 字段不受 run_at 控制，它在 content script 加载前就已注入并解析完毕：
- 如果你在
content.js里执行document.body.classList.add("dark")，对应的.dark { background: #111 }必须提前通过css字段注入，否则 class 加上了但没样式 - 反过来，如果 CSS 是用来修饰 JS 动态创建的节点（比如
document.createElement("div").className = "tooltip"），完全没问题——CSS 是全局生效的，只要节点存在且 class 匹配就会应用 -
run_at: "document_start"只影响 JS 执行时机，对 CSS 完全无效
动态注入 CSS 不能靠 chrome.scripting.insertCSS
这个 API 在 Manifest V3 下确实存在，但它只支持注入字符串或代码片段，不支持直接加载扩展包内 CSS 文件路径：
- ❌ 不能写：
chrome.scripting.insertCSS({ files: ["content.css"] })（会报错或静默失败） - ✅ 可以写：
chrome.scripting.insertCSS({ css: ".my-btn { display: none }" })（传字符串） - ✅ 或先用
fetch读取本地 CSS 内容再注入（但要处理相对路径、@import 等，成本高）
所以日常开发中，优先走 content_scripts.css 声明式注入；只有需要运行时开关样式、或根据条件拼接规则时，才考虑 insertCSS + 字符串方式——别指望它能替代 manifest 配置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
