content script 可安全使用 innerhtml/textcontent 修改页面内容，但需确保目标元素已挂载、避开 csp 限制、避免 innerhtml += 等危险操作；优先用 textcontent 处理纯文本，insertadjacenthtml 替代 innerhtml += 以保事件与状态。
Content Script 不是“往 HTML 里写内容”的通用手段，它是浏览器扩展（Chrome/Firefox）在特定页面上下文中执行 JS 的机制；直接用 innerHTML 或 textContent 修改页面内容，和 Content Script 是两层事——前者是 DOM 操作，后者是注入时机与权限控制。
为什么 document.getElementById(...) 在 Content Script 里返回 null
常见错误现象：脚本执行了，但 document.getElementById("xxx") 返回 null，后续操作报错。
根本原因不是 DOM 方法失效，而是注入时机早于目标元素挂载。Content Script 默认在文档开始加载时（document_idle）注入，但若目标元素由框架（React/Vue）、懒加载或 JS 动态生成，它此时还不存在。
- 确认 manifest 中的
run_at配置：不写默认为"document_idle"；设为"document_end"可等 DOM 解析完再执行（仍不等 JS 渲染） - 对动态渲染页面，改用
MutationObserver监听目标容器变化，而非一次性查找 - 避免在
content_scripts数组里直接写内联脚本；分离成独立.js文件，确保执行顺序可控
Content Script 能否直接改 innerHTML？可以，但有边界
能，前提是目标元素已存在、且你有访问权限。Content Script 运行在页面 DOM 上下文中，所有标准 DOM API 都可用，包括 innerHTML、textContent、insertAdjacentHTML。
但要注意三个硬限制：
- 无法修改
<script></script>、<style></style>标签内部文本（会被浏览器忽略或报错） - 修改
iframe内容需额外声明"all_frames": true，且目标 iframe 必须同源或已获跨域权限 - 修改后绑定的事件监听器（如
onclick="..."）不会自动生效——内联 handler 是 HTML 解析阶段注册的，innerHTML替换后只保留静态字符串
示例安全写法：document.getElementById("status").textContent = "已注入"; —— 纯文本、无解析、不触发重排。
为什么用 insertAdjacentHTML('beforeend', ...) 比 innerHTML += ... 更可靠
innerHTML += 看似方便，实则危险：它会先读取当前 HTML 字符串，拼接新内容，再全量重新解析并替换整个子树。这导致：
- 原有
<input>的焦点、滚动位置、表单值全部丢失 - 已绑定的事件监听器（通过
addEventListener）被清空 - 若原内容含未转义的用户数据，二次解析可能触发 XSS（比如之前存过
<img src="x" onerror="alert(1)">）
而 insertAdjacentHTML('beforeend', htmlString) 只解析传入的新字符串，插入到末尾，其余节点完全不动。更轻量，也更可控。
典型场景：向评论区追加一条新评论，就该用它，而不是 el.innerHTML += '<div>...</div>'。
修改后内容不显示？检查 CSP 和扩展权限配置
即使 DOM 操作成功，内容也可能被拦截或隐藏：
- 目标网站启用了严格 CSP（Content-Security-Policy），禁止内联脚本或动态创建的
<script></script>—— 此时innerHTML插入带onclick的 HTML 会静默失败 - manifest 中未声明对应域名权限，比如匹配规则写成
"matches": ["*://example.com/*"]，但实际访问的是https://www.example.com，漏了www子域 - 扩展未启用“在文件 URL 上运行”选项，却试图注入本地 HTML 文件（
file://协议）
调试建议：打开开发者工具 → Console，看是否有 Refused to execute inline script 或 Access to script at '...' from origin '...' is blocked 类报错。
真正容易被忽略的点是：Content Script 的 DOM 操作能力，和页面本身是否允许被改，是两回事。前者靠浏览器扩展机制保障，后者受 CSP、同源策略、框架虚拟 DOM 层级等多重约束。别假设“JS 能跑，就一定能改到”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
