New in Chrome 100

Pete LePage

Here's what you need to know:

Chrome 100 has a three digit version number
Take a stroll down memory lane and celebrate #100CoolWebMoments since Chrome's first release.
There are some important changes to the user agent string.
The Multi-Screen Window Placement API makes it possible to enumerate the displays connected to a user's machine, and place windows on specific screens.
And there's plenty more.

I'm Pete LePage. Let's dive in and see what's new for developers in Chrome 100.

Chrome 100

When browsers first reached version 10, there were a few issues as the major version number went from one digit to two. Hopefully, we learned a few things that'll ease the transition from two digits to three.

Chrome 100 is available now, and Firefox 100 ships very soon. These three digit version numbers have the potential to cause issues on sites that rely on identifying the browser version in some way. Over the last few months, the Firefox team, and the Chrome team, ran experiments in which the browser reported version number 100, even though it wasn't.

This led to a few reported issues, many of which have already been fixed. But, we still need your help.

If you are a website maintainer, test your website with Chrome and Firefox 100.
If you develop a User-Agent parsing library, add tests to parse versions greater than and equal to 100.

Check out Chrome and Firefox soon to reach major version 100 on web.dev for more details.

100 Cool Web Moments

100 Cool Web Moments promo image

It's been exciting to watch the web grow, and see all the amazing stuff you've built over the last 100 Chrome releases. We thought it would be fun to take a stroll down memory lane and celebrate #100CoolWebMoments that have happened in the last 14 years.

Tell us which moments you loved the most. If we've missed anything (and we're sure we have), tweet us @Chromiumdev with #100CoolWebMoments. Enjoy!

Reduced User-Agent string

Speaking of the user agent, Chrome 100 will be the last version to support an unreduced User-Agent string by default. This is part of a strategy to replace use of the User-Agent string, with the new User-Agent Client Hints API.

Starting in Chrome 101, the user agent will be gradually reduced.

Check out User Agent Reduction Origin Trial and Dates on the [Chromium blog][crblog], to learn more about what will be removed, and when.

Multi-screen window placement API

For some apps, opening new windows and putting them in specific places, or specific displays is an important feature. For example, when using Slides to present, I want the slides to appear full screen on the primary display, and my speaker notes to appear on the other display.

The Multi-Screen Window Placement API makes it possible to enumerate the displays connected to the user's machine, and place windows on specific screens.

You can quickly check if there's more than one screen connected to the device with window.screen.isExtended.

const isExtended = window.screen.isExtended;
// returns true/false

But, the key functionality is in window.getScreenDetails(), which provides details about the attached displays.

const x = await window.getScreenDetails();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

For example, you can determine the primary screen, then use requestFullscreen() to make an element full screen on that display.

try {
  const screens = await window.getScreenDetails();
  const primary = screens
         .filter((screen) => screen.primary)[0]
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

And it provides a way to listen for changes, for example if a new display is plugged in or removed, the resolution changes, and so on.

const screens = await window.getScreenDetails();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

Check out Tom's updated article Managing several displays with the Multi-Screen Window Placement API on web.dev for a deeper dive.

And more!

Of course there's plenty more.

There's a new forget() method for HID Devices that allow you to revoke a permission to an HID Device that was granted by a user.

// Request an HID device.
const [device] = await navigator.hid.requestDevice(opts);


// Then later, revoke permission to the device.
await device.forget();

And for WebNFC, the makeReadOnly() method allows you to make NFC tags permanently read-only.

const ndef = new NDEFReader();
await ndef.makeReadOnly();