Google Chrome 100 is available with new Chrome DevTools features and a new dedicated API for window placement management


Google has released the Chrome 100 update for Windows, macOS, Linux, Android and iOS: The Chrome team is excited to announce the arrival of Chrome 100 on the stable channel for Windows, Mac and Linux. Chrome 100 has also arrived in our new extended stable channel for Windows and Mac. It will be gradually rolled out over the coming days/weeks. Chrome 100 also introduces a new API dedicated to managing the placement of windows on a configuration with several screens. With this release, Google added the Digital Goods API so web apps can make in-app purchases using the Google Play Store.

In addition to new features and improvements, Chrome 100 fixes 28 security vulnerabilities, nine of which are marked as “high severity”, making it a mandatory upgrade for all users.

New Chrome icon

Google Chrome 100 has a new logo with subtle color changes, removal of shadows and a slightly larger inner blue circle. Google has already previewed the new logo in Chrome Canary releases, but with the release of Google Chrome 100, it has now come to the stable version.

It must be said that the logo has remained the same since 2014. To mark the crossing of a new course, a Google designer explains that he simplified the main icon [] removing shadows, refining proportions and brightening colors, to bring us in line with the more modern expression of the Google brand.

Potential effects on sites because of the three-digit version number

Chrome’s triple digit jump had led Google to think some sites might crash; Since some of them were not tailored to handle browsers with a three-digit version number, there was a risk that they would interpret Chrome 100 as Chrome 10. With Google Chrome 100, the user agent string of the browser now uses a three-digit version number instead of a two-digit version, as shown below:

"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.60 Safari/537.36"

Since September 2021, Google has been testing whether changing the Chrome user agent to three-digit “Chrome/100” would break sites or prevent them from working properly. And Google’s Pete LePage explains:

When browsers first hit version 10, there were some issues as the major version number jumped from one to two. I hope we learned a few things that will ease the transition from two digit threes.

Chrome 100 is available now and Firefox 100 will be available soon. These three-digit version numbers can cause problems on sites that rely in some way on identifying the browser version. Over the past few months, the Firefox team and the Chrome team have been experimenting where 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 are developing a User-Agent analysis library, add tests to analyze versions greater than and equal to 100.

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 the use of the User-Agent chain with the new User-Agent Client Hints API. User-Agent Client Hints was introduced in June 2020 as a new extension to the Client Hints API that allows developers to access information about a user’s browser in a user-friendly and privacy-friendly way.

Client Hints allow developers to actively request information about the device or user conditions, rather than having to parse it from the User-Agent (UA) chain. Providing this alternate route is the first step in possibly reducing the granularity of the User-Agent chain.

A section is reserved for Client Hints below.

New features for developers

Multi-Notch Window Placement API

Pete LePage comments on the usefulness of this API in these terms:

For some applications, opening new windows and placing them in specific locations or specific views is an important feature. For example, when using Slides to present, I want the slides to display full screen on the main screen and my speaker notes to display on the other screen.

The multi-monitor window placement API is used to enumerate the monitors connected to the user’s machine and to place windows on specific monitors.

You can quickly check if there is more than one display connected to the device with windows.screen.isExtended

1
2

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

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

1
2
3
4
5
6
7
8

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

For example, you can determine the main screen and then use requestFullscreen() to put an item in full screen on this display.

1
2
3
4
5
6
7
8

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, such as if a new screen is plugged in or removed, the resolution changes, etc.

1
2
3
4
5
6
7
8

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

Digital Goods API to add your site to in-app purchases from Play Store

According to Google, this is an API for querying and managing digital products to facilitate in-app purchases from web applications, in conjunction with the payment request API (which is used to make actual purchases) . The API would bind to a digital delivery service connected through the user agent. In Chromium, this is specifically a web API wrapper around the Android Play Billing API. For Google, this is necessary for Play Store web apps to accept purchases of digital goods (Play Store policies prevent them from accepting payment via any other method). Without it, websites that sell digital goods cannot be installed through the Play Store.

New Features in Chrome DevTools

This release comes with several improvements and new features in Chrome DevTools. For example, you can now view and edit at CSS @supports rules in the Styles pane. These changes make it easier to experiment with et rules in real time. Open this demo page, inspect the

element, view the at @supports rules in the Styles pane. Click the rule statement to edit it.

The video below sums it up:

User-Agent Client Hints

Why Google considers the transition to this new form necessary

When web browsers make requests, they include information about the browser and its environment so that servers can enable analysis and customize the response. This header was intended to specify, in order of importance, the product (for example, the browser or the library) and a comment (for example, the version).

Over the ensuing decades, this chain has accumulated a variety of additional details about the client making the request (as well as errors, due to backward compatibility). We can see this by looking at a Chrome User-Agent string:

Mozilla/5.0 (Linux; Android 10; Pixel 3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4076.0 Mobile Safari/537.36

The string above contains information about the user's operating system and version, device model, brand, and full browser version, enough clues to infer that it is is a mobile browser, not to mention a number of references to other browsers for historical reasons.

The combination of these parameters with the wide variety of possible values ​​means that the User-Agent string could contain enough information to allow individual users to be uniquely identified. If you test your own browser on AmIUnique, you can see how well your User-Agent channel identifies you. The lower the resulting "similarity ratio", the more unique your queries, the easier it is for servers to track you secretly.

The User-Agent chain enables many legitimate use cases and plays an important role for developers and site owners. However, it is also essential that user privacy is protected against covert tracking methods, and sending UA information by default defeats this purpose.

There is also a need to improve web compatibility regarding the User-Agent chain. Because it is unstructured, parsing it leads to unnecessary complexity, which is often the cause of bugs and site compatibility issues that hurt users. These issues also disproportionately affect users of less popular browsers, as sites may have failed to test their configuration.

Introducing the new User-Agent Client Hints

User-Agent Client Hints provides access to the same information, but in a more privacy-friendly way, allowing browsers to optionally reduce the default broadcast of the User-Agent string. Client Hints apply a model where the server must ask the browser for a set of data about the client (the hints) and the browser applies its own policies or user configuration to determine what data is returned. So, instead of exposing all User-Agent information by default, access is now handled in an explicit and auditable way. Developers also benefit from a simpler API, no more regular expressions!

The current set of Client Hints primarily describes the browser's display and connection capabilities. You can explore the details in Automating Resource Selection with Client Hints, but find a reminder of the process below.

The server requests specific Client Hints via a header:

Server response

Accept-CH: Viewport-Width, Width

Or a meta tag:

<meta http-equiv="Accept-CH" content="Viewport-Width, Width" />

The browser can then choose to return the following headers in subsequent requests:

Subsequent request

1
2

Viewport-Width: 460
Width: 230

The server can choose to vary its responses, for example by offering images at an appropriate resolution.

User-Agent Client Hints extends the range of properties with the Sec-CH-UA prefix which can be specified via the Accept-CH server response header.

User-Agent Client Hints has been enabled by default in Chrome since version 89.

Source: Google (1, 2)

See as well :

Chrome will disable features like alert() in cross-origin frames, but the developers regret that such a big change will happen without a thorough discussion.
Google Chrome will no longer show secure website indicators as the company continues efforts to achieve a 100% HTTPS web
Google Chrome 92 comes with up to 50x faster phishing detection, thanks to improvements to its image processing technology
Chrome 94 will add HTTPS-First mode and Google plans to replace the padlock icon displayed when a site loads over HTTPS, which the publisher says is confusing

Leave a Comment