Office- und Google-Workspace-Add-ins entwickeln

Tabellen, Texte und E-Mails sind der Arbeitsalltag vieler Menschen. Entsprechend groß ist der Nutzen kleiner Erweiterungen, die wiederkehrende Handgriffe abnehmen: eine Funktion, die Daten aus einer Schnittstelle in Excel holt, eine Vorlage, die Word-Dokumente prüft, oder eine Schaltfläche, die eine E-Mail in ein Ticketsystem überträgt. Dieser Bereich behandelt Office von Microsoft, Google Workspace und einige weitere Produktivitäts-Apps mit eigener Plugin-Schnittstelle.

Office-Add-ins mit Office.js

Microsoft hat die Erweiterung von Office in den vergangenen Jahren auf Webtechnologien umgestellt. Ein Office-Add-in ist im Kern eine Webseite, die in einem Bereich von Excel, Word, Outlook oder PowerPoint angezeigt wird und über die JavaScript-Bibliothek Office.js mit dem geöffneten Dokument arbeitet. Der große Vorteil: Dasselbe Add-in läuft unter Windows, auf dem Mac, auf dem iPad und in Office im Web.

Typische Formen sind:

• Aufgabenbereich (Task Pane): eine Seitenleiste mit eigener Oberfläche.
• Befehle im Menüband: Schaltflächen, die eine Funktion ohne eigene Oberfläche auslösen.
• Benutzerdefinierte Funktionen in Excel: eigene Formeln, die wie SUMME in Zellen stehen.
• Inhalts-Add-ins: eingebettete Elemente direkt im Dokument, etwa Diagramme.

// Markiert in Excel alle Zellen der Auswahl mit negativem Wert
await Excel.run(async (context) => {
  const bereich = context.workbook.getSelectedRange();
  bereich.load("values");
  await context.sync();

  bereich.values.forEach((zeile, z) =>
    zeile.forEach((wert, s) => {
      if (typeof wert === "number" && wert < 0) {
        bereich.getCell(z, s).format.fill.color = "#FDE2E1";
      }
    }),
  );
  await context.sync();
});

Das Muster mit load() und context.sync() ist typisch für Office.js: Befehle werden gesammelt und gebündelt an Office übertragen. Wer Werte liest, ohne vorher zu laden und zu synchronisieren, bekommt einen Fehler.

Manifest, Gerüst und Test

Ein Office-Add-in wird durch ein Manifest beschrieben, das Name, Adresse der Webseite, benötigte Rechte und Einstiegspunkte festlegt. Neben dem klassischen XML-Manifest gibt es inzwischen ein einheitliches JSON-Manifest für Microsoft 365, das sich an das Format von Teams-Apps anlehnt. Welche Variante für welche Anwendung unterstützt wird, ändert sich noch; prüfen Sie den aktuellen Stand in der Dokumentation.

1. Gerüst erzeugen: Der Yeoman-Generator für Office (yo office) legt ein Projekt mit Manifest, Webseite und Entwicklungsserver an.
2. Entwicklungsserver starten: Er liefert die Dateien über HTTPS mit einem lokalen Testzertifikat aus.
3. Sideloading: Das Add-in wird in Excel, Word oder Outlook geladen, ohne im Store zu stehen.
4. Debuggen: Die Entwicklerwerkzeuge des eingebetteten Browsers zeigen Konsole und Netzwerk wie bei einer normalen Webseite.

Google Workspace: Apps Script

Bei Google heißt die Erweiterungsschicht Apps Script. Sie schreiben JavaScript, das auf Googles Servern läuft und über eingebaute Dienste wie SpreadsheetApp, DocumentApp oder GmailApp auf Ihre Daten zugreift. Ein Skript kann an ein einzelnes Dokument gebunden sein oder als eigenständiges Projekt laufen.

Google unterscheidet zwei Arten von Add-ons: Editor-Add-ons erweitern Sheets, Docs, Slides oder Forms mit Menüs und Seitenleisten. Google-Workspace-Add-ons nutzen eine einheitliche, kartenbasierte Oberfläche und können in mehreren Anwendungen gleichzeitig erscheinen, etwa in Gmail und im Kalender. Für die Veröffentlichung im Google Workspace Marketplace brauchen Sie ein Google-Cloud-Projekt, und je nach angeforderten Berechtigungen durchläuft die App eine OAuth-Überprüfung.

Thunderbird, Obsidian und Figma

Auch andere Produktivitäts-Apps setzen auf Webtechnologien:

• Thunderbird nutzt sogenannte MailExtensions. Sie folgen dem WebExtensions-Modell der Browser und ergänzen es um Schnittstellen für Nachrichten, Ordner, Adressbücher und das Verfassen von E-Mails. Ältere Erweiterungen mit direktem Zugriff auf die Programminterna funktionieren in aktuellen Versionen nicht mehr.
• Obsidian lädt Plugins in TypeScript, die über eine dokumentierte API auf den Notiztresor, den Editor und die Oberfläche zugreifen. Community-Plugins werden über einen Pull Request in ein öffentliches Verzeichnis-Repository eingereicht.
• Figma trennt Plugins in zwei Teile: Der Hauptcode läuft in einer Sandbox mit Zugriff auf das Dokument, die Oberfläche in einem eingebetteten Fenster. Beide tauschen Nachrichten aus. Veröffentlicht wird in der Figma Community.

Vergleich der Plattformen

Wer bereits Browser-Erweiterungen kennt, findet sich in Thunderbird und Figma schnell zurecht. Für Office.js und Apps Script lohnt ein Blick in die Programmiergrundlagen, vor allem zu asynchronem JavaScript, denn fast jeder Zugriff auf ein Dokument ist dort eine asynchrone Operation.