Da ich jetzt schon mehrfach den Fehler gemacht hab Inhalte im lokal laufenden Kirby statt auf der Live-Seite zu erstellen, wollte ich den Unterschied zwischen lokalem CMS und Live-CMS im Tab sichtbar machen.

Um eigenes JavaScript im Kirby-Panel auszuführen, reichen ein paar Zeilen in der config Datei für die lokale Instanz, die auf die zu ladende JavaScript-Datei verweist:

'panel' => [
  'js' => 'assets/js/panel.js',
],

Innerhalb von panel.js hab ich eine Funktion geschrieben, die ein Emoji vor den Titel der Seite hängt. Alle Tabs mit lokalem Kirby sind dadurch leicht erkennbar. Das Hinzufügen des Emoji wird durch einen MutationObserver ausgelöst, der auf Änderungen reagiert:

function updateTitle() {
  if (!document.title.startsWith("⚙️")) {
    document.title = "⚙️ " + document.title;
  }
}

new MutationObserver(updateTitle).observe(document.querySelector("title"), {
  childList: true,
});
document.addEventListener("DOMContentLoaded", updateTitle);

Wahrscheinlich gibt es noch eine "sauberere" Variate, die auf Vue.js und Kirbys Panel reagiert. Der Vorteil dieser Variante ist, dass der Code auch weiterhin funktioniert, wenn Vue.js oder Kirby neue APIs nutzen oder Kirby zu einem ganz anderen Framework wechseln sollte.