5-Minute Quickstart

Before starting, install PluginX, allow user scripts and sign in, then open the extension’s app development interface.

The whole development model in one sentence: a JS file with a metadata header is a complete app. These 12 lines are a fully working app — it mounts a floating panel on matching pages and shows a toast.

main.js — your first complete app

// ==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");
});

Run it

1. Create a project

   In the app manager, click "Create New Project", pick the Plain JavaScript template, and name it.

2. Paste the code

   The IDE opens automatically. Paste the snippet into the entry file main.js and change @match to the site you want (e.g. https://*.commerce.com/*).

3. Compile

   Click "Compile" at the top of the IDE (unsaved changes are saved first automatically). Saving (Ctrl+S) only stores the sources; it neither compiles nor updates the registered artifact.

4. Enable the app

   New projects start disabled. Turn on the enable switch in the IDE top bar or the app manager, or run app enable "Hello PluginX" in the IDE terminal (it resolves the app by name or bundleId). Once enabled, already-open matching pages are injected immediately (Chrome 135+).

5. Open a matching page

   Visit a page that matches your @match rule — you will see the floating panel and the toast. From then on the dev loop is: edit → compile → refresh.

A faster loop: liveDebug

Run liveDebug on in the IDE terminal to inject the current code into the matching tab. After that, every edit (no save needed) hot-reloads automatically a moment after you stop typing. liveDebug only affects the debug tab and does not update the registered artifact — click "Compile" once you are done.

That is all there is

The metadata header declares where to run and which libraries to use; the code body declares what to inject. Every larger app — including Vue projects — is an extension of this model.

Prefer not to hand-write it?

The IDE ships with an AI coding assistant. Describe your need in plain language (e.g. "add a price-compare button to every product card") and it will generate and debug the code with you.