Chromium Blog: 2017

Chrome 64 Beta: stronger pop-up blocker, Resize Observer, and import.meta

Thursday, December 14, 2017

Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, Mac, and Windows.

Stronger pop-up blocker 1 out of every 5 user feedback reports submitted on Chrome for desktop mention some type of unwanted content. Examples include links to third-party websites disguised as play buttons or other site controls, or transparent overlays on websites that capture all clicks and open new tabs or windows. In this release, Chrome's pop-up blocker now prevents sites with these types of abusive experiences from opening new tabs or windows. Site owners can use the Abusive Experiences Report in Google Search Console to see if any of these abusive experiences have been found on their site and improve their user experience.

Two types of abusive experiences where a deceptive site control appears to do one thing, but has a different behavior when clicked. One looks like a play button on a video but sends the user to an unwanted download when clicked (left), and the other looks like a close button but instead opens unwanted pop-up windows (right).
Resize Observer Traditionally, responsive web applications have used CSS media queries or window.onresize to build responsive components that adapt content to different viewport sizes. However, both of these are global signals and require the overall viewport to change in order for the site to respond accordingly. Chrome now supports the Resize Observer API to give web applications finer control to observe changes to sizes of elements on a page.
const ro = new ResizeObserver((entries) => { for (const entry of entries) { const cr = entry.contentRect; console.log('Element:', entry.target); console.log(`Element size: ${cr.width}px × ${cr.height}px`); console.log(`Element padding: ${cr.top}px / ${cr.left}px`); } });
// Observe one or multiple elements ro.observe(someElement); The code snippet above uses the Resize Observer API to observe changes to an element.
import.meta Developers writing JavaScript modules often want access to host-specific metadata about the current module. To make this easier, Chrome now supports the import.meta property within modules that exposes the module URL via import.meta.url. Library authors might want to access the URL of the module being bundled into the library to more easily resolve resources relative to the module file as opposed to the current HTML document. In the future, Chrome plans to add more properties to import.meta.
Other features in this release Blink > Animation

The offset-path property can be used to animate an element by specifying the geometry of the path that an element moves along.

Blink>Fonts

Developers can now use the text-decoration-skip-ink CSS property to control how overlines and underlines are drawn when they cross over a glyph.

Blink>Input

Coordinates of PointerEvent with pointerType=mouse are now fractional, resulting in more precise mouse measurements.

Blink>JavaScript

To improve developer experience, Chrome now supports named captures in regular expressions, allowing developers to assign meaningful names to portions of a string that a regular expression matches.

Chrome now supports the Unicode property escapes \p{…} and \P{…} for regular expressions that have the u flag set, allowing developers to create more powerful Unicode-aware regular expressions.

To assist with local-aware formatting of strings produced by internationalization formatters, developers can now use Intl.NumberFormat.prototype.formatToParts() to format a number to a list of tokens and their type. Thanks to Igalia for helping make this happen!

Blink>Media

Matching other browser implementations, Chrome now sets the default preload value for <video> and <audio> elements to metadata in order to reduce bandwidth and resource usage by only loading resource metadata and not the media resource itself.
Chrome now supports HDR video playback when Windows 10 is in HDR mode, enabling developers to provide users with HDR VP9 Profile 2 10-bit videos.
To support compatibility with the HTML Spec, Chrome now throws a "NotSupportedError" DOMException when a media element’s playbackRate is set to a value not supported by Chrome, like negative values.
Chrome now supports the Media Capabilities API in Origin Trials, enabling developers to know whether an audio or video playback will be smooth and power-efficient based on previous performance statistics.
To match the Media Capture and Streams spec, getUserMedia() returns a rejected Promise with DOMException or OverconstrainedError when there is an error.

Blink>Network

Developers can now use the cache option to specify the cache mode of a Request.

Developers can now use Request.prototype.cache to view the cache mode of a Request and determine whether a request is a reload request.

Blink>Permissions API

To better align with the Permissions API spec, the Permissions API can now be used to query the status of the camera and microphone permissions.

Blink>Scroll

In Focus Management APIs, developers can now focus an element without scrolling to it by using the preventScroll attribute.

Blink>SVG

To allow developers to transform and change position of transformed SVG elements, Chrome now supports transform-box for SVG elements. Thanks to Opera for making this happen!

Blink>WebAudio

AudioWorklet, an API that exposes low-level audio processing capability to support custom AudioNodes, is now available in origin trials and the experimental flag.

Blink>WebRTC

To align with the WebRTC 1.0 spec, RTCPeerConnection now supports addTrack() for single stream use cases, as well as removeTrack(), getSenders(), ontrack, and a minimal version of the RTCRtpSender interface.

