Benutzerdefinierte Webformate für die Async Clipboard API

Thomas Steiner

Bisher wurden von der Async Clipboard API nur eine begrenzte Anzahl von MIME-Typen in die Zwischenablage des Systems kopiert und aus ihr eingefügt: text/plain, text/html und image/png. Dies wird in der Regel vom Browser bereinigt, um beispielsweise eingebettete script-Elemente oder javascript:-Links aus einem HTML-String zu entfernen oder PNG-Dekomprimierungsbomben zu verhindern.

In einigen Fällen kann es jedoch sinnvoll sein, unbereinigte Inhalte in der Zwischenablage zu unterstützen:

• Situationen, in denen sich die Anwendung um die Bereinigung selbst kümmert.
• Situationen, in denen es wichtig ist, dass die kopierten Daten mit den eingefügten Daten übereinstimmen.

In solchen Fällen unterstützt die Async Clipboard API jetzt benutzerdefinierte Webformate, mit denen Entwickler beliebige Daten in die Zwischenablage schreiben können.

Unterstützte Browser

Die Async Clipboard API an sich mit Bildunterstützung wird ab Chromium 76 unterstützt. Benutzerdefinierte Webformate für die Async Clipboard API werden ab Version 104 auf Computern und in der mobilen Version von Chromium unterstützt.

Benutzerdefinierte Formate im Web werden in die Zwischenablage geschrieben

Das Schreiben von benutzerdefinierten Webformaten in die Zwischenablage ist fast identisch mit dem Schreiben bereinigter Formate, mit der Ausnahme, dass dem MIME-Typ des Blobs der String "web " (einschließlich des nachgestellten Leerzeichens) vorangestellt werden muss.

// Fetch remote JPEG and GIF images and obtain their blob representations.
const [jpegBlob, gifBlob] = await Promise.all([
  fetch('image.jpg').then((response) => response.blob()),
  fetch('image.gif').then((response) => response.blob()),
]);

try {
  // Write the image data to the clipboard, prepending the blobs' actual
  // types (`"image/jpeg"` and "image/gif") with the string `"web "`, so
  // they become `"web image/jpeg"` and `"web image/gif"` respectively.
  // The code elegantly makes use of computed property names:
  // https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Object_initializer#computed_property_names.
  const clipboardItem = new ClipboardItem({
    [`web ${jpegBlob.type}`]: jpegBlob,
    [`web ${gifBlob.type}`]: gifBlob,
  });
  await navigator.clipboard.write([clipboardItem]);
} catch (err) {
  console.error(err.name, err.message);
}

Benutzerdefinierte Webformate aus der Zwischenablage lesen

Wie beim Schreiben ist das Lesen benutzerdefinierter Formate aus der Zwischenablage fast identisch mit dem Lesen bereinigter Formate. Der einzige Unterschied besteht darin, dass die App jetzt nach Elementen in der Zwischenablage suchen muss, deren Typ mit "web " beginnt.

try {
  // Iterate over all clipboard items.
  const clipboardItems = await navigator.clipboard.read();
  for (const clipboardItem of clipboardItems) {
    for (const type of clipboardItem.types) {
      // Discard any types that are not web custom formats.
      if (!type.startsWith('web ')) {
        continue;
      }
      const blob = await clipboardItem.getType(type);
      // Sanitize the blob if you need to, then process it in your app.
    }
  }
} catch (err) {
  console.error(err.name, err.message);
}

Interoperabilität mit plattformspezifischen Apps

Benutzerdefinierte Webformate wie web image/jpeg sind für typische plattformspezifische Anwendungen nicht geeignet, da sie mit image/jpeg zu rechnen haben. Im Laufe der Zeit wird davon ausgegangen, dass betroffene Apps solche Formate unterstützen, z. B. zur Aktivierung, wenn ihre Entwickler der Ansicht sind, dass benutzerdefinierte Webformate für ihre Nutzer relevant sind. In der Zwischenablage des Betriebssystems sind die verschiedenen Formate in mehreren Formaten verfügbar, die verwendet werden können, wie im Screenshot für macOS unten zu sehen ist.

Demo

Sie können die folgende Demo ausprobieren und sich den Quellcode ansehen, um zu sehen, wie die Demo funktioniert.

Danksagungen

Dieser Artikel wurde von Joe Medley und François Beaufort geprüft. Hero-Image von Neon Tommy, verwendet unter einer CC BY-SA 2.0-Lizenz.