合法写法是直接在content_scripts数组项中与js同级声明css字段，值为相对于manifest.json的本地字符串数组，如["styles.css"]；路径不支持url或绝对路径，且多文件按序注入、后覆盖前。
直接在 content_scripts 数组项里声明 css 字段，路径必须是相对于 manifest.json 的本地字符串数组，否则样式根本不会加载——Chrome 连报错都不会给。
content_scripts.css 字段的合法写法
这个字段和 js 是同级并列关系，不是嵌套在某个对象里，也不是 js 的子属性。常见错误是把它写成 js: [{file: "main.js", css: ["style.css"]}] 或漏掉方括号。
-
css值必须是字符串数组，哪怕只引入一个文件，也得写成["styles.css"]，不能是"styles.css" - 路径只能是扩展包内真实存在的本地文件，不支持 URL、
chrome-extension://协议、绝对路径（如/css/main.css）或构建产物未实际输出的路径 - 如果用了 Vite/Webpack，要确认打包后
dist/目录下真有styles.css，且manifest.json中写的路径能对上 - 多个 CSS 按数组顺序注入，后一项的同名规则会覆盖前一项，行为等同于页面中多个
<link>标签的层叠逻辑
样式没生效？先查这三处硬性限制
Chrome 不报错，但样式“看不见”基本都卡在这几个地方：
-
matches规则没命中目标页：比如写了"matches": ["https://example.com/*"]，却访问了http://example.com（协议不匹配）或sub.example.com（子域名未覆盖） - CSS 文件 404：打开 DevTools → Application → Manifest → 展开
content_scripts条目，点开css列表里的路径，看是否显示 “Not found” - 选择器被页面样式压制：你写
.btn { color: red }，但页面用了.btn.primary:hover { color: blue !important }，权重不够就得加权或用!important（慎用）
Shadow DOM 内的元素怎么覆盖样式
普通 content_scripts.css 注入的样式无法穿透 Shadow Root，默认不生效。
- 若目标元素在自定义组件 shadowRoot 中，需改用影子选择器，例如
::host { display: block; }或::slotted(*) { color: green; } - 或者放弃声明式注入，改用 JS 动态创建
<style></style>并 append 到对应shadowRoot：shadowRoot.appendChild(styleEl) - 注意：
content_scripts.css本身不支持run_at，它总是在 DOM 构建前就注入；而 JS 注入时机由run_at控制，两者异步，别指望靠 JS 等 DOM 出来再插 style
什么时候该用 chrome.scripting.insertCSS
只在 Manifest V3 下需要**动态、按条件、运行时**注入 CSS 才用这个 API，比如响应用户点击 popup 后才加载某套主题样式。
- 必须在
manifest.json中声明"permissions": ["scripting"] -
content_scripts.css是静态声明、启动即注入；chrome.scripting.insertCSS是运行时调用，适合切换主题、A/B 测试等场景 - 它的注入时机和作用域更可控，但多一次异步调用开销，非必要不替换
css字段
最容易被忽略的是路径合法性与构建产物一致性——写对了 css: ["css/theme.css"]，但构建后 dist/css/theme.css 根本不存在，或者路径大小写不一致（尤其在 Windows 开发 macOS 部署时），样式就静默失效。务必用 Application → Manifest 实锤验证路径是否可访问。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
