合法写法是直接在content_scripts数组项中声明css字段，值为相对于manifest.json的字符串数组，如["css/base.css"]；它与js同级，不支持对象、绝对路径或单个字符串。
直接在 content_scripts 数组项里写 css 字段，路径必须是相对于 manifest.json 的本地相对路径，且值必须是字符串数组（哪怕只有一个文件）。
content_scripts 的 css 字段怎么写才合法
它和 js 是同级字段，不是嵌套结构，也不属于某个子对象。常见错误写法包括："css": "styles.css"（应为数组）、"css": { "file": "styles.css" }（非法对象）、"css": ["/css/styles.css"]（绝对路径不支持）。
-
css值必须是字符串数组，例如["css/base.css", "css/theme.css"] - 路径以
manifest.json所在目录为根，不能用./开头（可省略），也不能用/或http://开头 - 文件必须实际存在于打包后的扩展包内；若用了
node_modules中的 CSS，需确保构建时已复制进去 - 多个 CSS 按数组顺序注入，后写的规则自然覆盖先写的同名选择器（层叠逻辑与
<link>一致）
样式没生效？先查这三处硬性限制
Chrome 不报错，但效果消失往往卡在这几个“静默失败”点：
-
matches规则未命中目标页面：比如写了"https://example.com/*"却访问了http://example.com（协议不匹配）或https://sub.example.com（子域不包含） - CSS 文件 404：打开
chrome://extensions→ 启用「开发者模式」→ 找到你的扩展 → 点「详情」→ 拉到最下方「Manifest」→ 展开content_scripts→ 点击css里的路径，看是否显示 “Not found” - 选择器被页面原有样式压制：比如你写
.header { color: red }，但页面用了.header.main-header#app { color: blue !important }，你的规则就输了——优先检查 specificity 和!important冲突
Shadow DOM 场景下 CSS 为何不穿透
普通 CSS 无法影响 Shadow Root 内部的元素，这是浏览器原生隔离机制。如果你的目标元素在自定义组件内部（比如 <my-card></my-card> 渲染出的 shadowRoot），直接写 .tooltip 是无效的。
- 要用影子选择器：如
:host .tooltip（作用于宿主组件内部）、::slotted(.icon)（作用于 slot 插槽内容） - 或者改用 JS 注入：在
content.js中获取目标shadowRoot，再创建style标签 append 进去 - 注意：
css字段注入的样式永远只作用于 light DOM，对 shadowRoot 无感知
run_at 对 CSS 注入完全无效
run_at 只控制 JS 的执行时机，css 字段注入不受影响——它总是在页面开始解析 HTML 时就插入 <style></style> 标签并生效，比 document_start 还早。
- 这意味着：如果
content.js里通过document.body.classList.add("dark")切换主题，对应的.dark { ... }必须提前靠css字段注入，否则 class 加上了但没样式 - 反过来说：CSS 依赖 JS 动态创建的节点（比如
document.createElement("div").className = "tooltip"）完全没问题，只要节点挂进 DOM，样式就自动匹配 - 别在
content_scripts里给css配run_at，Chrome 会忽略它
最容易被忽略的是路径的“相对性”和 Shadow DOM 的天然隔离——前者导致文件根本没加载，后者让样式看似写了却毫无反应。调试时先确认路径能点开，再确认目标元素是否在 shadowRoot 里，比反复调选择器权重更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
