Ihr erstes g.*-Skript schreiben

Sie haben Guida installiert, ein paar Seiten geöffnet und vielleicht die Einstellungen angesehen. Was jetzt? Dieser Beitrag führt Sie durch ein erstes echtes Skript: Es navigiert zu einer Seite, liest Daten aus und speichert sie an einem nützlichen Ort.

Vorerfahrung mit Scripting ist nicht zwingend nötig. Wenn Sie JavaScript kennen, wirkt vieles vertraut. Wenn nicht, ist die API klein genug, um sie Schritt für Schritt zu lernen.

Skripteditor öffnen

Drücken Sie Ctrl+N oder wählen Sie File > New Script. Es öffnet sich ein leerer Editor-Tab mit IntelliSense. Tippen Sie g., um die API-Oberfläche zu sehen: mehr als 160 Methoden in Namespaces wie g.store, g.queue, g.search und weiteren.

Jedes Guida-Skript hat dieselbe Grundform:

async function main() {
  // Ihr Code hier
}

async ist wichtig, weil viele g.*-Methoden mit einem Live-Browser sprechen. Die Runtime ruft main() für Sie auf. Definieren Sie die Funktion und drücken Sie F5.

Navigieren und warten

Beginnen wir einfach. Wir öffnen Hacker News und warten, bis der DOM stabil ist:

async function main() {
  await g.nav.navigateToUrl("https://news.ycombinator.com");
  await g.dom.waitForDomStable();
}

g.nav.navigateToUrl() lädt eine URL im aktiven Tab. g.dom.waitForDomStable() wartet, bis keine neuen Elemente, Spinner oder lazy-loaded Inhalte mehr eintreffen. Zusammen sind sie der Grundzyklus vieler Automatisierungsskripte.

Wie g.*-Methoden funktionieren

JavaScript-Methoden geben ihr Ergebnis direkt zurück und werfen bei Fehlern eine Ausnahme:

try {
  const elements = await g.dom.getElements(".item", ["innerText"]);
  g.log("Gefunden: " + elements.length);
} catch (e) {
  g.log("Keine Items gefunden: " + e.message);
  return;
}

g.log() schreibt ins Console-Panel.

Daten aus der Seite extrahieren

Jetzt lesen wir Titel und Links von Hacker News:

async function main() {
  await g.nav.navigateToUrl("https://news.ycombinator.com");
  await g.dom.waitForDomStable();

  const items = await g.dom.getElements(
    ".titleline > a",
    ["innerText", "href"]
  );

  g.log("Storys gefunden: " + items.length);

  for (const item of items) {
    g.log(item.innerText);
  }
}

g.dom.getElements(selector, attributes) fragt den DOM ab und gibt strukturierte Objekte zurück, statt echte DOM-Knoten zu liefern.

Ergebnisse im Arbeitsbereich speichern

Logs sind gut zum Debugging. Für dauerhafte Daten verwenden Sie Arbeitsbereiche und g.store.

Öffnen Sie zuerst einen Arbeitsbereich über File > Open Workspace und wählen oder erstellen Sie einen Ordner. Dann speichern Sie jede Story:

async function main() {
  await g.nav.navigateToUrl("https://news.ycombinator.com");
  await g.dom.waitForDomStable();

  const items = await g.dom.getElements(
    ".titleline > a",
    ["innerText", "href"]
  );

  for (const item of items) {
    const key = item.innerText.substring(0, 80);
    g.store.put("stories", key, {
      title: item.innerText,
      url: item.href,
      scrapedAt: new Date().toISOString()
    });
  }

  const count = g.store.count("stories");
  g.log("Gespeicherte Storys: " + count);
}

g.store.put(collection, key, data) speichert ein JSON-Dokument in einer benannten Collection. Der Key ist innerhalb der Collection eindeutig. Daten liegen in store.db im Arbeitsbereich.

Queue mit Workern verarbeiten

Wenn Sie jede Story-URL besuchen und weitere Daten extrahieren möchten, reihen Sie sie zuerst ein:

async function main() {
  const stories = g.store.list("stories");
  for (const doc of stories) {
    g.queue.enqueue("to-visit", {
      url: doc.data.url,
      title: doc.data.title
    });
  }

  const count = g.queue.count("to-visit");
  g.log(count + " URLs eingereiht");
}

Erstellen Sie dann im Arbeitsbereich ein Skript scripts/visit-story.js:

async function main() {
  const ctx = g.worker.getContext();

  await g.nav.navigateToUrl(ctx.item.data.url);
  await g.dom.waitForDomStable();

  const title = await g.dom.extractContent("h1");
  g.log("Besucht: " + (title || ctx.item.data.title));

  g.queue.commit(ctx.item.id);
}

Worker öffnen mehrere Browser-Tabs und verarbeiten Queue-Items parallel. Jeder Tab führt das Skript unabhängig aus.

async function main() {
  g.workers.start({
    queue: "to-visit",
    script: "scripts/visit-story.js",
    concurrency: 3,
    layout: "horizontal"
  });
}

Das Workers-Panel zeigt Fortschritt, Fehler, Queue-Tiefe und Steueraktionen.

Nächste Schritte

Sie haben den Kernablauf gesehen: navigieren, extrahieren, speichern, einreihen, Worker starten. Von hier aus können Sie weitergehen:

• MCP-Integration - eine KI den Browser mit derselben g.*-API beaufsichtigt bedienen lassen
• Eigene Werkzeuge - HTTP- oder Skriptwerkzeuge in tools.json definieren
• API-Referenz - die API-Kategorien und Methoden erkunden

Der Skripteditor hat IntelliSense. Tippen Sie g. und lassen Sie die Vervollständigung führen.