Chrome 86 was released in October 2020 as a stable version and is now available for Android, Chrome OS, Linux, macOS and Windows. Let’s take a look at some of the major updates. If want to see the full update, please click (www.chromestatus.com/features#mi…

New stability function

File system Access

Remember the local file system in Chrome 83, an experimental feature that is now stable. By calling the showOpenFilePicker method, you can invoke the file selection window and read and write the file through the returned file handle. The code is as follows:

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

Before writing files, the browser checks whether the user is authorized to write files. If the user is not authorized to write files, the browser prompts the user to perform subsequent operations.

In particular, calling the showDirectoryPicker method opens the file directory, allowing you to retrieve multiple files or create files in the directory. This is great for ides, media players, etc.

Completely block all non-HTTPS hybrid content downloads

An HTTPS mixed content error occurs when the original web page is loaded through a secure HTTPS link, but other resources on the page, such as images, videos, stylesheets, and scripts, are loaded through an insecure HTTP link.

Attackers can intercept insecure download addresses, replace programs with malware, and even gain access to more sensitive information. To manage these risks, Google eventually decided to ban the loading of unsafe resources in Chrome.

Starting with M82, Chrome has gradually warned and blocked mixed content downloads, and moving to M86, Chrome will block downloads entirely. The timeline is as follows:

To check for Mixed Content on a website, use Chrome to visit the website, open developer tools, and select “Security” -” non-secure Origin”. Mixed Content can be found.

In addition, as of M86, image requests are automatically upgraded to HTTPS, without the degradation of HTTP. Audio/Video requests were automatically upgraded as early as M80.

ParentNode.replaceChildren

Currently, to replace all the children of a DOM node, you have to remove all the children using innerHTML or removeChild and then add them one by one. For this reason, the Chrome support replaceChildren method, can use the parameters in the list of child nodes to replace the original all child nodes, the code is as follows: parentNode. ReplaceChildren (newChildren);

For more information, please click www.chromestatus.com/feature/614…

More eye-catching HTTP security warnings

When you visit an HTTPS web page, a lock icon appears at the far left of the address bar to indicate that the site is secure, but the browser doesn’t give you any warning if an INSECURE HTTP form is embedded in an HTTPS web page. In fact, there are already phishing sites through this way to steal sensitive information users.

So in Chrome 86, if an INSECURE HTTP form is embedded in an HTTPS web page, there will be a prominent text message saying “This form is not secure” below the form field.

If you ignore the warning and continue to submit the form information, you will see a confirmation warning page telling you that the information you are about to submit is not secure.

The background TAB saves more power

If a TAB is running in the background for more than five minutes, the page is temporarily frozen and CPU usage is limited to around 1%; If the page supports automatic refresh, wake up time is limited to once per minute.

New trial function

WebHID

HID(Human Interface Device) is a human-machine Interface Device. There are many long-tailed HID that are either too new, too old, or too uncommon to be supported by system drivers. The WebHID API provides a way to access these devices through JavaScript. This makes web games much easier to play, using joysticks, controllers, sensors, vibration feedback, and so on.

The code called is as follows:

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);
});
Copy the code

Of course, these powerful apis require user authorization to invoke.

For more information, visit web.dev/hid/

More screen Placement API

Currently, you can call window.screen() to get the browser screen, but if you have multiple screens, you can only get the current screen.

The API call method and return result are as follows:

const screen = window.screen; console.log(screen); // { // availHeight: 1612, // availLeft: 0, // availTop: 23, // availWidth: 3008, // colorDepth: 24, // orientation: {... }, // pixelDepth: 24, // width: 3008 // }Copy the code

The new multi-screen Placement API allows you to enumerate all the screens your computer is connected to and place browser Windows on specific screens. This will greatly facilitate slides and finance-related applications.

Before using the API, you need to ask for permission, and the first request will pop up to the user.

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

When authorized, calling window.getScreens() returns a list 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,...}, / /]Copy the code

:focus-visible

The new CSS selector allows you to modify the default Focus style as follows:

/* Focusing the button with a keyboard will
   show a dashed black line. */
button:focus-visible {
  outline: 4px dashed black;
}

/* Focusing the button with a mouse, touch,
   or stylus will show a subtle drop shadow. */
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}
Copy the code

For the number or origin of a list item, you can use ::marker pseudo-element to change its color, size, shape and other information.

In addition, you can also choose Settings > Advanced > Accessibility > Highlight focus object briefly from the Settings screen. After selecting this option, blue light will flash around the focus element to provide more eye-catching information.

Discard & delete functionality

Delete WebComponents where v0

Chrome 80 removed WebComponents V0 from the desktop and Android, and Chrome 86 further removed it from WebView. This removal includes Custom Elements V0, Shadow DOM V0, and HTML Imports.

Remove FTP support

Chrome FTP is low in usage, buggy in implementation and security risks, and there are better FTP clients available on all platforms, so it’s not worth maintaining. So starting with M72, Chrome has been emasculating FTP, first removing HTTP proxies, and now removing FTP support completely. It is planned that FTP will be completely disabled by Chrome 88.

References developers.google.com/web/updates… Blog.chromium.org/2020/09/chr… Sspai.com/post/63084 blog.p2hp.com/archives/74… Web. Dev/file – system…