الميزات الجديدة في الإصدار 132 من Chrome

Pete LePage

في ما يلي ما تحتاج إلى معرفته:

• يُعلمك عنصر الحوار ToggleEvent عند فتح <dialog> أو إغلاقه.
• التقاط عناصر معيّنة لمشاركة الفيديو
• تتوفّر واجهة برمجة التطبيقات File System Access API الآن على Android وفي WebViews.
• وهناك الكثير من الميزات الأخرى.

اسمي "بيت ليبيه". لنطّلع على الميزات الجديدة للمطوّرين في الإصدار 132 من Chrome.

أحداث تبديل عنصر مربّع الحوار

عنصر <dialog> هو عنصر مفيد لتمثيل أي نوع من مربّعات الحوار في HTML. تتوفّر هذه الميزة على نطاق واسع، ما يعني أنّها تعمل على جميع المتصفحات. لم يتضمّن التنفيذ الأولي طريقة مباشرة لرصد وقت فتح مربّع حوار أو إغلاقه.

ابتداءً من الإصدار 132 من Chrome، أصبح هناك رمز ToggleEvent جديد. وهي تتضمّن ToggleEvent نفسه الذي ترسله popover. بالنسبة إلى عناصر <dialog>، عند استدعاء showModal أو show، تُرسِل <dialog> ToggleEvent مع newState=open. عند إغلاق <dialog> (باستخدام نموذج أو زر أو closewatcher)، يتم إرسال ToggleEvent مع newState=closed.

const dialog = document.getElementById("myDialog");

// Fired just before dialog is shown/hidden
dialog.addEventListener("beforetoggle", (event) => {
  if (event.newState === "open") {
    console.log("Dialog is about to be shown");
  } else {
    console.log("Dialog is about to be hidden");
  }
});

// Fired just after dialog is shown/hidden
dialog.addEventListener("toggle", (event) => {
  if (event.newState === "open") {
    console.log("Dialog is now visible");
  } else {
    console.log("Dialog is now hidden");
  }
});

التقاط العناصر

يسمح نظام الويب الأساسي لتطبيق الويب بتسجيل مقطع فيديو لعلامة التبويب أو المنطقة الحالية، وبدءًا من الإصدار 132 من Chrome، يمكن لتطبيقات الويب تسجيل عنصر. ويُعدّ ذلك مفيداً بشكلٍ خاص عند وضع العناصر بطريقة قد تتداخل فيها مع بعضها.

const myElem = document.getElementById('elementToShare');

// Request screen sharing
const stream = await navigator.mediaDevices
  .getDisplayMedia({preferCurrentTab: true});
const [videoTrack] = stream.getVideoTracks();

// Restrict the video stream to myElem and its subtree
const restrictionTarget = await RestrictionTarget.fromElement(myElem);
await videoTrack.restrictTo(restrictionTarget);

// Set the video source to my newly restricted stream
video.srcObject = stream;

اطّلِع على العرض التوضيحي.

واجهة برمجة التطبيقات File System Access API على Android وWebView

أصبحت واجهة برمجة التطبيقات File System Access API متوفرة على إصدار Chrome للكمبيوتر المكتبي منذ بعض الوقت، وتسمح لتطبيقات الويب بالتفاعل مع الملفات على نظام الملفات على الجهاز لدى المستخدمين. اعتبارًا من الإصدار 132 من Chrome، أصبح واجهة برمجة التطبيقات متوفّرة الآن على Android وفي WebViews.

لقراءة ملف، يمكنك استدعاء showOpenFilePicker() الذي يعرض أداة اختيار ملفات، ثم يعرض معرّف ملف يمكنك استخدامه لقراءة الملف. لحفظ ملف على القرص، يمكنك استخدام معرّف الملف الذي حصلت عليه سابقًا أو استدعاء showSaveFilePicker() للحصول على معرّف ملف جديد.

async function saveFile(fileHandle) {
  if (!fileHandle) {
    fileHandle = await window.showSaveFilePicker();
  }
  const writable = await fileHandle.createWritable();
  await writable.write(contents);
  await writable.close();
}

وغير ذلك

هناك بالطبع الكثير من الميزات الأخرى.

• إتاحة الكلمات الرئيسية sideways-rl وsideways-lr لخاصية CSS writing-mode
• تم استئناف طرح حاويات التمرير التي يمكن التركيز عليها باستخدام لوحة المفاتيح.
• أضِف طريقة bytes() إلى الواجهات Request وResponse، والتي تُعِد وعدًا يتم حلّه باستخدام Uint8Array.

مراجع إضافية

لا يشمل ذلك سوى بعض النقاط الرئيسية. يمكنك الاطّلاع على الروابط التالية للاطّلاع على مزيد من التغييرات في الإصدار 132 من Chrome.

• ملاحظات الإصدار 132 من Chrome
• الميزات الجديدة في الإصدار 132 من "أدوات مطوّري البرامج في Chrome"
• تحديثات ChromeStatus.com بشأن الإصدار 132 من Chrome
• تقويم إصدارات Chrome

اشتراك

للاطّلاع على آخر الأخبار، يمكنك الاشتراك في قناة مطوّري Chrome على YouTube، وستصلك إشعارات عبر البريد الإلكتروني عند نشر فيديو جديد.

بعد طرح الإصدار 133 من Chrome، سنشارك معك الميزات الجديدة فيه.