浮层与 Toast

目标：掌握最基础的注入模式——等待页面就绪、挂一个浮动面板、给用户反馈。这是几乎所有应用的骨架。

main.js

// ==UserScript==
// @name Hello PluginX
// @description 我的第一个PluginX扩展应用
// @match https://example.com/*
// @require dom
// ==/UserScript==

LFDOM.ready(() => {
  const panel = LFDOM.createFloatingRoot({ id: "hello-pluginx" });
  panel.innerHTML = "<div style='padding:10px 14px'>Hello, PluginX!</div>";
  LFDOM.toast("应用注入成功 / App injected");
});

逐行拆解

• @require dom — 声明使用 LFDOM 库，运行时会把全局变量 LFDOM 注入给你
• LFDOM.ready(callback) — 等文档脱离 loading 状态再执行，避免操作还不存在的 DOM
• LFDOM.createFloatingRoot({ id }) — 创建一个固定定位、高 z-index 的浮层根节点，重复调用同一个 id 会复用节点，天然支持热重载
• LFDOM.toast(message) — 弹出一条自动消失的提示

为什么用 createFloatingRoot 而不是直接 appendChild？

浮层根节点会处理 z-index、复用与清理。如果你想把 UI 挂在页面某个元素旁边（而非浮动），用 LFDOM.mountAnchoredHTML()，它会跟随锚点元素的出现/消失自动挂载/卸载。