Novidades do Chrome 132

Pete LePage

Veja o que é necessário saber:

• Dialog element ToggleEvent informa quando uma <dialog> foi aberta ou fechada.
• Capture elementos específicos para compartilhar vídeos.
• A API File System Access agora está disponível no Android e nas WebViews.
• E tem muito mais.

Sou Pete LePage. Vamos conferir as novidades para desenvolvedores no Chrome 132.

Eventos de alternância do elemento de caixa de diálogo

O elemento <dialog> é útil para representar qualquer tipo de caixa de diálogo em HTML. Ele está disponível em todos os navegadores, o que significa que funciona em todos os navegadores. Infelizmente, a implementação inicial não incluía uma maneira direta de detectar quando uma caixa de diálogo é aberta ou fechada.

A partir do Chrome 132, há uma nova ToggleEvent. Ele incorpora o mesmo ToggleEvent que é enviado por um popover. Para elementos <dialog>, quando showModal ou show é chamado, o <dialog> envia uma ToggleEvent com newState=open. Quando um <dialog> é fechado (usando um formulário, botão ou closewatcher), ele envia um ToggleEvent com 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");
  }
});

Captura de elementos

A plataforma da Web permite que um app da Web capture uma faixa de vídeo da guia atual ou da região. A partir do Chrome 132, os apps da Web podem capturar um elemento. Isso é especialmente útil quando os elementos são posicionados de forma que se sobrepõem uns aos outros.

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;

Confira a demonstração.

A API File System Access no Android e na WebView

A API File System Access já está disponível no Chrome para computador há algum tempo e permite que apps da Web interajam com arquivos no sistema de arquivos local dos usuários. A partir do Chrome 132, a API está disponível no Android e nas WebViews.

Para ler um arquivo, chame showOpenFilePicker(), que mostra um seletor de arquivos e retorna um identificador de arquivo que pode ser usado para ler o arquivo. Para salvar um arquivo no disco, use o identificador de arquivo que você recebeu anteriormente ou chame showSaveFilePicker() para receber um novo identificador de arquivo.

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

E muito mais.

Claro que há muito mais.

• Suporte a palavras-chave sideways-rl e sideways-lr para a propriedade CSS writing-mode.
• O lançamento de contêineres de rolagem com foco no teclado foi retomado.
• Um método bytes() foi adicionado às interfaces Request e Response, que retorna uma promessa resolvida com um Uint8Array.

Leitura adicional

Isso abrange apenas alguns destaques importantes. Confira os links a seguir para ver outras mudanças no Chrome 132.

• Notas da versão do Chrome 132.
• O que há de novo no Chrome DevTools (132).
• Atualizações do ChromeStatus.com para o Chrome 132.
• Calendário de lançamentos do Chrome.

Inscrever-se

Para ficar por dentro das novidades, inscreva-se no canal do YouTube para desenvolvedores do Chrome e receba uma notificação por e-mail sempre que lançarmos um novo vídeo.

Assim que o Chrome 133 for lançado, vamos informar as novidades do Chrome.