Panels & Toasts

Goal: master the basic injection pattern — wait for the page, mount a floating panel, give feedback. This is the skeleton of almost every app.

main.js

// ==UserScript==
// @name Hello PluginX
// @description My first PluginX app
// @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");
});

Line by line

• @require dom — enables the LFDOM library; the runtime injects the LFDOM global for you
• LFDOM.ready(callback) — runs after the document leaves the loading state
• LFDOM.createFloatingRoot({ id }) — creates a fixed-position, high z-index root; the same id reuses the node, which makes hot reload safe
• LFDOM.toast(message) — shows an auto-dismissing notice

Why createFloatingRoot instead of appendChild?

The floating root handles z-index, reuse, and cleanup. To attach UI next to a page element instead, use LFDOM.mountAnchoredHTML() — it mounts/unmounts automatically as the anchor appears and disappears.