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

Thomas Steiner

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

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

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

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

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

החל מ-Chromium 76 יש תמיכה בכל ממשק ה-API של הלוח האסינכרוני עם תמיכה בתמונות. התאמה אישית של האתר עבור ממשק ה-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 בהמשך.

הדגמה (דמו)

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

אישורים

המאמר הזה נבדק על ידי ג'ו מדלי ו-François Beaufort. התמונה הראשית (Hero) של Neon Tommy, שנמצאת בשימוש רישיון CC BY-SA 2.0.