html怎么制作油猴脚本界面_html Tampermonkey油猴脚本UI界面【全网最全】-html教程-PHP中文网

油猴脚本注入ui需动态创建dom并防护冲突：用固定id防重复、fixed定位+最大z-index确保置顶、内联css避免依赖；事件须用addeventlistener或挂载到window；焦点问题需settimeout延后focus；适配暗色模式应监听prefers-color-scheme。

html怎么制作油猴脚本界面_html tampermonkey油猴脚本ui界面【全网最全】

油猴脚本（Tampermonkey）本身不提供内置 UI 框架，所谓“制作界面”，本质是用原生 HTML + CSS + JS 动态注入 DOM —— 你不是在写一个独立网页，而是在目标页面上「偷偷塞进去」一块可交互的区域。

核心就一行：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 调用。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

改用 addEventListener 绑定事件，而不是 onclick="myHandler()"
如果必须用内联事件（比如动态生成的按钮），需显式挂载函数到 window：window.myHandler = function() { ... }
注意 DOM 是否已存在 —— 用 document.addEventListener("DOMContentLoaded", ...) 或 setTimeout(..., 0) 确保节点 ready
避免在 GM_xmlhttpRequest 回调里反复绑定同一按钮，会导致多次触发

油猴脚本注入的 UI 默认没有焦点管理逻辑，尤其当目标页有 focusin 监听器（比如防爬表单）时，你的 input 可能刚获得焦点就被强制移走。

给 input 加 autofocus 属性无效？手动调用 element.focus()，并包裹在 setTimeout(() => el.focus(), 10) 中绕过渲染队列
输入框被遮挡？检查父容器是否设置了 overflow: hidden，或相邻元素用了 transform 创建新层叠上下文，导致 z-index 失效
输入中文时候选框位置错乱？加 style="position: relative" 到 input 父级，避免被 fixed 容器裁剪
不要用 contenteditable="true" 替代 textarea —— 兼容性和光标行为差异大，移动端尤其不稳定

硬编码颜色（如 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 用的，不一定反映页面实际样式