Blink>WindowDialog

To improve interoperability and end user experience, window.alert() no longer brings a backgrounded tab to the foreground but instead shows the alert when the user switches to the background tab.

UI>Notifications

Similar to macOS, Chrome notifications sent through the Notifications API or chrome.notifications on Linux are now shown directly by the Linux native notification system.

Deprecations and interoperability improvements Blink> CSS

To align with the spec, getMatchedCSSRules has been removed and developers can use the Blink polyfill instead.

Blink> DOM

Following the deprecation in Chrome 45, elements can no longer host more than one Shadow Root.

Blink> Performance APIs

To encourage adoption of standardized loading metrics API such as Navigation Timing 2, nextHopProtocol, and Paint Timing API, Chrome is deprecating the non-standardized chrome.loadTimes API.

For a complete list of all features (including experimental features) in this release, see the
Chrome 64 milestone hotlist.

Reducing Chrome crashes caused by third-party software

Thursday, November 30, 2017

Update (04/26/2019): Third-party developers can now use this document to evaluate the impact of third-party blocking on their software.Chrome extensionsNative Messaging

In Chrome 66 a warning will be shown to users with third-party software that injects into Chrome.Chrome BetaUpdated 2018-06-21: Third-party software will be blocked from injecting code into Chrome on Windows starting in Chrome 69.

Expanding user protections on the web

Wednesday, November 8, 2017

One of the advantages of the web is that it allows developers to create any type of experience they can imagine, which has led to the rich diversity of content available on the web today. While most content producers are interested in providing excellent experiences for their users, we've found that a small number use the flexibility and power of the web to take advantage of users and redirect them to unintended destinations. 1 out of every 5 feedback reports from Chrome users on desktop mention encountering some type of unwanted content, and we take this feedback seriously when considering how to improve Chrome. Following on from features like Chrome's pop-up blocker and autoplay protections, over the next few releases we'll be rolling out three new protections designed to give users all the web has to offer, but without many of these types of unwanted behaviors.

One piece of feedback we regularly hear from users is that a page will unexpectedly navigate to a new page, for seemingly no reason. We've found that this redirect often comes from third-party content embedded in the page, and the page author didn't intend the redirect to happen at all. To address this, in Chrome 68 all redirects originating from third-party iframes will show an infobar instead of redirecting, unless the user had been interacting with that frame. This will keep the user on the page they were reading, and prevent those surprising redirects.

An example of a redirect being blocked on a test site. The iframes embedded in the site are attempting to navigate the page to an unintended destination, but Chrome prevents the redirect and shows an infobar.

When the user interacts with content, things can also go wrong. One example that causes user frustration is when clicking a link opens the desired destination in a new tab, while the main window navigates to a different, unwanted page. Starting in Chrome 68 we'll also detect this behavior, trigger an infobar, and prevent the main tab from being redirected. This allows the user to continue directly to their intended destination, while also preserving the context of the page they came from.

Finally, there are several other types of abusive experiences that send users to unintended destinations but are hard to automatically detect. These include links to third-party websites disguised as play buttons or other site controls, or transparent overlays on websites that capture all clicks and open new tabs or windows.

Update 2018-06-07: The two protections described above that prevent unwanted redirects and unwanted tabs or windows are now scheduled to be released with Chrome 68. The timeline for expanding Chrome's pop-up blocker remains unchanged, as it already launched in January.

Chrome 63 Beta: Dynamic module imports, async iterators and generators, Device Memory API, and permissions UI changes

Friday, October 27, 2017

Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, Mac, and Windows. Dynamic module imports Currently, importing JavaScript modules is completely static, and developers cannot import modules based on runtime conditions, like whether a user is logged in. Starting in this release, the import(specifier) syntax now allows developers to dynamically load code into modules and scripts at runtime. This can be used for lazy loading a script only when it’s needed, which improves performance of the application.

button.addEventListener('click', event => {
   import('./dialogBox.js')
   .then(dialogBox => {
       dialogBox.open();
   })
   .catch(error => {
       /* Error handling */
   });
}); The code example above shows how to use the import(specifier) function to import JavaScript after an event. Async iterators and generators Writing code that does any sort of iteration with async functions can be inelegant. The new async generator functions using the async iteration protocol are now available to help developers streamline the consumption or implementation of streaming data sources. Async iterators can be used in for loops and also to create custom async iterators through async iterator factories. async function* getChunkSizes(url) {
const response = await fetch(url);

for await (const chunk of streamAsyncIterator(response.body)) {
   yield chunk.length;
}
} The code example above shows how to use async iterators to writer cleaner code for streaming fetches, using the streamAsyncIterator function. Device Memory API It’s challenging for developers to create one user experience that can work across all devices, due to varying device capabilities. The new Device Memory JavaScript API helps developers with this challenge by using the total RAM on a user’s machine to provide insights into device constraints. This insight enables developers to tailor content at runtime in accordance with hardware limitations. For example, developers can serve a “lite” app to users on low-end devices, resulting in better experiences and fewer frustrations. The Device Memory API can also be used to add context to metrics, such as the amount of time a task takes to complete in JavaScript, through the lens of device memory.

