Neu in Chrome 132

Pete LePage

Dazu sollten Sie Folgendes wissen:

• Mit dem Dialogelement „ToggleEvent“ erfahren Sie, wann ein <dialog> geöffnet oder geschlossen wurde.
• Bestimmte Elemente erfassen, um sie in Videos zu teilen.
• Die File System Access API ist jetzt für Android und in WebViews verfügbar.
• Und es gibt noch viel mehr.

Ich bin Pete LePage. Sehen wir uns an, was es Neues für Entwickler in Chrome 132 gibt.

Ein/Aus-Schaltflächenereignisse für Dialogfelder

Das <dialog>-Element ist ein nützliches Element, um beliebige Arten von Dialogfeldern in HTML darzustellen. Es ist Baseline Widely Available, d. h., es funktioniert in allen Browsern. Leider gab es in der ursprünglichen Implementierung keine direkte Möglichkeit, zu erkennen, wann ein Dialogfeld geöffnet oder geschlossen wird.

Ab Chrome 132 gibt es eine neue ToggleEvent. Es enthält dieselbe ToggleEvent, die von einem popover gesendet wird. Wenn für <dialog>-Elemente showModal oder show aufgerufen wird, sendet <dialog> ein ToggleEvent mit newState=open. Wenn ein <dialog> geschlossen wird (über ein Formular, eine Schaltfläche oder closewatcher), wird ein ToggleEvent mit newState=closed gesendet.

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

Elementaufnahme

Die Webplattform ermöglicht es einer Web-App, einen Videotrack des aktuellen Tabs oder einer Region aufzunehmen. Ab Chrome 132 können Web-Apps ein Element aufnehmen. Das ist besonders nützlich, wenn Elemente so positioniert sind, dass sie sich möglicherweise überlappen.

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;

Demo ansehen

Die File System Access API unter Android und WebView

Die File System Access API ist schon seit einiger Zeit für Chrome Desktop verfügbar und ermöglicht es Web-Apps, mit Dateien im lokalen Dateisystem des Nutzers zu interagieren. Ab Chrome 132 ist die API jetzt für Android und in WebViews verfügbar.

Wenn Sie eine Datei namens showOpenFilePicker() lesen möchten, wird eine Dateiauswahl angezeigt. Anschließend wird ein Dateihandle zurückgegeben, mit dem Sie die Datei lesen können. Wenn Sie eine Datei auf der Festplatte speichern möchten, können Sie entweder das zuvor abgerufene Dateihandle verwenden oder showSaveFilePicker() aufrufen, um ein neues Dateihandle zu erhalten.

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

…und vieles mehr

Natürlich gibt es noch viel mehr.

• Unterstützung für die Keywords sideways-rl und sideways-lr für die CSS-Eigenschaft writing-mode.
• Die Einführung von per Tastatur fokussierbaren Scroll-Containern wurde fortgesetzt.
• Fügen Sie den Schnittstellen Request und Response eine bytes()-Methode hinzu, die ein Promise zurückgibt, das mit einem Uint8Array aufgelöst wird.

Weitere Informationen

Hier werden nur einige wichtige Highlights behandelt. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 132.

• Versionshinweise zu Chrome 132
• Neu in den Chrome-Entwicklertools (Version 132)
• ChromeStatus.com-Updates für Chrome 132
• Chrome-Veröffentlichungskalender

Abonnieren

Wenn Sie immer auf dem neuesten Stand bleiben möchten, abonnieren Sie den YouTube-Kanal Chrome Developers. Sie erhalten dann eine E‑Mail-Benachrichtigung, wenn wir ein neues Video veröffentlichen.

Sobald Chrome 133 veröffentlicht wird, erfährst du hier, was es Neues gibt.