פורמטים מותאמים אישית לאינטרנט עבור Async Clipboard API

Thomas Steiner

עד עכשיו, Async Clipboard API תמך בקבוצה מוגבלת של סוגי MIME שאפשר להעתיק ללוח המערכת ולהדביק ממנו, ובפרט: text/plain,‏ text/html ו-image/png. הדפדפן בדרך כלל מנקה את הנתונים האלה, למשל כדי להסיר מחרוזת HTML אלמנטים מוטמעים מסוג script או קישורים מסוג javascript:, או כדי למנוע התקפות של פצצת דחיסה ב-PNG.

עם זאת, במקרים מסוימים כדאי לתמוך בתוכן לא מסונן בלוח העריכה:

• מצבים שבהם האפליקציה מטפלת בתהליך החיטוי עצמה.
• מצבים שבהם חשוב מאוד שהנתונים המועתקים יהיו זהים לנתונים שמוצמדים.

במקרים כאלה, ה-API של הלוח האסינכרוני תומך עכשיו בפורמטים מותאמים אישית לאינטרנט שמאפשרים למפתחים לכתוב נתונים שרירותיים בלוח.

תמיכה בדפדפנים

החל מגרסה 76 של Chromium, יש תמיכה ב-Async Clipboard API עם תמיכה בתמונות. פורמטים מותאמים אישית של אינטרנט ל-Async Clipboard API נתמכים במחשב וב-Chromium לנייד החל מגרסה 104.

כתיבת פורמטים מותאמים אישית לאינטרנט בלוח העריכה

כתיבת פורמטים מותאמים אישית של אינטרנט ללוח היא כמעט זהה לכתיבת פורמטים שהושמטו, מלבד הדרישה להוסיף את המחרוזת "web " (כולל הרווחים בסוף) לסוג ה-MIME של ה-blob.

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

קריאת פורמטים מותאמים אישית של אתרים מהלוח

בדומה לכתיבת טקסט, קריאת פורמטים מותאמים אישית של אינטרנט מהלוח דומה כמעט לקריאת פורמטים שהושמטו מהם נתונים אישיים. ההבדל היחיד הוא שעכשיו האפליקציה צריכה לחפש פריטים בלוח העריכה שהסוג שלהם מתחיל ב-"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);
}

יכולת פעולה הדדית עם אפליקציות ספציפיות לפלטפורמה

פורמטים מותאמים אישית באינטרנט, כמו web image/jpeg, הם לא משהו שאפליקציות רגילות ספציפיות לפלטפורמה מבין (כי הם מצפים ל-image/jpeg). עם הזמן, אפליקציות מודאגות צפויות להוסיף תמיכה בפורמטים כאלה כהצטרפות אם המפתחים שלהן יראו שהתמיכה שלהם בפורמטים מותאמים אישית לאינטרנט תהיה רלוונטית למשתמשים שלהם. בלוח העריכה של מערכת ההפעלה, הפורמטים השונים נמצאים במספר פורמטים מוכנים לשימוש, כפי שמוצג בצילום המסך של macOS שבהמשך.

הדגמה (דמו)

תוכלו לנסות את ההדגמה ולהציג את קוד המקור כדי לראות איך פועלת ההדגמה.

תודות

המסמך הזה נבדק על ידי Joe Medley ו-François Beaufort.