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

Thomas Steiner

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

في بعض الحالات، قد يكون من المفيد السماح بعرض محتوى غير مُعَقَّم في الحافظة:

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

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

دعم المتصفح

إنّ واجهة برمجة التطبيقات Async Clipboard API ذاتها مع ميزة دعم الصور متوافقة اعتبارًا من الإصدار 76 من Chromium. إنّ التنسيقات المخصّصة للويب لـ Async Clipboard API متوافقة على أجهزة الكمبيوتر المكتبي وأجهزة Chromium الجوّالة اعتبارًا من الإصدار 104.

كتابة تنسيقات مخصّصة للويب في الحافظة

إنّ كتابة التنسيقات المخصّصة للويب في الحافظة متطابقة تقريبًا مع كتابة التنسيقات التي تمّت إزالة الأجزاء غير الصالحة منها، باستثناء الشرط بإضافة السلسلة "web " (بما في ذلك المساحة اللاحقة) إلى نوع MIME للعنصر المصغّر.

// 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 أدناه.

عرض توضيحي

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

الشكر والتقدير

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