Nowly

Command Palette

Search for a command to run...

Deine erste Presence erstellen

Erstelle eine neue Nowly-Presence mit der CLI und sende deine erste Discord-Rich-Presence-Aktivität.

Beginne mit der CLI

Verwende die Nowly-CLI, um eine neue Presence anzulegen:

nowly init "Example"

Die CLI erstellt Metadaten, ein Presence-Skript und die erforderlichen Assets.

Grundlegender Presence-Code

Presence und Assets werden von der Laufzeitumgebung bereitgestellt - siehe Presence API und Assets. document ist die Standard-DOM-API des Browsers, verfügbar, weil Presences als Content-Skripte in der Erweiterung laufen.

Nur PresenceType (und andere Hilfsfunktionen wie createMediaTimestamps) muss aus @nowly/sdk importiert werden.

import { PresenceType } from "@nowly/sdk"

const presence = new Presence()

presence.on("UpdateData", async () => {
  await presence.setActivity({
    details: document.title,
    state: document.location.hostname,
    largeImageKey: Assets.Logo,
    type: PresenceType.Watching,
  })
})

Laufzeitablauf

Wenn der Nutzer eine passende URL besucht, lädt Nowly deine Presence. Die Presence liest den Seitenzustand und ruft setActivity auf. Die Erweiterung leitet diese Payload an Nowly Host weiter, der Discord aktualisiert.

Entwicklungszyklus

1

Gerüst erstellen

Erzeugt den Presence-Ordner, die Metadaten und die erforderlichen Assets.

nowly init "Example"
2

Konfigurieren

Lege Name, Autor, unterstützte URLs, Kategorie, Farbe, lokalisierte Beschreibungen und discordNative fest, falls Discord die Plattform bereits unterstützt.

Bearbeite metadata.json - siehe Metadata für alle verfügbaren Felder.

3

Implementieren

Schreibe die Presence-Logik mit dem Presence-SDK.

import { PresenceType } from "@nowly/sdk"

const presence = new Presence()

presence.on("UpdateData", async () => {
  await presence.setActivity({
    details: document.title,
    largeImageKey: Assets.Logo,
    type: PresenceType.Watching,
  })
})
4

Validieren

Prüft, ob deine Metadatenstruktur korrekt ist und die Assets vorhanden sind.

nowly validate
5

Bauen

Kompiliert die Presence zu einem eigenständigen Bundle.

nowly build example
6

Laden

Installiere die gebaute Presence im Browser. Zwei Methoden: eine vorgefertigte Erweiterung oder ein Zip-Drop.

Siehe Lokal laden und testen für den vollständigen Vergleich.

Beim ersten Mal (kein Nowly im Browser): backe die Presence in eine fertige Erweiterung ein.

nowly extension example

Lade dist/extension-dev als entpackte Erweiterung unter chrome://extensions.

Nowly ist bereits entpackt geladen: packe ein Zip und lege es unter Einstellungen → Erweitert → Debug ab. Store-Installationen lehnen unsignierte Zips ab.

nowly pack example
7

Testen

Öffne die Ziel-Website - die Presence aktiviert sich automatisch.

Besuche die Website

Wiederhole Implementieren → Bauen → Laden nach jeder Codeänderung.

Auf GitHub bearbeiten