油猴脚本注入UI需动态创建DOM并防护冲突：用固定id防重复、fixed定位+最大z-index确保置顶、内联CSS避免依赖；事件须用addEventListener或挂载到window；焦点问题需setTimeout延后focus；适配暗色模式应监听prefers-color-scheme。
油猴脚本（Tampermonkey）本身不提供内置 UI 框架，所谓“制作界面”，本质是用原生 HTML + CSS + JS 动态注入 DOM —— 你不是在写一个独立网页，而是在目标页面上「偷偷塞进去」一块可交互的区域。
怎么往页面里插入自定义 UI 元素
核心就一行：document.body.appendChild() 或 document.documentElement.appendChild()。但直接 append 容易被目标站样式污染、z-index 冲突、或被后续 JS 清掉，所以得加防护：
- 用
div包裹整个 UI，设固定id（如id="tm-ui-root"），每次插入前先document.getElementById("tm-ui-root")?.remove()，避免重复挂载 - 用
position: fixed+z-index: 2147483647（最大安全值）确保压在所有内容上 - CSS 建议内联写进
style属性里，或用document.createElement("style")注入，避免依赖外部资源 - 别用
document.write()—— 页面已加载完成，它会清空整个文档
按钮点击没反应？检查事件绑定时机和作用域
常见现象：UI 显示正常，但点击按钮控制台报 Uncaught ReferenceError: myHandler is not defined。这是因为油猴脚本默认运行在沙箱环境（@grant none 时更明显），函数不能直接暴露到全局作用域供 HTML onclick 调用。
- 改用
addEventListener绑定事件，而不是onclick="myHandler()" - 如果必须用内联事件（比如动态生成的按钮），需显式挂载函数到
window：window.myHandler = function() { ... } - 注意 DOM 是否已存在 —— 用
document.addEventListener("DOMContentLoaded", ...)或setTimeout(..., 0)确保节点 ready - 避免在
GM_xmlhttpRequest回调里反复绑定同一按钮，会导致多次触发
input 输入框无法聚焦或失焦后消失？留意 focus 和 z-index 冲突
油猴脚本注入的 UI 默认没有焦点管理逻辑，尤其当目标页有 focusin 监听器（比如防爬表单）时，你的 input 可能刚获得焦点就被强制移走。
立即学习“前端免费学习笔记（深入）”；
- 给
input加autofocus属性无效？手动调用element.focus()，并包裹在setTimeout(() => el.focus(), 10)中绕过渲染队列 - 输入框被遮挡？检查父容器是否设置了
overflow: hidden，或相邻元素用了transform创建新层叠上下文，导致z-index失效 - 输入中文时候选框位置错乱？加
style="position: relative"到 input 父级，避免被 fixed 容器裁剪 - 不要用
contenteditable="true"替代textarea—— 兼容性和光标行为差异大，移动端尤其不稳定
怎么让 UI 随目标页主题自动适配（暗色/亮色）
硬编码颜色（如 background: #fff）在暗色模式下会刺眼。更可靠的方式是读取目标页当前计算样式或 CSS 变量：
- 查
getComputedStyle(document.documentElement).color或getComputedStyle(document.body).backgroundColor做粗略判断 - 优先读取 CSS 自定义属性：
getComputedStyle(document.documentElement).getPropertyValue("--bg-color") - 稳妥做法：提供两个 class（
tm-ui-light/tm-ui-dark），用matchMedia("(prefers-color-scheme: dark)")监听系统偏好，并在切换时切换 class - 别依赖
document.querySelector("meta[name=theme-color]")—— 这个 meta 是给浏览器 UI 用的，不一定反映页面实际样式
最常被忽略的一点：油猴脚本的 @run-at 值直接影响 UI 插入时机。设成 document-idle 最稳妥；若设为 document-start，document.body 还不存在，append 会失败且无提示。
