Frontend Script Boxes

Frontend Script Boxes låter operatörer spara små JavaScript-anpassningar i Tools och återanvända dem över flera frontendytor.

Stödda ytor just nu:

vbulletin – för forumfrontend, htmlsnippets och vBulletin-specifika anpassningar
feed – för /feed-relaterade widgets, embeddade nyhetsrutor och scriptdrivna externa sajtintegrationer

Adminytor

vBulletin-admin

URL: /admin/security/vbulletin
Åtkomst: endast admin
Sektion: vBulletin frontend script boxes

Feed-admin

URL: /feed-admin
Åtkomst: permission:rss
Sektion: Feed script snippets / embeddable widgets

Vad varje scriptbox innehåller

Varje sparad box stöder nu:

Script title – operatörsnamn på snippeten
External script src (valfritt) – URL som ska laddas som <script src="…">
AI instructions – operatörsprompt som kan auto-generera eller skriva om inline-scriptet
Inline script – rå JavaScript-kropp (utan omgivande <script>-tagg)
Sort order – laddnings-/körordning i den mergade bundlen
Enabled – avstängda boxar sparas kvar i admin men ingår inte i publik bundle/API-output

AJAX + autosave

Add script skapar en ny tom scriptbox via AJAX
Fält sparas automatiskt på blur/change
Save now tvingar ett omedelbart AJAX-save
AI → script sparar aktuella fältvärden, skickar AI-instruktionen till Tools/OpenAI och skriver över inline-scriptfältet med genererad JavaScript
Delete tar bort boxen via AJAX

Publika API-endpoints

`GET /api/managed-scripts/{surface}`

Returnerar de aktuella publika/aktiva scriptboxarna för en vald yta.

Tillåtna surface-värden:

vbulletin
feed

Query-parametrar

format=both (standard) – returnera både mergat script och separerade scripts[]
format=merged – returnera bara den mergade bundlen
format=separate – returnera bara separerade scripts[]
feed_ids=63,91 eller feeds=63,91 – valfria feed-urlid:n för feed-widgets som ska rikta sig mot vissa feeds
categories=coding,fact-check, groups=coding,fact-check eller category_slugs=coding,fact-check – valfria kategori-/gruppslugs för feed-widgets
limit=10 – valfri hint för antal poster/widgetrader, begränsad till 1..100

För ytan feed normaliseras dessa queryvärden och skickas tillbaka som query_context.filters, så embeddade widgets kan reagera på valda feeds/grupper utan att behöva uppfinna egen parsning.

Exempelsvar

{
  "ok": true,
  "surface": "feed",
  "count": 2,
  "bundle_url": "https://tools.tornevall.net/api/managed-scripts/feed/bundle.js",
  "bundle_tag": "<script src=\"https://tools.tornevall.net/api/managed-scripts/feed/bundle.js\"></script>",
  "query_context": {
    "surface": "feed",
    "filters": {
      "feed_ids": [63],
      "category_slugs": ["coding"],
      "limit": 10
    },
    "has_filters": true
  },
  "scripts": [
    {
      "id": 7,
      "surface": "feed",
      "title": "Compact feed widget",
      "script_body": "(() => { console.log('feed widget'); })();",
      "script_src": "",
      "ai_instruction": "Render a compact feed card widget",
      "sort_order": 10,
      "is_enabled": true,
      "updated_by_user_id": 1,
      "updated_at": "2026-04-27T21:40:00+00:00"
    }
  ],
  "merged_script": "(function(){\nwindow.__toolsManagedScriptBoxes = ..."
}

`GET /api/managed-scripts/{surface}/bundle.js`

Returnerar en färdig JavaScript-bundle som kan bäddas in direkt i frontend.

Exempel:

<script src="https://tools.tornevall.net/api/managed-scripts/vbulletin/bundle.js"></script>

Feed-widget med tydliga filter:

<script src="https://tools.tornevall.net/api/managed-scripts/feed/bundle.js?feed_ids=63&categories=coding&limit=10"></script>

Hur den mergade bundlen fungerar

Den mergade bundlen:

tar bara med aktiva boxar
sorterar dem på sort_order och därefter id
injicerar varje sparad script_src som extern <script src>-loader
kör varje inline-script en gång per sidladdning via ett internt window.__toolsManagedScriptBoxes-skydd
exponerar normaliserade embedfilter i window.__toolsManagedScriptBoxes.context.filters (feed_ids[], category_slugs[], limit)

Typiska användningar

vBulletin

byta logga eller frontendbeteende på utvalda sidor
injicera forumhelpers i HTML snippet-ytor
patcha DOM-text/labels för forumspecifika arbetsflöden

Feed-widgets

rendera en liten /feed-nyhetsruta på en valfri extern sajt
hämta /api/rss eller /api/rss/feed/{selector} och presentera egna kompakta sammanfattningar
kombinera ett återanvändbart externt helper-script med mindre inline-överstyrningar per sajt

Noteringar

Den nuvarande AI-hjälparen genererar bara JavaScript, inte hela HTML-sidor eller build-tool-projekt.
Om du behöver markup ska du beskriva DOM-strukturen i AI instructions så kan den genererade JavaScript-koden injicera markupen.
Klistra inte in omgivande <script>-taggar i inline-scriptfältet.

Tornevall Networks