Permissions UI changes
When websites need special permissions from a user, they trigger a permission request. Currently these permission requests appear in Chrome for Android as ignorable banners at the bottom of the screen, and developers often show them without considering whether the user has the appropriate context to grant the permission. This results in a distracting user experience, and users ignore or temporarily dismiss these permission prompts more than 90% of the time.
In Chrome 59, we started to address this problem by temporarily blocking a permission if the user dismisses the request three times. As a next step, in this release Chrome for Android now presents permission requests as modal dialogs. This change reduces the overall number of permission prompts by 50%. It also makes users 5 times more likely to accept or deny requests, rather than temporarily dismissing or repeatedly ignoring them. To ensure users understand the permission request, developers should present users with permission requests at an appropriate time, as we’ve found that users were 2.5 times more likely to grant permission to a site that ask for permissions with context.
Other features in this release Blink > Bindings

To improve interoperability, a TypeError is now thrown for EventTarget.addEventListener and removeEventListener when the callback passed is not an EventListener, null, or undefined.

Blink > CSS

Developers can now make pixel-level adjustments using the new Q length unit, which is especially useful on small viewports.

Developers can now prevent apps from using Chrome’s pull-to-refresh feature or create custom effects using overscroll-behavior, which allows changing the browser’s behavior once the scroller has reached its full extent.

Blink > Fonts

font-variant-east-asian is now supported, allowing developers to control the usage of alternate glyphs for East Asian languages like Japanese and Chinese.

Blink > HTML

To improve interoperability, Chrome will fire beforeprint and afterprint events as part of the printing standard, allowing developers to to annotate the printed copy and edit the annotation after the printing command is done executing.

Blink > JavaScript

Using Promise.prototype.finally, a callback can now be registered to be invoked after a Promise has been fulfilled or rejected.

The Intl.PluralRules API allows developers to build applications that understand pluralization of a given language by indicating which plural form applies for a given number and language.

Blink > MediaStream

MediaStreamTrack.applyConstraints() is now supported for local video MediaStreamTracks, including tracks obtained from getUserMedia(), capture from media elements or screen capture.

Blink > Network

Version 2 of NT LAN Manager (NTLM) API is now shipped, enabling applications to authenticate remote users and provide session security when requested by the application.

Blink > Sensor

Thanks to contributors from engineers at Intel, an Origin Trial is now available that exposes the following sensors via the new Generic Sensors API syntax: Accelerometer, LinearAccelerationSensor, Gyroscope, AbsoluteOrientationSensor, and RelativeOrientationSensor.

Blink > Storage

The localStorage and sessionStorage API's now use getItem() rather than an anonymous getter, so attempting to access a key using getItem() will now return null rather than undefined. Thanks to Intel for the contribution!

To improve developer experience, the methods on sessionStorage and localStorage such as getItem(), removeItem(), and clear() are now enumerable. Thanks to Intel for making this happen!

UI > Browser > Mobile (Android)

display: minimal-ui is now supported by Chrome on Android, enabling developers to display a UI similar to Chrome Custom Tabs for users.

Deprecations and interoperability improvements Blink > Bindings

To improve interoperability, instance properties with a Promise type now return a rejected promise instead of throwing an exception.

Blink > CSS

The /deep/ or >>>, selector, as well as ::shadow, are now removed from CSS dynamic profile, following their deprecation in Chrome 45.

Blink > DOM

To improve interoperability, HTMLAllCollection, HTMLCollection, HTMLFormControlsCollection and HTMLOptionsCollection are no longer enumerable, so they are now left out of calls to Object.keys() or for-in loops.

Posted by Sathya Gunasekaran, Lazily-Loaded Engineer

Aug	SEP	Oct
	30
2019	2020	2021

Chromium Blog

Chrome 64 Beta: stronger pop-up blocker, Resize Observer, and import.meta

Reducing Chrome crashes caused by third-party software

Expanding user protections on the web

Chrome 63 Beta: Dynamic module imports, async iterators and generators, Device Memory API, and permissions UI changes

Labels

Archive

Feed