Content script 不能直接操作 popup.html，因二者运行在隔离环境，需通过 chrome.runtime.sendMessage/onMessage 通信；浮动面板宜用 iframe 封装以避免样式污染；matches 仅支持 glob 模式，须精准配置；DOM 动态变化需用 MutationObserver 监听并处理 shadow DOM。
Content script 为什么不能直接操作 popup.html？
因为 content script 和 popup.html 运行在完全隔离的执行环境里：前者注入到目标网页 DOM 中，后者是扩展 UI 的独立 HTML 页面。它们之间没有共享作用域、变量或函数，document 指向的也不是同一个上下文。
常见错误现象是：你在 popup.js 里写了 document.getElementById('btn')，却试图用 content script 去监听这个按钮——根本找不到元素，也不会报错，只是事件不触发。
- content script 只能访问它被注入的那个网页的
document - popup 页面的 JS（如
popup.js）只能访问popup.html自身的 DOM - 两者通信必须走
chrome.runtime.sendMessage()/chrome.runtime.onMessage
怎么把浮动面板加到网页底部而不被页面样式污染？
直接往 document.body 插入 div 很容易被网站全局 CSS（比如 div { margin: 0; padding: 0; }）覆盖掉定位或尺寸。这不是 bug，是真实场景中高频踩坑点。
推荐做法是用 iframe 封装浮动面板内容，再注入到页面底部。iframe 自带样式隔离，避免和宿主页面冲突。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 在 content script 中动态创建
iframe，设置src为扩展内托管的 HTML（需声明在web_accessible_resources） - 用
position: fixed; bottom: 0; left: 0; width: 100%; height: 60px;控制位置 - 不要用
z-index: 9999这种魔数，先查页面最高 z-index 再 +1（可用getComputedStyle遍历）
manifest.json 里 content_scripts 的 matches 怎么写才不漏匹配？
matches 不支持正则，只认 glob 模式。写错会导致脚本压根不注入，且控制台无提示——这是最隐蔽的问题之一。
例如想匹配所有 HTTP 页面但排除 localhost，不能写 "http://*/*" 然后靠 JS 过滤，因为那样会多注入一次再白跑逻辑；应该精准声明：
-
"http://*/*"—— 匹配所有 HTTP 页面（不含 HTTPS） -
"https://*/*"—— 单独加一条匹配 HTTPS -
"<all_urls>"</all_urls>—— 最暴力，但 Chrome 会警告权限过宽 - 排除 localhost：用
"http://[a-z0-9.-]/*"或干脆不用 glob，改用run_at: "document_idle"+ JS 判断window.location.hostname
content script 注入后 DOM 变化没反应？检查这三件事
页面用了 React/Vue/Angular，或内容异步加载（比如无限滚动），content script 一次性执行完就退出，后续新增节点不会自动处理。
不是脚本写错了，而是没监听 DOM 变化。解决方案只有两个有效路径：
- 用
MutationObserver监听body或特定容器，对新节点调用你的处理函数 - 把逻辑封装成函数（如
processElements()），在 observer 回调和初始执行时都调用一次 - 避免用
document.querySelectorAll一次性取全部——它返回静态 NodeList，后续新增元素不在其中
真正麻烦的是第三方库自己挂载的 shadow DOM，MutationObserver 默认监听不到，得显式配置 { subtree: true, childList: true } 并手动遍历 shadowRoot。
