Chrome 86 Highlights: File System Access, HTTPS Security, and New Front‑End APIs

Chrome 86 was released as a stable version in October 2020 and is now available on Android, Chrome OS, Linux, macOS, and Windows.

File System Access

The experimental local file system feature from Chrome 83 is now stable. By calling showOpenFilePicker you can open a file picker and obtain file handles for reading and writing.

async function getFileHandle() {
  const opts = {
    types: [{
      description: 'Text Files',
      accept: {
        'text/plain': ['.txt', '.text'],
        'text/html': ['.html', '.htm']
      }
    }]
  };
  return await window.showOpenFilePicker(opts);
}

Before writing, the browser checks whether the user has granted write permission and prompts if necessary.

The showDirectoryPicker method opens a directory, allowing access to multiple files or creation of files, which is useful for IDEs and media players.

Completely Blocking Non‑HTTPS Mixed Content Downloads

Mixed‑content errors occur when a secure HTTPS page loads resources (images, scripts, etc.) over insecure HTTP. Attackers can intercept these requests and replace them with malicious content. Chrome now blocks loading of insecure resources.

Starting with M82 Chrome warned about mixed content; by M86 it fully blocks downloads. The schedule is shown below.

To audit mixed content, open Chrome DevTools, go to the “Security” panel, and view “Mixed Content”.

From M86 image requests are automatically upgraded to HTTPS, and audio/video requests have been upgraded since M80.

ParentNode.replaceChildren

Previously replacing all child nodes required clearing innerHTML or removing each child. Chrome now supports parentNode.replaceChildren(newChildren) to replace all children in one call.

parentNode.replaceChildren(newChildren);

More Prominent HTTP Security Warnings

When an HTTPS page embeds an insecure HTTP form, Chrome 86 displays a clear “This form is insecure” warning below the form fields.

If the user proceeds, a confirmation page warns that the submitted information is not secure.

Background Tab Power Saving

Tabs that remain in the background for more than five minutes are temporarily frozen, limiting CPU usage to about 1%. Auto‑refreshing pages are limited to one wake‑up per minute.

New Experimental Features

WebHID

WebHID API provides JavaScript access to human‑interface devices such as gamepads, joysticks, sensors, and haptic feedback, enabling richer web‑based game controls.

butOpenHID.addEventListener('click', async (e) => {
  const deviceFilter = { vendorId: 0x0fd9 };
  const opts = { filters: [deviceFilter] };
  const devices = await navigator.hid.requestDevice(opts);
  myDevice = devices[0];
  await myDevice.open();
  myDevice.addEventListener('inputreport', handleInpRpt);
});

These powerful APIs require explicit user permission.

Multi‑screen Placement API

The new Placement API lets you enumerate all connected screens and place browser windows on a specific screen, which is useful for presentations and financial applications.

const screen = window.screen;
console.log(screen);
// { availHeight: 1612, availLeft: 0, availTop: 23, availWidth: 3008, ... }

Permission must be requested first; the first request triggers a user prompt.

async function getPermission() {
  const opt = { name: 'window-placement' };
  try {
    const perm = await navigator.permissions.query(opt);
    return perm.state === 'granted';
  } catch {
    return false;
  }
}

After permission is granted, window.getScreens() returns an array of Screen objects.

const screens = await window.getScreens();
console.log(screens);
// [{id:0, internal:false, primary:true, left:0, ...}, {id:1, internal:true, primary:false, left:3008, ...}]

:focus-visible Selector

The new CSS selector lets you style focus outlines only when the element receives focus via keyboard, improving accessibility.

/* Keyboard focus */
button:focus-visible {
  outline: 4px dashed black;
}
/* Mouse, touch, or stylus focus */
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1,1,0,.7);
}

The ::marker pseudo‑element can also be used to style list item markers.

In the system settings you can enable “temporarily highlight focused objects” to show a flashing blue outline around focused elements.

Deprecated & Removed Features

Removal of WebComponents v0

Chrome 80 removed WebComponents v0 on desktop and Android, and Chrome 86 removed the remaining parts (Custom Elements v0, Shadow DOM v0, HTML Imports) from WebView.

Removal of FTP Support

Due to low usage, bugs, and security concerns, Chrome began deprecating FTP support from M72 and plans to fully disable it by Chrome 88.

References

Chrome 86 release notes

Improved focus highlighting

Feature summary

Mixed content blocking

File System Access API