تنسيقات الويب المخصّصة لواجهة Async Clipboard API

Thomas Steiner

حتى الآن، كانت Async Clipboard API تتيح استخدام مجموعة محدودة من أنواع MIME التي يمكن نسخها من حافظة النظام ولصقها فيها، وهي على وجه التحديد: text/plain و text/html وimage/png. عادةً ما ينظّف المتصفّح هذا المحتوى، على سبيل المثال، لإزالة عناصر script أو روابط javascript: مضمّنة من سلسلة HTML، أو لمنع هجمات التفجير من خلال فك الضغط في ملفات PNG.

ومع ذلك، في بعض الحالات، قد يكون من المستحسن تضمين المحتوى الذي لم يتم تصحيحه في الحافظة:

• الحالات التي يتعامل فيها التطبيق مع عملية التعقيم نفسه
• الحالات التي يكون فيها من الضروري أن تكون البيانات المنسوخة مطابقة للبيانات التي يتم لصقها

في مثل هذه الحالات، أصبحت Async Clipboard API متوافقة الآن مع التنسيقات المخصَّصة للويب التي تتيح للمطوّرين كتابة بيانات عشوائية في الحافظة.

دعم المتصفح

أصبحت واجهة برمجة التطبيقات Async Clipboard API في حد ذاتها متوافقة مع الصور اعتبارًا من الإصدار Chromium 76. إنّ التنسيقات المخصّصة للويب لـ 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 أدناه.

عرض توضيحي

يمكنك تجربة العرض التوضيحي وعرض رمز المصدر لمعرفة آلية عمل العرض التوضيحي.

شكر وتقدير

راجع هذا المستند كلّ من جو ميدلي وفرانسوا بافوي.