content_scripts 的 css 字段必须是字符串数组，如["styles.css"]，不可为字符串；路径须相对manifest.json且不能跨出扩展根目录；若格式错误或路径404，chrome静默失败不报错。
content_scripts 的 css 字段必须是字符串数组
直接写 css: "styles.css" 会静默失败——Chrome 不报错，但样式根本不会加载。Manifest V3 要求 css 字段必须是字符串数组，哪怕只引入一个文件：css: ["styles.css"]。路径是相对于 manifest.json 所在目录的相对路径，不支持 URL、绝对路径或 ../ 跨出扩展根目录的写法。
常见错误包括：
-
css: "css/main.css"→ 必须改为["css/main.css"] -
css: ["./styles.css"]→.前缀多余，应写成["styles.css"] -
css: ["https://example.com/style.css"]→ 浏览器拒绝加载，且不提示
样式没生效？先查匹配规则和路径 404
打开 Chrome 开发者工具 → Application → Manifest → 展开 content_scripts 条目，能看到实际解析出的 css 资源列表。点进去如果显示 “Not found”，说明路径错了；如果列表为空，说明 css 字段格式非法（比如不是数组）。
另外检查 matches 是否命中目标页面：
- 写
"matches": ["https://example.com/*"]却访问http://example.com→ 协议不匹配，样式不注入 - 写
"matches": ["*://*.github.com/*"]却访问https://gist.github.com→ 子域名匹配失败 - SPA 应用路由变化（如
/dashboard→/profile）后 DOM 重绘，但 CSS 只在初始匹配时注入一次，后续动态内容需靠选择器自身覆盖能力
为什么加了 !important 还被覆盖？
你的 .btn { color: red !important } 仍无效，大概率是因为目标网站用了内联样式：<button style="color: blue !important"></button>。CSS 层叠规则中，内联样式 + !important 权重高于任何外部样式表规则。
此时只能换策略：
- 改用更高特异性选择器，例如
body #app .header button.btn（但注意避免过度嵌套） - 用 JS 动态修改
element.style.color = "red"（绕过 CSS 层叠） - 确认是否在 Shadow DOM 内：普通 CSS 无法穿透，得用
:host(.my-theme) .btn或向 shadowRoot 插入<style></style>
动态内容样式失效？别只靠静态注入
静态声明的 css 字段只在页面加载时注入一次。如果目标网站用 JS 动态插入新节点（如 Modal、Tooltip、React 组件 mount），而你的 CSS 规则依赖这些节点的 class，只要选择器匹配，它依然生效——CSS 是全局的，不关心节点何时出现。
但若动态节点的 class 名由 JS 随机生成（如 class="Button_sc123abc"），静态 CSS 就无能为力了。这时需要：
- 监听 DOM 变化，用
chrome.scripting.insertCSS在运行时注入带动态 class 名的规则 - 改用 MutationObserver 拦截新节点，再调用
element.classList.add()触发已有样式 - 避免依赖不稳定 class，转而用属性选择器（
button[data-role="primary"]）或结构位置（main > section:first-child .title）
最易被忽略的一点：CSS 注入没有 run_at 控制——它总在 document_start 阶段就插入 <link>，比 JS 更早。所以如果你在 content script 里等 document.body 存在才操作 DOM，样式其实早已就位；反过来，若样式依赖 JS 创建的 class，那 class 必须提前加好，否则样式“存在却无用”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
