New in Chrome 91

Published on Wednesday, May 26, 2021

Pete is a Developer Advocate

Here's what you need to know:

Web apps that interact with files, can now suggest file names and directories when using the File System Access API.
You can read files from the clipboard.
If your site has more than one domain, and they share the same account management backend, you can tell Chrome they're the same, allowing the password manager to suggest the right credentials.
All the videos from I/O are available on Chrome Developers YouTube channel!
And there's plenty more.

I'm Pete LePage, working, and shooting from home, let's dive in and see what's new for developers in Chrome 91!

Suggested names for File System Access API

One of my favorite APIs to come out of the Fugu project this year is the File System Access APIs. Once the user has granted permission, apps can interact with files on the users local device, in the same way other installed apps do, allowing you to create a more natural user experience.

Starting in Chrome 91, you can now suggest the name and location of a file or directory to interact with. To do so, pass a suggestedName property as part of the showSaveFilePicker options.

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

The same goes for the default starting directory. For example, a text editor probably wants to start the file save or file open dialog in the documents folder. Whereas an image editor probably wants to start in the pictures folder. You can suggest a default start directory by passing a startIn property.

const fileHandle = await self.showOpenFilePicker({
  startIn: 'documents'
});

Check out Tom's File System Access post for complete details.

Reading files from the clipboard

There's one other cool new API for interacting with files that lands in Chrome 91. On desktop, web apps can now read files from the clipboard. (Reading files from the clipboard has been available in Safari since 2018.)

Of course, you don't get unrestricted access to the clipboard, so you'll need to set-up a paste event listener. Then, in the event handler, you can access the content of each file on the clipboard.

window.addEventListener('paste', onPaste);

async function onPaste(e) {
  const file = e.clipboardData.files[0];
  const contents = await file.text();
  ...
}

Share credentials on affiliated sites

If your site has multiple domains, and they share the same account management backend, you can now associate your sites with one another, allowing users to save credentials once, and have the Chrome password manager suggest them to any of your affiliated sites.

This is ideal when your site is served from different top level domains, like google.com, and google.ca. Or maybe you've got multiple domains names.

To associate your websites, you'll need to create an assetlinks.json file that defines the relationship between the domains. In the example below, I'm telling the browser that both the .com and .co.uk domains are related and can share the credentials.

[{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.com"
  }
 },
{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.co.uk"
  }
 }]

Then, host the assetlinks.json file in the .well-known folder for each domain.

This functionality will start to roll out gradually in Chrome 91, and may not be available on day one, so check out Enable Chrome to share login credentials across affiliated sites for the latest details.

And more!

Of course there's plenty more.

All the videos from I/O 2021 are online now, there's some great content there, so check it out!

Web Transport-previously called Quic Transport has undergone a number of changes and is starting a new origin trial.

Web Assembly SIMD has finished its origin trial and is available to all users.

The refreshed form elements have finally landed on Android, improving the user experience.

And the <link> element's media attribute will be honored for link rel="icon", meaning you can define different icons based on media queries. For example a different icons for dark and light modes.

<link
  rel="icon"
  media="(prefers-color-scheme: dark)"
  href="/icons/dark.png">
<link
  rel="icon"
  media="(prefers-color-scheme: light)"
  href="/icons/light.png">

New in Chrome 91

# Suggested names for File System Access API

# Reading files from the clipboard

# Share credentials on affiliated sites

# And more!

# Further reading

# Subscribe

Suggested names for File System Access API

Reading files from the clipboard

Share credentials on affiliated sites

And more!

Further reading

Subscribe