5 分钟上手

开始前，请先安装 PluginX、开启用户脚本权限并登录，再打开插件的应用开发界面。

一句话概括PluginX应用的开发模型：一个带元信息头的 JS 文件，就是一个完整的应用。下面这 12 行代码就是一个可以直接运行的应用——它在匹配的页面上挂一个浮动面板，并弹出一条 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");
});

跑起来

创建项目
回到应用管理页，点击右上角「创建新项目」，模板选择 Plain JavaScript，填一个名字。
粘贴代码
创建完成后会自动打开 IDE，把上面的代码粘贴到入口文件 main.js 里，将 @match 改成你想注入的网站（例如 https://*.commerce.com/*）。
编译
点击 IDE 顶部的「编译」按钮（有未保存的改动时会自动先保存）。保存（Ctrl+S）只把源码存下来，不会编译，也不会更新已注册的产物。
启用应用
新建的项目默认未启用。在 IDE 顶栏或应用管理页打开启用开关，或在 IDE 终端执行 app enable "Hello PluginX"（按应用名称或 bundleId 寻址）。启用后，已打开的匹配页面会被即时注入（Chrome 135+）。
打开目标页面
访问一个命中 @match 规则的页面，你会看到浮动面板和「应用注入成功」的 toast。之后的开发循环是：改代码 → 编译 → 刷新页面。

更快的循环：liveDebug

在 IDE 终端执行 liveDebug on，系统会把当前代码注入匹配的标签页；之后每次编辑（无需保存）都会在停止输入片刻后自动热重载。liveDebug 只影响调试页，不更新已注册的产物——调好之后仍需点「编译」。

就这么多

元信息头声明「在哪运行、用什么库」，代码本体做「注入什么」。所有更复杂的应用（包括 Vue 工程）都是这个模型的延伸。

不想手写？

IDE 内置 AI 编程助手，创建项目后直接用自然语言描述需求（例如「在商品列表页每个商品卡片上加一个比价按钮」），助手会帮你生成并调试代码。

5 分钟上手 ​

跑起来 ​

5 分钟上手

跑起来