Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.sdk.fdo.alexvwan.me/llms.txt

Use this file to discover all available pages before exploring further.

​
Quick Reference: Injected Libraries

This is a quick reference for developers who want to quickly look up available libraries and their basic usage. These helpers and libraries are for the iframe UI runtime. Do not assume they exist in backend/bootstrap/plugin-host failure paths.

​
Window Helpers (Always Available)

// Backend Communication through a registered backend handler
const response = await window.createBackendReq("UI_MESSAGE", {
  handler: "plugin.handlerName",
  content: { data },
});

// If handler returns a privileged-action envelope:
const requestPayload =
  response?.result?.request ??
  response?.request ??
  response;
const privileged = await window.createBackendReq("requestPrivilegedAction", requestPayload);
// For non-ok responses, prefer SDK formatPrivilegedActionError(...) in plugin code.

// DOM Utilities
window.waitForElement('#my-element', (el) => { /* ... */ });
window.applyClassToSelector('my-class', '#target');
window.executeInjectedScript('console.log("hello")');

// Event Management
window.addGlobalEventListener('click', handler);
window.removeGlobalEventListener('click', handler);

​
CSS Libraries (Already Loaded)

​
Pure CSS

<div class="pure-g">
  <div class="pure-u-1-2">Column 1</div>
  <div class="pure-u-1-2">Column 2</div>
</div>
<button class="pure-button pure-button-primary">Click</button>

​
JavaScript Libraries

​
Notyf (Notifications)

const notyf = new Notyf();
notyf.success('Success!');
notyf.error('Error!');

​
Highlight.js (Syntax Highlighting)

<pre><code class="language-javascript">
const code = "example";
</code></pre>
<script>hljs.highlightAll();</script>

​
FontAwesome (Icons)

<i class="fas fa-home"></i>        <!-- Solid -->
<i class="far fa-star"></i>        <!-- Regular -->
<i class="fab fa-github"></i>      <!-- Brands -->

​
ACE Editor (Code Editor)

const editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/javascript");
editor.setValue("const x = 1;");

​
Split Grid (Resizable Panels)

Split({
  columnGutters: [{ track: 1, element: document.querySelector('.gutter') }]
});

​
Full Documentation

For complete documentation with examples, see INJECTED_LIBRARIES.md