Niestandardowe formaty internetowe dla interfejsu Async Clipboard API

Thomas Steiner

Do tej pory interfejs Async Clipboard API obsługiwał ograniczony zestaw Typy MIME do skopiowania i wklejenia ze schowka systemowego, w szczególności: text/plain, text/html i image/png. Przeglądarka zwykle oczyszcza je, na przykład usuwa osadzone script lub linki javascript: z ciągu HTML albo aby zablokować plik PNG bombardów dekompresyjnych.

W niektórych przypadkach może być jednak korzystne obsługa nieoczyszczonej treści w schowku:

• Sytuacje, w których aplikacja dotyczy samego dezynfekcji.
• Sytuacje, w których ważne jest, aby skopiowane dane były identyczne z wklejonymi.

W takich przypadkach interfejs Async Clipboard API obsługuje teraz niestandardowe formaty internetowe, które umożliwiają programistom pisanie dowolne dane do schowka.

Obsługa przeglądarek

Interfejs Async Clipboard API z obsługą obrazów jest obsługiwany od Chromium 76. Od wersji 104 interfejs Async Clipboard API obsługuje niestandardowe formaty internetowe na komputerach i w Chromium na urządzeniach mobilnych.

Zapisywanie niestandardowych formatów internetowych w schowku

Zapisywanie niestandardowych formatów internetowych w schowku jest prawie identyczne z zapisywaniem sformatowanych formatów, z tą różnicą, że przed typem MIME bloba należy dołączyć ciąg znaków "web " (w tym spacje na końcu).

// 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);
}

Odczytywanie ze schowka niestandardowych formatów internetowych

Podobnie jak w przypadku pisania, odczytywanie niestandardowych formatów internetowych ze schowka jest niemal identyczne czytnika sprawdzonych formatów. Jedyna różnica jest taka, aplikacja musi teraz szukać elementów schowka, których typ zaczyna się od "web ".

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);
}

Interoperacyjność z aplikacjami na poszczególnych platformach

Niestandardowe formaty internetowe, takie jak web image/jpeg, nie są typowe dla danej platformy rozumieją aplikacje (ponieważ oczekują image/jpeg). Z czasem aplikacje, których dotyczy problem, spodziewane jest dodanie obsługi takich formatów, np. akceptacji, jeśli ich deweloperzy uznają, że obsługują one niestandardowe formaty reklam, aby były odpowiednie dla użytkowników. W schowku systemu operacyjnego różne są dostępne w różnych formatach gotowych do użycia, co widać w raporcie zrzut ekranu systemu macOS poniżej.

Prezentacja

Aby ją wypróbować, wyświetl kod źródłowy, by zobaczyć, jak działa wersja demonstracyjna.

Podziękowania

Ten artykuł zrecenzował Joe Medley. i François Beaufort. Baner powitalny autorstwa Neona Tommy'ego, wykorzystany pod Licencja CC BY-SA 2.0.