Connect · JS SDK
JavaScript SDK
Every forum page exposes a global window.ForumSpark object that injected scripts can use to interact with the page.
Page context
Read the current page context to know where the user is:
ForumSpark.context.board // { name: "My Forum", slug: "my-forum" }
ForumSpark.context.page // "Forum Index" (page title string)
ForumSpark.context.forum // { id: 5, name: "General", slug: "general" } or null
ForumSpark.context.topic // { id: 42, title: "Hello", slug: "hello" } or null
ForumSpark.currentUser // User object or null for guests
Event bus
Subscribe to and emit events. All events are also dispatched as DOM CustomEvents on document.
// Subscribe to an event
const unsub = ForumSpark.on('livewire:message-sent', (data) => {
console.log('New message sent!', data);
});
// Unsubscribe later
unsub();
// Or manually unsubscribe
ForumSpark.off('livewire:message-sent', myHandler);
// Emit your own events (for inter-extension communication)
ForumSpark.emit('my-extension:loaded', { version: '1.0' });
// Listen via standard DOM events
document.addEventListener('forumspark:init', () => {
console.log('ForumSpark initialized!');
});
Bridged Livewire events
These real-time Livewire events are automatically bridged to the ForumSpark event bus, prefixed with livewire::
| Event | Fires when |
|---|---|
| livewire:attachment-uploaded | A file was attached to a reply (contains fileId, url, filename, mimeType) |
| livewire:file-uploaded | A single file upload completed |
| livewire:topic-watched | The user started watching the current topic |
| livewire:topic-unwatched | The user stopped watching the current topic |
| livewire:message-sent | A private message was sent |
| livewire:chat-dock-new-message | A new chat message was received via polling |
| livewire:multiquote-updated | The multi-quote selection changed |
| livewire:themeEditorSaved | Theme editor settings were saved |
| livewire:themeEditorDiscarded | Theme editor changes were discarded |
| livewire:style-saved | Theme stylesheet was saved |
Mini profile widgets
Register custom content blocks that appear in user profile popup cards:
ForumSpark.registerMiniProfileWidget({
name: 'steam-status',
state: (user) => ({ online: false }),
onInit: (user) => {
// Fetch data when widget initialises for this user
},
render: (user, storeRef) => {
return `<div x-data x-text="$store['${storeRef}'].online
? 'Online on Steam' : 'Offline'"></div>`;
}
});
Dark mode
ForumSpark.darkMode // true or false (getter)
ForumSpark.getDarkMode() // same as above
ForumSpark.toggleDarkMode() // toggles and persists (saves to user pref or cookie)