Benutzerdefinierte Webformate für die Async Clipboard API

Thomas Steiner

Bisher unterstützte die Async Clipboard API eine begrenzte Anzahl von MIME-Typen, die in die Systemzwischenablage kopiert und eingefügt werden sollen, insbesondere: text/plain, text/html und image/png. Der Browser überprüft dies normalerweise, um eingebettete Inhalte script-Elemente oder javascript:-Links aus einem HTML-String oder um PNG zu verhindern Dekomprimierungsbombenangriffe.

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

• Situationen, in denen die Anwendung mit der Bereinigung selbst arbeitet.
• Situationen, in denen es entscheidend ist, dass die kopierten Daten mit den eingefügten Daten identisch sind

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

Unterstützte Browser

Die Async Clipboard API an sich mit Bildunterstützung wird ab Chromium 76 unterstützt. Benutzerdefiniert (Web) Formate für die Async Clipboard API werden seit dem Version 104.

Benutzerdefinierte Webformate in die Zwischenablage schreiben

Das Schreiben benutzerdefinierter Webformate in die Zwischenablage ist fast identisch mit dem Schreiben von bereinigten Formaten, mit der Ausnahme, dass dem MIME-Typ des Blobs der String "web " (einschließlich des abschließenden 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 werden aus der Zwischenablage gelesen

Wie beim Schreiben ist das Lesen von benutzerdefinierten Webformaten aus der Zwischenablage fast identisch mit Bereinigende Formate lesen. Der einzige Unterschied ist, Die App muss jetzt nach Elementen in der Zwischenablage suchen, 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 nicht so plattformspezifisch Anwendungen verstehen (da sie image/jpeg erwarten würden). Im Laufe der Zeit sind besorgte Apps erwartet, dass sie solche Formate unterstützen, z. B. eine Opt-in-Funktion, wenn ihre Entwickler der Meinung sind, dass sie das Web unterstützen. benutzerdefinierte Formate so anpassen, dass sie für ihre Nutzer relevant sind. In der Zwischenablage des Betriebssystems befinden sich die verschiedenen Formate in mehreren Formaten zur Verfügung stehen, wie Sie in der Screenshot für macOS unten.

Demo

Sie können die Demo unten ausprobieren und Sehen Sie sich den Quellcode an, um zu sehen, wie die Demo funktioniert.

Danksagungen

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