All Feeds | XSL | RSS | Embed | Edit

Chrome 73 Beta: Constructable stylesheets, a new RegExp function, and passive mouse events

Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, macOS, and Windows. View a complete list of the features in Chrome 73 on Chrome 73 is beta as of February 8, 2019.

Constructable stylesheets

It's long been possible to dynamically create a stylesheet by attaching it directly to a <style> element's sheet property. This comes with problems including a flash of unstyled content and sometimes the bloat of duplicate CSS rules. New methods on the CSSStyleSheet interface add a programmatic way to add stylesheets, eliminating the old method's problems.

Constructable stylesheets let you define shared CSS styles and apply them to multiple shadow roots or to the document object. This is referred to as adopting. Updates to a shared style sheet are applied everywhere it's been adopted. Adopting a stylesheet is fast. Constructable stylesheets are useful in many use cases including theme sharing between components, preloading stylesheets without DOM injection, and more.

Instead of a new API, stylesheets are constructed imperatively with the replace() and replaceSync() methods as shown below.

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// replace all styles, allowing external resources:
sheet.replace('@import url("styles.css")')
    .then(sheet => {
        console.log('Styles loaded successfully');
    .catch(err => {
        console.error('Failed to load:', err);

To learn more, check out our article or try the sample.


A new regular expression matching method is being added to String.prototype. The matchAll() function provides a more complete set of matches than String.prototype.match() does. To understand the new function, first consider the following regular expression code:

const regex = /t(e)(st(\d?))/g;
const string = 'test1test2';

Calling string.match(regex) returns an array that contains only complete matches, in this case 'test1' and 'test2'. What about those capturing groups? I can get the first set, those related to 'test1' if I remove the g flag. Getting the rest currently requires writing additional code. It would be nice if I didn't need to.

The specification authors reached the same conclusion and created matchAll(), which has just landed in Chrome. And instead of returning the limited results just described, matchAll() returns an iterable object and contains a few convenience properties.

To learn more about this method read our article on For more about what's new in JavaScript for Chrome, head over to

Passive Mousewheel listeners

Scrolling responsiveness is important enough to user engagement that Chrome has been working to improve scrolling through event behavior. A best practice for event listeners is that if they don't call preventDefault(), then they need to be registered as passive (by passing {passive: true} to addEVentListener()). Non-passive events are blocking since the browser has to wait for them to finish in case preventDefault() was called.

Unnecessarily blocking event listeners happen often enough that in Chrome 56, we changed touchstart and touchmove that are registered on root targets to be passive by default. This allows the browser to safely perform scrolling and zooming without being blocked on listeners. Starting in Chrome 73, the wheel and mousewheel event listeners behave the same way, making the following lines of code equivalent:

window.addEventListener("wheel", func);
window.addEventListener("wheel", func, {passive: true} );

For more background and a few stats on change, read Making wheel events passive by default.

Other features in this release

Cross-Origin resource policy

Cross-Origin-Resource-Policy response header allows http servers to ask the browser to prevent cross-origin or cross-site embedding of the returned resource. This is complementary to the Cross-Origin Read Blocking feature and is especially valuable for resources not covered by CORB (which only protects HTML, XML and JSON).

Cross-Origin-Resource-Policy is currently the only way to protect images against Spectre attacks or against compromised renderers.
CSS redirects are cross-origin

To align with the specification, stylesheets that (a) failed to load due to network error, or (b) loaded via a redirect from cross-origin back to same-origin are considered cross-origin.

document.visibilityState set to “hidden” when WebContents is occluded

Thanks to the WebContents Occlusion feature in Chromium, the Page Visibility API will now accurately reflect the visibility state of web pages, especially when they are occluded. In other words, the document.visibilityState value will be “hidden” when the browser tab or window is covered by one or more window.

The WebContents Occlusion feature is supported only on Chrome OS and macOS at this time. Windows support is in progress.


The scaleNonUniform() function post-multiplies a non-uniform scale transformation on the current matrix and returns the resulting matrix. It is being re-added to support legacy compatibility with SVGMatrix. Non-uniform scaling is a transformation in which at least one of the scaling factors is different from the others. For example, non-uniform scaling might turn a rectangle into a square or a parallelogram.

EME extension: HDCP policy check

Applications now have the ability to query whether a certain HDCP policy can be enforced so that playback can be started at the optimum resolution for the best user experience. A sample is available for developers who want to try it.

GamePad API: GamepadButton touched attribute

The GamePad API now provides the touched state of a gamepad button, which indicates whether a finger is on a button independent of whether it's being pressed.

imagesrcset and imagesizes attributes on link rel=preload

The <link> element now supports imagesrcset and imagesizes properties to correspond to srcset and sizes attributes of HTMLImageElement. To use them, the <link> element must include the preload and image keywords as shown below.

<link rel="preload" as="image" href="pic400.jpg" imagesizes="100vw"
imagesrcset="pic400.jpg 400w, pic800.jpg 800w, pic1600.jpg 1600w">

Implicit root scroller

Implicit root scroller allows viewport-filling scrollers (iframes, divs) to perform document-level scrolling, i.e. show/hide URL bar, overscroll glow, rotation anchoring, etc.. This feature doesn't have an API so it's not on a standards track. Chrome will try to determine if a page is mainly contained in a non-document scroller and attempt to delegate its document-scrolling-UX to that scroller.

This is an implicit version of the previously proposed rootScrollers API.

::part pseudo element on shadow hosts

Chrome now supports the ::part() pseudo-element on shadow hosts, allowing shadow hosts to selectively expose chosen elements from their shadow tree to the outside page for styling purposes.


PerformanceObserver.supportedEntryTypes provides a way to feature-detect the PerformanceEntry types that are implemented in a web browser. For example, a developer running this in Chrome could get something like this in the console:

["longtask", "mark", "measure", "navigation", "paint", "resource"]

Use the response URL as the base URL for CSS and XSLT stylesheets

On the web, URLs are usually relative to the document's base URL. That means, if the page is /hello/ and contains <img src="world.jpg">, the image is loaded from /hello/world.jpg.

There are a couple of exceptions to this, the most common of which is CSS. Within stylesheets, URLs (e.g. for background images) are relative to the stylesheet's "response URL".

The "response" distinction is important. If the page contains <link rel="stylesheet" href="/styles.css">, and /styles.css redirects to /foo/styles.css, URLs in the stylesheet will be relative to /foo/styles.css. In this case the request URL is different to the response URL, and it's the response URL that's used as the base URL.

With a service worker in the middle, Chrome didn't handle this correctly. It would use the request URL as the base URL for CSS. This is fixed in Chrome 73. Chrome will correctly use the response URL.

This change applies to the following resource types:

XHR: Use the response URL for responseURL and documents

XHR's responseURL property should provide the URL of the response.

In many cases, the request and response URLs are the same, but service workers can choose to return a response from elsewhere. Redirects also cause the request and response URLs to be different.

If the XHR request was intercepted by a service worker, Chrome would incorrectly set responseURL to the request URL. This is fixed in Chrome 73. Chrome will correctly set responseURL to the response URL.

WebRTC updates


A boolean property has been added to RTCConfiguration.offerExtmapAllowMixed() to enable the extmap-allow-mixed attribute in a session description protocol (SDP) offer.

The SDP attribute extmap-allow-mixed, as defined in RFC8285, will be included in the SDP offer if this property is set to true. The SDP attribute extmap-allow-mixed is supported from Chrome 71, but due to backwards compatibility problems it was not included in the SDP offer by default.

This property is purely transitional. Initially it will be off by default. We hope to change the default to on when enough clients have updated their code. We hope that eventually backwards compatibility will not be needed and we can remove it completely.


The new RTCRtpReceiver.getParameters() method returns the RTCRtpReceiver object's track decoding parameters, which includes the codec and RTP header lists negotiated for the call, the RTCP information, and the layer count.

This method is an analog to RTCRtpSender.getParameters() and presents similar information for a call, but on the receiver side. It does not allow modification of the call's parameters.


The new RTCRtpReceiver.getSynchronizationSources() method returns the latest playout timestamps of RTP packets for audio and video receivers. This is useful for determining in real time which streams are active, such as for the use case of audio meters or prioritizing displaying active participant streams in the UI.

Turn RTCRtpContributingSource from an interface into a dictionary

The specification requires RTCRtpContributingSource to be a dictionary, but it was previously shipped as an interface. With this change RTCRtpContributingSource will no longer have a prototype and getContributingSources() will create a new set of objects with each call.

Rename Atomics.wake() to Atomics.notify()

The Atomics.wake() method is being renamed Atomics.notify(). This is a low-level function to wake a Worker that has been suspended via Atomics.wait(). This conforms to a specification change made to alleviate confusion created by the similarity of the names wait and wake.

Transform list interpolation

Chrome has improved how CSS transforms are handled to reduce cases where a matrix interpolation fallback is used. An interpolation is an intermediate transformation. Sometimes interpretation of the CSS rule requires falling back to a matrix to accomplish the interpolation, and this can produce visual results other than what the web developer intends. To mitigate this, the specification was changed to reduce the number of situations when this can occur.

Interoperability improvements

Spec-compliant shadow blur-radius

Historically, Blink's blur-radius interpretation has been at odds with both the CSS and Canvas2D specifications in that Blink shadows cover about half the expected area.

With this change Gaussian blur sigma is now computed as one-half the blur-radius, as mandated by the specification. Blink's shadow implementation now matches FireFox and Safari.

Remove isomorphic decoding of URL fragment identifier

When Chrome opens a URL with a fragment id, it decodes %xx and applies isomorphic-decode to it, then tries to find an element with the decoding result as an ID in some cases. For example, if a user opens, Chrome does the following:
  1. It searches the page for an element with id="%F8%C0".
  2. If it’s not found, it searches the page for an element with id="&#xF8;&#xC0;".
No other browsers do this, and it's not defined by the standard. Starting in version 73, Chrome no longer does this either.

Deprecations, and Removals

Remove EXPLAIN and REINDEX support in WebSQL

The output ofEXPLAIN is not guaranteed to be stable over SQLite versions, so developers cannot rely on it. REINDEX is only useful when collation sequence definitions change, and Chrome only uses the built-in collation sequences. Both features are now removed.

Deprecate 'drive-by downloads' in sandboxed iframes

Chrome has deprecated downloads in sandboxed iframes that lack a user gesture ('drive-by downloads'), though this restriction could be lifted via an allow-downloads-without-user-activation keyword in the sandbox attribute list. This allows content providers to restrict malicious or abusive downloads.

Downloads can bring security vulnerabilities to a system. Even though additional security checks are done in Chrome and the operating system, we feel blocking downloads in sandboxed iframes also fits the general thought behind the sandbox. Apart from security concerns, it would be a more pleasant user experience for a click to trigger a download on the same page, compared with downloads started automatically when landing at a new page, or started non-spontaneously after the click.

Removal is expected in Chrome 74.

Introducing a Trusted Web Activity for Android

A Trusted Web Activity (TWA) displays a full screen Chrome browser inside of an Android app with no browser UI. Although Android apps routinely include web content using a Chrome Custom Tab (CCT) or WebView, a TWA offers unique advantages when you need Chrome’s performance and features in your app in full screen mode.

In this post I’ll introduce you to TWAs, review suggested use cases and link to resources to get you started.

What’s different about a Trusted Web Activity?  

A Trusted Web Activity runs a Chrome browser full screen in an Android app, meaning there is no browser UI visible in the app, including the URL bar. This is a powerful capability so we need to verify that the app and the site belong to the same developer - hence ‘Trusted’. To verify that the app and the site opened in the TWA belong to the same developer, a TWA uses Digital Asset Links to certify ownership.

Because a TWA is a special case of a Chrome Custom Tab (CCT), it has access to all Chrome features and functionality including many not available to a WebView. If you’re not familiar with Chrome Custom Tabs, this article provides a complete overview. Some of the features of a TWA not available in a WebView include web push notifications, background sync, Chrome form autofill, Media Source Extensions (MSE) and the Sharing API.

Just like a CCT, a website loaded in a TWA shares stored data with the Chrome browser, including cookies. This implies shared session state, which for most sites means that if a user has previously signed into your website in Chrome they will also be signed into the TWA.

What can I use a TWA for?  

TWAs are great for including full screen web content in an Android application where you need Chrome features not available in a WebView or if shared origin storage with the Chrome browser makes your user journey easier.

An example of this is an e-commerce site where product pages are implemented in native views but the checkout flow takes place on the website. By using a TWA your app will have Chrome’s performance and can use Chrome’s one tap signup and automatic form filling features.

Trusted Web Activity Criteria

All content in TWAs must comply with Play store policy including policies for payments in-app purchases and other digital goods.

App users expect a great experience on their device. To ensure the quality of experience TWAs must meet PWA installability criteria and load fast. Loading speed is measured using Lighthouse and web content in TWAs must achieve a performance score of 80. Lighthouse is an open-source, automated tool for auditing performance & progressive web apps and is useful both as a benchmark and to help you build better websites.

As with any Play app, additional quality criteria may apply in the future. Apps which fail to meet TWA quality requirements or Play store policy may be denied entry or delisted.

Trusted Web Activity content security and version availability

The content of a TWA is protected and cannot be read or modified by the enclosing application. That means state can only be shared from the app to the TWA when it is initialized by passing in query string parameters and it is not possible to insert content into the TWA from the Android application.

TWAs are available on devices running Android KitKat or newer (over 95% of Android devices) with Chrome installed. If Chrome is installed but is out of date, for example due to user disabled Chrome updates, a Chrome Custom Tab is automatically substituted for the TWA.

Your first Trusted Web Activity

Getting started documentation & example code for TWAs is in development and will be released soon. In the meantime reference documentation is included below.  


Posted by Peter Mclachlan, Product Manager

Building a Better World Wide Web

User experience sits at the core of everything we do at Google. It drives our product decisions, development and direction. Chrome has a long history of protecting our users from annoying and harmful experiences -- like blocking pop-up windows and warning users if a page has malware.

We’ve also taken action to protect Chrome users from certain types of advertising that diminish their experiences online, a common complaint among Chrome users. For example, last year, Chrome began filtering ads on sites in North America and Europe that repeatedly violate industry standards and continue to show intrusive, annoying ads to people that visit their websites. Further, our own advertising platforms have stopped selling the kinds of ads that violate these standards and generate complaints from Chrome users.

We follow the Better Ads Standards when determining which websites to filter ads on in Chrome. These standards were developed by the Coalition for Better Ads, an industry group dedicated to improving the web advertising experience, based on feedback from over 66,000 consumers around the world. The Standards identify 12 experiences that users find intrusive and that advertisers, publishers, and technology vendors should avoid showing.

Today, the Better Ads Standards consists of 12 ad experiences that research found to be particularly annoying to users. Image Source: Coalition for Better Ads

Today, the Coalition for Better Ads announced that it is expanding their initial Better Ads Standards beyond North America and Europe to cover all countries, worldwide. Following the Coalition’s lead, beginning July 9, 2019, Chrome will expand its user protections and stop showing all ads on sites in any country that repeatedly display these disruptive ads.

What does this mean for website owners?
If you operate a website that shows ads, you should consider reviewing your site status in the Ad Experience Report, a tool that helps publishers to understand if Chrome has identified any violating ad experiences on your site. Starting today, publishers in regions outside of North America and Europe can use this tool to understand if they have intrusive ad experiences on their site, their current status (passing / no issues found or failing), and resolve outstanding issues or contest a review. While we’ve already reviewed millions of sites around the world, we will continue to expand these reviews in the coming months.

A quick overview of the Ad Experience Report.

Early results from the U.S., Canada and Europe
Our ultimate goal is not to filter ads, but to build a better web for everyone, everywhere. Chrome's enforcement of the Coalition’s standards has inspired many website owners to improve the advertising experience on their sites in a way that benefits users. In the U.S., Canada, and Europe, website owners have successfully been able to make changes to the ads on their sites. As of January 1, 2019, two thirds of all publishers who were at one time non-compliant to the Better Ads Standards are now in good standing. Further, out of millions of sites we’ve reviewed to date, less than 1% have had their ads filtered.

We look forward to continued collaboration with the industry to create a better, more vibrant web ecosystem with only the best user experiences. The web is a critical part of our everyday life and we’ll continue to deliver the best user experiences.

You can learn more details from the Coalition here.

Posted by Ben Galbraith, Senior Director of Product, Chrome

Chrome 72 Beta: Public class fields, user activation and more

Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, macOS, and Windows. View a complete list of the features in Chrome 72 on Chrome 72 is beta as of December 13, 2018.

Public class fields

Chrome now allows declaration of public class fields in scripts. This is the first part of class field declarations in JavaScript; support for private class fields is coming soon.

To implement public class fields, declare them inside a class declaration but outside of any member functions. They can be either initialized or uninitialized. For example, instead of this:

class MyComponent extends Component {
constructor() {
this.state = {};
render() {

you can now write this:

class MyComponent extends Component {
// Create a public field named `state`.
state = {};
render() {

Declaring class fields makes class definitions more self-documenting. Because these fields are always present, class instances go through fewer transitions. Head over to our article on class fields and the ChromeStatus entry for more information.

User Activation Query API

Chrome now provides an API for querying whether there has been a user activation. This is useful for APIs that are deliberately restricted to avoid annoying web page behaviors. Examples include requestFullScreen(), autoplay, and This also allows embedded iframes to vet postMessage() calls to determine whether they occurred within the context of a user activation.

The new userActivation property, available on both navigator and MessageEvent, supports the following properties:
The postMessage() method now also takes an options argument on the Window, Worker, and MessagePort objects. This object subsumes existing arguments and adds the includeUserActivation boolean property to notify the message recipient that there has been a user activation.

The following example shows how an iframe would notify a parent that a user activation is present.

// Check that WindowPostOptions is supported
if (window.parent.postMessage.length === 1) {
window.parent.postMessage('resize', {includeUserActivation: true});
} else {
window.parent.postMessage('resize', '/');

The parent could then verify that the activation is still active before responding to it.

if (event.userActivation && event.userActivation.isActive) {
return Promise.resolve();

Other features in this release

Cache API: reject addAll() when requests would overwrite each other

The Cache.prototype.addAll() API, which allows multiple entries to be added to the cache at once, previously violated a specification requirement that each request/response pair avoid overwriting another entry being added in the same call. Chrome would resolve such conflicts by storing the later entry and ignoring the earlier one. Cache.prototype.addAll() now rejects with an InvalidStateError.


The new Intl.ListFormat() API helps libraries and frameworks format a list in a localized fashion by providing internationalized messages using a customary local word or phrase when available. Here's an example:

const lf = new Intl.ListFormat('en');
// → 'dogs'
lf.format(['dogs', 'cats']);
// → 'dogs and cats'
lf.format(['dogs', 'cats', 'hamsters']);
// → 'dogs, cats, and hamsters'

For more information, read our Web Fundamentals article.

Service worker improvements


FetchEvent.resultingClientId, set on navigation requests or requests for workers, is the ID of the client, either a document or a worker, and is created by the request. It's useful for associating the main resource request from a document with subsequent subresource requests from the same document, for example, for logging and metrics purposes.

FetchEvents on requests for same-origin favicons.

Previously, technical limitations prevented service workers from receiving FetchEvent objects for favicon requests. Now, service workers will receive FetchEvent objects as long as the request URL is on the same origin as the service worker.

MediaStreamTrack resizeMode constraint

A new property controls how the browser derives the resolution of a MediaStreamTrack. There are two supported values:
This feature allows applications to improve consistency across browsers, and to use only native resolutions when desired.

RTCPeerConnection.connectionState and RTCPeerConnection.onconnectionstatechanged

Chrome now supports RTCPeerConnection.connectionState, which is an aggregate value computed from the transport states of the peerconnection's underlying ICE and DTLS transports. It's intended to provide a more complete overview of the connection state than RTCPeerConnection.iceConnectionState, which is only supposed to be based on the ICE transports.

Well-formed JSON.stringify

A Stage 3 ECMAScript proposal changes JSON.stringify() to prevent it from returning ill-formed Unicode strings. Previously, JSON.stringify() would output lone surrogates themselves if the input contained any. With this change, JSON.stringify() outputs escape sequences
for lone surrogates, making its output valid Unicode (and representable in UTF-8). The example below demonstrates how this works in practice.


Worker unhandled exception propagation

For dedicated workers, unhandled errors now propagate to the parent context and the error reporting process begins again one layer up (for example, to the window's onerror handler). This allows for errors to be propagated up to the original document, giving developers the freedom to choose when and how to handle worker errors.

Interoperability Improvements

Interoperable File.webkitRelativePath property

The File.webkitRelativePath
of the File interface previously returned a value different from other major browsers, now it returns the same value.

For example, if a user has the following local files:

/tmp/a/foo/bar/1.txt, /tmp/a/foo/2.txt

and they selected /tmp with a file chooser dialog, webkitRelativePath in Chrome was:

foo/bar/1.txt, foo/2.txt

Other browsers, which Chrome now matches, return this:

tmp/a/foo/bar/1.txt, tmp/a/foo/2.txt

Treat '#' as ending data URI body content

Chrome currently allows '#" symbols to exist in the body of a data URI in violation of the URL specification. More specifically, it treats a '#' as both part of the data body and the start of the URL fragment such that there is an overlap between the two components. Chrome now aligns with both the specification and Firefox by treating the first '#' of a data URL as the end of the data body and the start of the fragment.


Don't allow popups during page unload

Pages may no longer use to open a new page during unload. The Chrome popup blocker already prohibited this, but now it is prohibited whether or not the popup blocker is enabled.

Remove HTTP-Based Public Key Pinning

HTTP-Based Public Key Pinning (HPKP) was intended to allow websites to send an HTTP header that pins one or more of the public keys present in the site's certificate chain. Unfortunately, it has very low adoption, and although it provides security against certificate mis-issuance, it also creates risks of denial of service and hostile pinning. For these reasons, this feature is being removed.

Remove rendering FTP resources.

FTP is a non-securable legacy protocol. When even the linux kernel is migrating off of it, it's time to move on. One step toward deprecation and removal is to deprecate rendering resources from FTP servers and instead download them. Chrome will still generate directory listings, but any non-directory listing will be downloaded rather than rendered in the browser.


Deprecate TLS 1.0 and TLS 1.1

TLS (Transport Layer Security) is the protocol which secures HTTPS. It has a long history stretching back to the nearly twenty-year-old TLS 1.0 and its even older predecessor, SSL. Both TLS 1.0 and 1.1 have a number of weaknesses.
Supporting TLS 1.2 is a prerequisite to avoiding the above problems. The TLS working group has deprecated TLS 1.0 and 1.1. Chrome has now also deprecated these protocols. Removal is expected in Chrome 81 (early 2020).

Deprecate PaymentAddress.languageCode

PaymentAddress.languageCode is the browser's best guess for the language of the text in the shipping, billing, delivery, or pickup address in the Payment Request API. The languageCode is marked at risk in the specification and has already been removed from Firefox and Safari. Usage in Chrome is small enough for safe deprecation and removal. Removal is expected in Chrome 74.

Chrome Dev Summit 2018 Day 2: Ready for the next movement

Chrome Dev Summit day 1 is all wrapped up and we hope you enjoyed discussing what developers can do to build high-quality web experiences today. Now, in day 2 we will give you a preview of the new technologies the Chrome team will be working on over the next year.

Modern navigation on the web
Today, moving from page to page on the web feels like a long, slow transition - users have to stare at a white screen as their site loads and if they’re on a bad network, they’re disappointed when they see...nothing.

We want to enable developers to deliver a zero-friction, seamless experience to their users on the web and we’re excited to share two new specifications that we’ve been working on - Web Packaging and Portals.

One way to make loading fast is to get content as close to the user as possible, such as in edge caches. But the rise in HTTPS had the side effect of making this harder to achieve. And while AMP enables us to have privacy preserving pre-rendering of content with lightning fast load times, it came with the nagging issue of the browser not showing the publisher’s URL. Building on the AMP model, we introduced Web Packaging that gives the browser a proof of origin for the resources that it renders. This is achieved through Signed Exchanges, a subset of the full Web Packaging proposal.

So as long as the package is properly signed with a key that corresponds to the domain, it is presented to the user as having come from that domain. This enables privacy-preserving preloading and makes edge caching much easier, because now your content can be distributed to multiple caches without the need for an explicit DNS relationship with that cache. And we’re excited to see that Signed Exchanges are already available for origin trial. One of the first places you can see this in action is with the Google Search developer preview for signed exchange AMP content.

While instant loading is great, Portals take away the entire perception of navigation between pages by enabling multi-page sites to act like single-page applications through the same level of fluid transitions. It’s best when seen in action:

It’s still early in the development of the spec and we’d love your feedback on how we can make them more relevant for your use case.

Smooth user experience without losing developer experience
Having buttery smooth interactions is important, and as Mariko said yesterday, you can never add enough butter. However this level of UX often comes with a bitter trade-off, one that none of us like - bad developer experience. But we believe that it IS possible to break this dead-lock and that is where we’ll be spending a lot of our time in the coming year.

The Houdini APIs, such as the CSS Paint API, Animation and Layout Worklets give developers an unprecedented level of control to build new and modern interfaces.

And to give developers a well-lit path and ensure that they don’t regress from their performance goals as they build in incremental features, we’re working to build Feature Policy that catch common mistakes and give developers a signal during staging and more importantly in production. For more on this, tune in to Jason’s talk later today.

Performance at scale
Focusing on performance is critical today. Frameworks play a very important role in achieving lasting improvements at scale. We’ve already seen some great work done by various frameworks over this past year, and we want to collaborate and support their efforts in 2019.

So we’re excited to announce that starting today, we’ll be making feedback from framework teams a standard part of the Chrome Intent to Implement process. We want to use this process to include the voice of frameworks within the features that we prioritize.

Secondly, to really strengthen this collaboration, we’re launching a fund with an initial amount of $200,000 to support the development of performance related features in third party frameworks. We’ll share performance goals that we’d love to see “on by default” in frameworks. We’re excited to see what the developer community will come up with given their experience working with frameworks and the wider ecosystem. And based on the potential impact of the proposal, we’ll support your work through direct funding.

We’ll have more to share on this in the coming weeks. In the meantime, developers can go to this link to register interest. Applicants can start an RFC on the github repo of the project they intend to modify and would be considered only if the project’s core maintainers sign-off on the feature.

Meanwhile, stay tuned on the livestream to watch the rest of the sessions of day two of Chrome Dev Summit 2018!

Posted by Malte Ubl and Nicole Sullivan

PageSpeed Insights, now powered by Lighthouse

At Google, we know that speed matters and we provide a variety of tools to help everyone understand the performance of a page or site. Historically, these tools have used different analysis engines. Unfortunately, this caused some confusion because the recommendations from each tool were different. Today, we’re happy to announce that Pagespeed Insights (PSI) now uses Lighthouse as its analysis engine. This allows developers to get the same performance audits and recommendations everywhere: on the web, from the command line, and in Chrome DevTools. PSI also incorporates field data provided by the Chrome User Experience Report (CrUX). Version 5 of the PageSpeed Insights API will now provide CrUX data and all of the Lighthouse audits. Previous versions of the PSI API will be deprecated in six months.

PageSpeed Insights provides the following information:

The PSI v5 API now returns this new analysis together with CrUX data, and all Lighthouse category data (Performance, Progressive Web App, Accessibility, Best Practices, and SEO) for a given URL.

We have more information about the changes in our FAQ. If you have any questions, please use Stack Overflow and tag your question with the pagespeed-insights tag.

Posted by Rui Chen and Paul Irish

Chrome Dev Summit 2018: Building a Faster, Smoother, Capable Web

Today, we’re welcoming the web community to the 2018 edition of the Chrome Dev Summit. Over the next two days we will celebrate the evolution of the platform and share updates on our efforts moving the web forward with the help of the entire ecosystem.

Chrome’s 10th birthday gave us an opportunity to reminisce about how much Chrome and the web have evolved over the past decade. We love seeing how rich the content, apps, and games you build have become.

Amongst other updates that we’ve made to Chrome, one that we work very hard at is making the browser fast. We see speed as one of the defining and most important features of the web. No other platform can match how quickly a user can go from discovery to the actual experience and move between websites, but this breaks down if the sites take too long to load or if the UI is janky.

Thus, we'd like to collaborate even more with the web developer community in delivering delightfully fast experiences to our end users, from the moment they click on a link.

Fast from the first click
HTTPArchive shows that since 2011, sites are using on an average of 8x more JavaScript. We’re starting to see the CPU becoming one of the main performance bottlenecks, especially with more and more code often compiled and executed on under-powered mobile devices.

Businesses who focus on the first load (and beyond) are increasingly seeing great results by focusing on the use of Performance Budgets. These budgets can be based on the byte size of your JavaScript, CSS, images and other resources, as well as other loading metrics. For example, you could specify that Time-to-Interactive will not exceed 5s on an emulated 3G network and specific class of mobile phone.

Consistently staying within budget as you add features over time isn’t easy. After Wayfair noticed their own regressions, they built an internal performance budgeting system for their developers to track their performance scores. Since then, their page speeds have continuously become faster, and they’ve seen a year-over-year conversion rate increase of more than 10%.

Pinterest revamped their mobile web experience focusing on performance and saw an uplift in user sentiment and engagement. Their mobile website is now their top platform for sign-ups! You can see their journey here:

Buttery smooth beyond the click
Optimizing the loading speed of your webpage is important, but so is ensuring that the page delivers a smooth, interactive user experience as it loads and after it’s displayed. This means responding to all user input quickly, in less than a 1/10th of a second, and ensuring that the user interface doesn’t “jank”— meaning the UI doesn’t pause and then jump suddenly.

Over the past decade, we’ve been evolving Chrome so that it can off-load as much work as possible from the main thread. For example, now we decode images and parse JavaScript separately, and with Web Workers you can execute long running JavaScript without blocking up the UI.

How buttery smooth can you make your web apps today? Especially if you have non-trivial workloads? Our team set out to explore just this, and the end result is a new application launching today called Squoosh. This powerful image compression tool launches almost instantly, and then manages a smooth UI even when it’s doing heavy work, including using Web Assembly to do more with codecs the browser doesn’t have baked in. Tune in to Jake and Mariko's session later today to learn how they did it.
But there is even more to do here, and we are excited about up-coming platform APIs, such as Worklets , Virtual Scroller, and even a scheduler, that help developers build smoother experiences more easily. You’ll hear more about many of these tools and techniques in our Day 2 keynote and beyond.

Capable with deeper integrations
We’ve seen that PWAs make it easy to delight your users, grow engagement and increase conversions. Now with deeper integrations to the host OS and the ability to load and run faster than ever, your PWAs can really shine, yet most of these integrations have been focused on mobile-first, or even mobile-only.

Over the last 6 months we’ve been renewing our investments in providing these same set of capabilities across all desktop platforms. Chrome OS has given us a fantastic surface to really push the boundaries of the web, and based on these learnings we are expanding our Desktop PWA support across Chrome for Windows and Linux, with Mac support targeted to land in Chrome 72.

As we bring more and more capabilities to both mobile and desktop, we want to include the voice of the community to ensure we prioritize features that are important to the community. So today we are sharing our plan to get the capabilities YOU need on the web, and how we can work together to make sure we are solving your real world needs.

Helping you as a
We know that you want one place that consolidates all the reference information for modern Web APIs, and this is why we continue to collaborate with MDN on improving the core reference documentation of the web.

We have also heard that you would like more hands on guidance on how to deliver on the principles that make a web experience great. So today, we’re excited to announce a new approach:

Through a partnership with Glitch, a deep integration with our Lighthouse tool and best-practice guidance from our team, helps you improve your site through direct and targeted best-practice and the ability to monitor your sites over time to ensure that you are always able to keep your site fast, resilient and accessible.

As we were working on, we were inspired by other amazing content on the web that help you learn. Dave Geddes, who created Flexbox Zombies and CSS Grid Critters, created a new learning game. Service Workies helps you understand Service Workers soup to nuts. The first chapter of the adventure is rolling out in beta now. We partnered with Dave to make sure the full adventure can be free to all, so check it out now and whatever you do, listen to Grannie!

Web design, right in the browser

At Chrome Dev Summit we cover all of the updates to our developer centric tools and libraries that you know and love, but we also want to show you a new, early experiment that we would love your feedback on.

We remember the impact that Firebug had when it hit the scene, and how it showed how the browser could be the developer tool platform itself. Now we are also thinking about design on the web, and just as Lighthouse started as a Chrome extension to explore, we have another extension, Project Visbug, which allows you to design — right in the browser. You can download it now, but before you do see it in action right here:

Tune into our livestream or watch the videos on the Chrome Developers Youtube channel to follow the rest of the sessions of the day and watch this space for our Day 2 wrap up blog where we will have some more exciting announcements.

Posted by Ben Galbraith & Dion Almaer

Our commitment to a more capable web

Since the beginning of Chrome we have worked to provide a solid foundation for modern web applications. Those capabilities have enabled new experiences on the web that were never thought possible. WASM is enabling new classes of games and productivity apps like Sketchup and AutoCAD, WebRTC enables new ways to communicate, and service workers allow developers to create reliably fast web experiences regardless of network conditions.
However, there are some capabilities, like file system access, idle detection, and more that are available to native but aren’t available on the web. These missing capabilities mean some types of apps can't be delivered on the web, or are less useful. To cope, some developers build native apps, or use wrappers like Cordova or Electron to access the underlying capabilities of the device.
We strongly believe that every developer should have access to the capabilities they need to make a great web experience, and we want to support them as they do.

Closing the gap

We want to close the capability gap between the web and native and make it easy for developers to build great experiences on the open web. Meanwhile we need to preserve everything that is great about the web. We will rapidly bring new, powerful, portable, and standardized capabilities that unlock key verticals on both mobile and desktop. Giving developers these new tools will empower the open web as a place where any experience can be created, and make the web a first class platform for developing apps that run on any browser, with any operating system, and on any device.
We plan to design and develop these new capabilities in an open and transparent way, using the existing open web platform standards processes while getting early feedback from developers and other browser vendors as we iterate on the design, to ensure an interoperable design.
Per our practice of open design and public iteration, look for many proposals for new designs to surface at the W3C's Web Incubator Community Group.

What are the initial capabilities?

We’ve identified and prioritized an initial set of capabilities we feel are critical to closing the gap between web and native, and have already started work on a handful of them. You can see the list by searching the Chromium bug database for bugs that are tagged with proj-fugu.
Personally I’m really excited about the writable file API that make it possible to create web based editors, and event alarms that help perform arbitrary work at some point in the future. But there are plenty more: Web Share Target, Async cookies, Wake Lock, WebHID, user idle detection, just to name a few.

Early feedback is critical

We developed a process to make it possible to design and develop new web platform capabilities that meet the needs of developers quickly, in the open, and most importantly, work within the existing standards process. It’s no different than how we develop every other web platform feature, but it puts an emphasis on developer feedback.
Developer feedback is critical to help us ensure we’re shipping the right features, but it’s easier to change course early in the process. That’s why we’re starting to ask for feedback earlier. When actionable technical and use-case feedback comes in early, it’s easier to course correct or even stop development, without having shipped poorly thought out or badly implemented features. Features being developed at WICG are not set in stone, and your input can make a big difference in how they evolve.
It’s worth noting that many ideas never make it past the explainer or origin trial stage. The goal of the process is to ship the right feature. That means we need to learn and iterate quickly. Not shipping a feature because it doesn’t solve the developer need is OK.

Getting everyone involved

The first API we’re looking for feedback on is the writable files API. We want to hear about your use cases and how you expect the security model to work. And keep an eye on our new capabilities page on to see the list of capabilities that we’re working on, and how you can participate.
The apps you want to build on the open web should only ever be limited by your imagination, never by missing capabilities. As we look to the future, the gap between web and native will get smaller as browser vendors add new capabilities to the web.
Here’s to a more capable open web.

Posted by Pete LePage, dreamer.

Notifying users of unclear subscription pages

Every month, millions of Chrome users encounter pages with insufficient mobile subscription information. Surprising charges that come from unclear communication are a poor user experience. That’s why starting from Chrome 71 (December 2018), Chrome will show a warning before these pages, so that users can make informed decisions when signing up to mobile based subscription services. Users will be offered the choice to proceed to the page or go back if they were unaware that they were entering a billing page.

Unclear mobile subscriptions

Picture this: Andrea is browsing the web on a mobile connection to access a gaming page and they’re presented with a page that asks them for their mobile phone details.

They fill in the blanks with their mobile number and press Continue, and get access to the content.
The next month, the phone bill arrives and they see a charge they were not expecting. Was the subscription to the online gaming service really that expensive? Did they really agree to pay that specific price for the service? How much did they agree to be charged to access the content?

Clearer billing information for Chrome users

We want to make sure Chrome users understand when they are going through a billing flow and trust that they’ll be able to make informed decisions while browsing the web.
To adequately inform users, it’s important to provide a sufficient level of details within the billing page as outlined by our new mobile billing charges best practices. Pages that answer positively to the following questions generally provide sufficient information for users:
If Chrome detects pages that don’t provide sufficient billing information to users, the following warning will be displayed to the user on Chrome mobile, Chrome desktop and Android’s WebView:

The warning is shown to users entering unclear billing pages.

When we identify such pages, we notify the webmaster through Search Console where there will be an option to let us know about the changes they’ve made to clarify the billing process. For websites that aren’t verified on Search Console, we will do our best to get in touch with the webmasters affected and will be available to answer questions in our public support forum available in 15 languages. Once an appeal has been sent via Search Console, we will review the changes and remove the warning accordingly.
If your billing service takes users through a clearly visible and understandable billing process as described in our best practices, you don’t need to make any changes. Also, the new warning in Chrome doesn’t impact your website’s ranking in Google Search.
If you have any questions, please come and have a chat with us in the Webmaster Help Forum.

Posted by Emily Schechter, Chrome Security, Giacomo Gnecchi Ruscone & Badr Salmi El Idrissi, Trust & Safety

Further protections from harmful ad experiences on the web

Last year, after hearing from Chrome users, we launched a set of user protections against “abusive experiences” -- experiences designed to intentionally mislead and trick users into taking action on the web. These protections blocked pop-ups and new window requests from sites with certain abusive experiences like redirecting pages.

However, we've learned since then that this approach did not go far enough. In fact, more than half of these abusive experiences are not blocked by our current set of protections, and nearly all involve harmful or misleading ads. These ads trick users into clicking on them by pretending to be system warnings or “close” buttons that do not actually close the ad. Further, some of these abusive ad experiences are used by scammers and phishing schemes to steal personal information.

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).

As a result, today we are announcing expanded efforts to better protect users against these abusive experiences. Starting in December 2018, Chrome 71 will remove all ads on the small number of sites with persistent abusive experiences. Site owners can use the Abusive Experiences Report in their Google Search Console to see if their site contains any of these abusive experiences that need to be corrected or removed. Site owners will have a 30 day window to fix experiences flagged by the Report before Chrome removes ads.

With Chrome, users are always in control and can disable abusive sites filtering by going to their Chrome Settings.

Stronger protections ensure users can interact with their intended content on the web, without abusive experiences getting in the way.

Posted by Vivek Sekhar, Product Manager

Chrome 71 Beta: relative time formats and more

Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, macOS, and Windows. View a complete list of the features in Chrome 71 on Chrome 71 is beta as of October 25, 2018.

International Relative Time Format

When writing (and speaking), phrases such as 'yesterday' or 'in three months' are common. Yet such phrases are not part of built-in date and time APIs. To fill this need, libraries provide utility functions to provide localized versions of such phrases. The downside to this approach is that using these functions on the web requires downloading lists of customary words or phrases for each supported language. This increases a library's bundle size and download time.

Chrome 71 introduces Intl.RelativeTimeFormat(), which shifts the burden to the JavaScript engine. A few examples show how this works.

const rtf = new Intl.RelativeTimeFormat('en');

rtf.format(3.14, 'second');
// → 'in 3.14 seconds'

rtf.format(-15, 'minute');
// → '15 minutes ago'

This new API has a number of capabilities beyond what is shown here including such things as retrieving information for multiple languages, dealing with parts of a date or time individually (in other words, formatToParts()), and more. Read our article for details.

Other features in this release

Add FullscreenOptions

The Element.requestFullscreen() method can now be customized on Android using an optional options parameter. Its navigationUI parameter allows you to choose between making the navigation bar visible versus a completely immersive mode where no user agent controls are shown until a gesture is performed. Possible values are "auto", "show", and "hide". This value expresses an application preference, with "auto" meaning no preference. The UI may overrule this vale in any case.

Add 'persistent-storage' property to the Permission API

The "persistent-storage" property is a new permission for the Permission API. The permission state can already be queried with, with this change navigator.permissions.query({name:"persistent-storage"}) can be used as well.

Async touchpad pinch zoom events

Async touchpad pinch zoom events are for improving the page pinch zoom performance. Currently, the touchpad pinch zoom exposes a control wheel event that allows JS to cancel it. With this change, if the user doesn't make a pinch action on the touchpad, effectively canceling the control wheel event, then following control wheel events are not cancelable. But JavaScript does not know which ctrl wheel is the first one in the sequence, so if you want to cancel pinch zoom, you need to cancel all of them.

COLR/CPAL font support

Chrome now supports COLR/CPAL fonts which are a type of OpenType color font composed of layers of vector outline glyphs and color palette information into the final colored glyph. With this change, Chrome supports three color font formats cross-platform, the other two being CBDT/CBLC and SBIX. Because they are vector based, COLR/CPAL fonts provide for faster downloads and require less storage. An example of a COLR/CPAL font is the Twemoji color font.

CSS gradient color stop double-position syntax

Support is added for the stop position syntax from the CSS Image Values and Replaced Content Module Level 4 spec. Currently, repeating colors require explicit positions. For example:

linear-gradient(45deg, black 25%, black 50%, white 50%, white 75%)

To simplify the definition of solid color bands, two positions may be specified instead. For example:

linear-gradient(45deg, black 25% 50%, white 50% 75%)

Implement 'left' and 'right' values for 'text-underline-position'

Currently, in vertical flow for Chinese and Japanese, which side the underline appears on is not the same across browsers. To fix this, Chrome is adding support for 'left' and 'right' values of the 'text-underline-position' property. This property is part of the CSS3 Text Decoration spec which adds properties that implement new text decoration styling features such as lines, color, and style, including 'text-underline-position'.

JavaScript Modules: Credentials mode defaults to "same-origin"

The default credentials mode for module script requests is changing from "omit" to "same-origin", providing credentials to same-origin module script requests and their descendant scripts (static and dynamic imports). The current behavior can be surprising in that it's misaligned with other high-level features like the Fetch API, and in the web platform's current architecture, causes a second server connection. This is undesirable for developers looking to reduce latency.

TextEncoderStream and TextDecoderStream APIs

Text encoding and decoding supports streams to enable you to easily convert streams of binary data to text and vice-versa. An example of its usefulness is with readable streams. With a non-stream Response object, response.body.text() returns text. There is no equivalent for the ReadableStream returned by Response.Body, which can only return bytes. With the new API a streaming response body may be converted to text as so: Response.Body.pipeThrough(new TextDecoderStream()).

Unprefixed Fullscreen API

The Fullscreen API has features for entering, and exiting fullscreen mode as well as event handlers for monitoring such changes. A prefixed version of the API has been supported since Chrome 15. This update adds an unprefixed version of the API.

MediaElement and MediaStream nodes defined only for AudioContext

Chrome now only allows creation of MediaElementAudioSourceNode, MediaStreamAudioSourceNode, and MediaStreamAudioDestinationNode elements using an AudioContext. Previously these could be created using an OfflineAudioContext, but that does not comply with the spec. The behavior with an OfflineAudioContext is not well-defined and contrary to the real-time nature of the nodes themselves.

Interoperability improvements

Call capture event listeners in capturing phase at shadow hosts

To be interoperable with other browsers, Chrome now calls capture event listeners in the capturing phase at shadow hosts. Previously this was done in the bubbling phase on Chrome. A complete discussion may be read on the WHATWG repo on GitHub.

Improve :host, :host-context, and ::slotted specificity

Chrome now calculates the specificity for the :host() and :host-context() pseudo classes as well as for the arguments for ::slotted(). This brings it into compliance with the Shadow DOM v1 spec.
Shipping this will ensure interoperability between browsers since other browsers have or are about to ship this in their stable releases.

Deprecations and Removals

Chrome sometimes deprecates, removes, or changes features to increase interoperability with other browsers. This version of Chrome includes the following such changes.

Remove SpeechSynthesis.speak without user activation

The speechSynthesis.speak() method now fires an error if the document has not received user activation. This API is being abused by sites since it is one of the only remaining APIs which didn't adhere to autoplay policies in Chrome.

Remove importScripts() of new scripts after service worker installation.

Previously, a service worker could use importScripts() to import any script at any time. After this change, a service worker can only use importScripts() in two cases:

Remove prefixed versions of several APIs

Chrome has removed non-standard aliases for two widely supported standard interfaces.

Remove URL.createObjectURL for MediaStream

The URL.createObjectURL() method has been removed from the MediaStream interface. This method has been deprecated in 2013 and superseded by assigning streams to srcObject.

Remove document.origin

The document.origin property has been removed. This property was only ever implemented in Chromium and WebKit. It is redundant with self.origin which can be used in both window and worker contexts and has wider support.

Trustworthy Chrome Extensions, by default

Incredibly, it’s been nearly a decade since we launched the Chrome extensions system. Thanks to the hard work and innovation of our developer community, there are now more than 180,000 extensions in the Chrome Web Store, and nearly half of Chrome desktop users actively use extensions to customize Chrome and their experience on the web.

The extensions team's dual mission is to help users tailor Chrome’s functionality to their individual needs and interests, and to empower developers to build rich and useful extensions. But, first and foremost, it’s crucial that users be able to trust the extensions they install are safe, privacy-preserving, and performant. Users should always have full transparency about the scope of their extensions’ capabilities and data access.

We’ve recently taken a number of steps toward improved extension security with the launch of out-of-process iframes, the removal of inline installation, and significant advancements in our ability to detect and block malicious extensions using machine learning. Looking ahead, there are more fundamental changes needed so that all Chrome extensions are trustworthy by default.

Today we’re announcing some upcoming changes and plans for the future:

User controls for host permissions
Beginning in Chrome 70, users will have the choice to restrict extension host access to a custom list of sites, or to configure extensions to require a click to gain access to the current page.

While host permissions have enabled thousands of powerful and creative extension use cases, they have also led to a broad range of misuse - both malicious and unintentional - because they allow extensions to automatically read and change data on websites. Our aim is to improve user transparency and control over when extensions are able to access site data. In subsequent milestones, we’ll continue to optimize the user experience toward this goal while improving usability. If your extension requests host permissions, we encourage you to review our transition guide and begin testing as soon as possible.

Changes to the extensions review process
Going forward, extensions that request powerful permissions will be subject to additional compliance review. We’re also looking very closely at extensions that use remotely hosted code, with ongoing monitoring. Your extension’s permissions should be as narrowly-scoped as possible, and all your code should be included directly in the extension package, to minimize review time.

New code readability requirements
Starting today, Chrome Web Store will no longer allow extensions with obfuscated code. This includes code within the extension package as well as any external code or resource fetched from the web. This policy applies immediately to all new extension submissions. Existing extensions with obfuscated code can continue to submit updates over the next 90 days, but will be removed from the Chrome Web Store in early January if not compliant.

Today over 70% of malicious and policy violating extensions that we block from Chrome Web Store contain obfuscated code. At the same time, because obfuscation is mainly used to conceal code functionality, it adds a great deal of complexity to our review process. This is no longer acceptable given the aforementioned review process changes.

Additionally, since JavaScript code is always running locally on the user's machine, obfuscation is insufficient to protect proprietary code from a truly motivated reverse engineer. Obfuscation techniques also come with hefty performance costs such as slower execution and increased file and memory footprints.

Ordinary minification, on the other hand, typically speeds up code execution as it reduces code size, and is much more straightforward to review. Thus, minification will still be allowed, including the following techniques:

If you have an extension in the store with obfuscated code, please review our updated content policies as well as our recommended minification techniques for Google Developers, and submit a new compliant version before January 1st, 2019.

Required 2-Step Verification
In 2019, enrollment in 2-Step Verification will be required for Chrome Web Store developer accounts. If your extension becomes popular, it can attract attackers who want to steal it by hijacking your account, and 2-Step Verification adds an extra layer of security by requiring a second authentication step from your phone or a physical security key. We strongly recommend that you enroll as soon as possible.

For even stronger account security, consider the Advanced Protection Program. Advanced protection offers the same level of security that Google relies on for its own employees, requiring a physical security key to provide the strongest defense against phishing attacks.

Looking ahead: Manifest v3
In 2019 we will introduce the next extensions manifest version. Manifest v3 will entail additional platform changes that aim to create stronger security, privacy, and performance guarantees. We want to help all developers fall into the pit of success; writing a secure and performant extension in Manifest v3 should be easy, while writing an insecure or non-performant extension should be difficult.

Some key goals of manifest v3 include:
  • More narrowly-scoped and declarative APIs, to decrease the need for overly-broad access and enable more performant implementation by the browser, while preserving important functionality
  • Additional, easier mechanisms for users to control the permissions granted to extensions
  • Modernizing to align with new web capabilities, such as supporting Service Workers as a new type of background process

We intend to make the transition to manifest v3 as smooth as possible and we’re thinking carefully about the rollout plan. We’ll be in touch soon with more specific details.

We recognize that some of the changes announced today may require effort in the future, depending on your extension. But we believe the collective result will be worth that effort for all users, developers, and for the long term health of the Chrome extensions ecosystem. We’re committed to working with you to transition through these changes and are very interested in your feedback. If you have questions or comments, please get in touch with us on the Chromium extensions forum.

Posted by James Wagner, Chrome Extensions Product Manager

Chrome 70 beta: shape detection, web authentication, and more

Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, macOS, and Windows. View a complete list of the features in Chrome 70 on Chrome 70 is beta as of September 13, 2018.

Shape Detection Origin Trial

The Shape Detection API makes a device's shape detection capabilities available on the web, letting you identify faces, barcodes, and text in images. It does this without the use of a performance-killing library. As Chrome 70, this API is available for experimentation through a Chrome origin trial.

The Shape Detection API consists of three APIs: A Face Detection API, a Barcode Detection API and a Text Detection API. Given an image bitmap or a blob, the Face Detection API returns the location of faces and the locations of eyes, noses, and mouths within those faces. To give you rudimentary control of performance, you can limit the number of returned faces and prioritize speed over performance. The Barcode Detection API decodes barcodes and QR codes into strings. (There is a QR code demo at The value can be anything from a single set of digits to multi-line text. The Text Detection API reads Latin-1 text (as defined in iso8859-1) in images. All of these APIs only expose what's supported in the underlying device.

A short example will give you a taste of these APIs, all of which work in a similar fashion. The code below finds all barcodes or QR codes in a given image and prints their values to the console.

const image = document.getElementById('someImage');
try {
const barcodeDetector = new BarcodeDetector();
const barcodes = await barcodeDetector.detect(image);
barcodes.forEach(barcode => console.log(barcodes.rawValue));
} catch (exception) {
console.error('Boo! Barcode detection failed:', exception);

Web Authentication

Chrome 70 has two updates to the Web Authentication API related to the PublicKeyCredential type.

The Credential Management API, enabled in Chrome 51, defined a framework for handling credentials that included semantics for creating, getting, and storing them. It did this through two credential types: PasswordCredential and FederatedCredential. The Web Authentication API adds a third credential type, PublicKeyCredential, which allows web applications to create and use strong, cryptographically attested, and application-scoped credentials to strongly authenticate users. The PublicKeyCredential type was enabled by default on desktop in Chrome 67. In Chrome 70 it is also enabled by default on Android.

Also enabled by default are macOS's TouchID and Android's fingerprint sensor via Web Authentication. These allow developers to access biometric authenticators through the Credential Management API's PublicKeyCredential type.

A Web Authentication verification screen

Other Features in this Release

Displaying a dialog causes pages to lose fullscreen

Dialog boxes, specifically authentication prompts, payments, and file pickers require context for users to make decisions. Fullscreen, by definition is immersive, and removes the context that a user needs to make a decision. Chrome now exits full screen whenever a page shows a dialog box.


Add referrerpolicy support to <script> elements

Many resource-fetching elements have support for the referrerpolicy attribute, which lets developers provide a keyword to influence the value of the Referer HTTP header that accompanies a request. The <link> element already has support for this, so it is technically possible to preload a script with a developer-set referrer policy. Starting in this version of Chrome, the <script> element supports the referrerpolicy as well.

The <rp> element defaults to display:none

The default style of the <rp> element is changed to display:none instead of display:inline even if it is not inside the <ruby> element as defined in the HTML specification. This behavior is implemented in the user agent stylesheet, but the web author can override it.

Intervention Reports

An intervention is when a user agent does not honor an application request for security, performance, or annoyance reasons. With this change, Chrome can be configured to send intervention and deprecation messages to your servers using the Report-To HTTP Response header field and surface them in the ReportingObserver interface. This is the first of several proposed uses for the Report-To header. Follow these links to learn more about the header and the interface.


Support codec and container switching with MSE using SourceBuffer.changeType()

This change adds the SourceBuffer.changeType() method to improve cross-codec or cross-bytestream transitions during playback with Media Source Extensions.

Support Opus in mp4 with Media Source Extensions

Opus is an audio codec already supported by the HTML5 src attribute on <url> elements. It is now supported by Media Source Extensions.

'name' attribute for dedicated workers

Dedicated workers now have a name attribute, which is specified by an optional argument on the worker's constructor. This lets you distinguish dedicated workers by name when you have multiple workers with the same URL. Developers can print name in the DevTools console which will make it easier to debug workers. When the name parameter is omitted, an empty string is used as the default value. For more information, see the discussion on GitHub.

ontouch* APIs default to disabled on desktop

To avoid confusion on touch feature detection, ontouch* members on window, document, and element are disabled by default on desktop (Mac, Windows, Linux, ChromeOS). Note that this is not disabling touches, and usage such as addEventListener("touchstart", ...) is not affected.

Options dictionary for postMessage methods

An optional PostMessageOptions object has been added as an argument to postMessage() for 6 of the 7 interfaces where it's supported, specifically, DedicatedWorkerGlobalScope, MessagePort, ServiceWorker, ServiceWorker.Client, Window, and Worker. This gives the function a similar interface on its definitions and allows it to be extended in the future. Because broadcastChannel.postMessage() doesn't take additional arguments (such as transfer) it is not being changed.


This  getConfiguration() was implemented according to the WebRTC 1.0. Specifically it returns the last configuration applied via setConfiguration(), or if setConfiguration() hasn't been called, the configuration the RTCPeerConnection was constructed with.


A description property is being added to Symbol.prototype to provide a more ergonomic way of accessing the description of a Symbol. Previously, the description could only be accessed indirectly through Symbol.protoype.toString().

TLS 1.3

TLS 1.3 is an overhaul of the TLS protocol with a simpler, less error-prone design that improves both efficiency and security. The new design reduces the number of round-trips required to establish a connection and removes legacy insecure options, making it easier to securely configure a server. It additionally encrypts more of the handshake and makes the resumption mode more resilient to key compromise.

Update behavior of CSS Grid Layout percentage row tracks and gutters

Percentage row tracks and gutters in grid containers now have indefinite heights. Previously, these were behaving similarly to percentage heights in regular blocks, but the CSS Working Group has resolved to make them behave the same as for columns, making them symmetric. Percentages are now ignored when computing intrinsic height and resolved afterwards against that height. That way both column and row axes will have symmetric behavior to resolve percentages tracks and gutters.

Web Bluetooth available on Windows 10

Web Bluetooth allows websites to communicate over GATT with nearby user-selected Bluetooth devices in a secure and privacy-preserving way. In Chrome 56, this shipped on Android, ChromeOS, and macOS. In Chrome 70 it is shipping on Windows 10. For earlier versions of Windows and Linux, it is still behind a flag (chrome://flags/#enable-experimental-web-platform-features).

WebUSB on Dedicated Workers

WebUSB is enabled inside dedicated workers. This allows developers to perform heavy I/O and processing of data from a USB device on a separate thread to reduce the performance impact on the main thread.

Deprecations and Interoperability Improvements

Chrome sometimes deprecates, removes, or changes features to increase interoperability with other browsers. This version of Chrome includes the following such changes.

Remove AppCache from insecure contexts.

AppCache is now removed from insecure contexts. AppCache is a powerful feature that allows offline and persistent access to an origin, which is a powerful privilege escalation for cross-site scripting. This removes that attack vector by only allowing it only over HTTPS. Developers looking for an alternative to AppCache are encouraged to use service workers. An experimental library is available to ease that transition.

Remove anonymous getter for HTMLFrameSetElement

The anonymous getter for HTMLFrameSetElement is non-standard and therefore removed.

Deprecate and remove Gamepads.item()

The legacy item() accessor is removed from the Gamepads array. This change improves compatibility with Firefox which is so far the only browser to implement GamepadList.

Deprecate Custom Elements v0

Custom Elements are a web components technology that lets you create new HTML tags, beef up existing tags, or extend components authored by other developers. Custom Elements v1 have been implemented in Chrome since version 54, which shipped in October 2016. Custom Elements v0 is now deprecated with removal expected in Chrome 73, around March 2019.

Deprecate HTML Imports

HTML Imports, which allow HTML to be imported from one document to another, are now deprecated. Removal is expected in Chrome 73, around March 2019. Sites depending on HTML imports already require a polyfill on non-Chromium browsers. When HTML imports is removed, sites that have the polyfill should continue to work on Chrome.

Deprecate Shadow DOM v0

Shadow DOM is a web components technology that uses scoped subtrees inside elements. Shadow DOM v1 has been implemented in Chrome since version 53, which shipped in August of 2016. Shadow DOM v0 is now deprecated with removal expected in Chrome 73, around March 2019. Sites depending on HTML imports already require a polyfill on non-Chromium browsers. When Shadow DOM v0 is removed, sites that have the polyfill should continue to work on Chrome.

Deprecate SpeechSynthesis.speak() without user activation

The speechSynthesis.speak() function now throws an error if the document has not received a user activation. This API is being abused by sites since it is one of the only remaining APIs which does not adhere to autoplay policies in Chrome.

10 years of Speed in Chrome

Speed has been one of Chrome’s four core principles, since it was first launched ten years ago. We’ve always wanted to enable web developers to provide users with fast, engaging web experiences. On Chrome’s 10th birthday, we thought it would be fun to look at what we’ve done to improve speed over the years and what we’re doing next.

Many components in the browser contribute to speed

V8 is Chrome’s JavaScript and WebAssembly engine. With web pages using an increasing amount of JavaScript, a fast engine to handle it is an important cornerstone. Over the years, we worked on a new JavaScript execution pipeline for V8, launching Ignition (a new interpreter) and TurboFan (an optimizing compiler). These allowed us to improve performance on the Speedometer benchmark by 5-10%. Script streaming enabled us to parse JavaScript on a background thread as soon as it began downloading, improving page loads by up to 10%. We then added background compilation reducing main-thread compile time by up to 20%.

Our work on project Orinoco enabled concurrent garbage collection, freeing up the main thread and reducing jank. Over time, we also shifted to focusing on real-world JavaScript performance, helping us double the performance of the React.js runtime and improve performance for libraries like Vue.js, Preact, and Angular up to 40%. Parallel, concurrent, and incremental garbage collection reduced garbage collection induced jank by 100× since the initial V8 commit. We also implemented WebAssembly, enabling developers to run non-JavaScript code on the web with predictable performance, and launched the Liftoff baseline compiler to ensure fast startup times of WASM apps. These new components are just the latest in a 10-year effort that has improved V8's performance release-to-release for an improvement of 20x over the years.

V8 Bench scores for a range of Chrome releases over the years. V8 Bench is the predecessor to the old Octane benchmark. We've used it for this chart because unlike Octane, it can run in all Chrome versions, including the initial Chrome Beta.

Chrome has also played a key role in helping evolve network protocols and transport layers through SPDY, HTTP/2 and QUIC. SPDY aimed to address limitations of HTTP/1.1 and became the foundation of HTTP/2 protocol, which is now supported by all modern browsers. In parallel, the team has been actively iterating on QUIC, which aims to further improve latency and user experience and now has an active IETF effort behind it. QUIC’s benefits are noticeable for video services like YouTube. Users reported 30% fewer rebuffers when watching videos over QUIC.

Next up is Chrome's rendering pipeline. This is responsible for ensuring webpages are responsive to users and display at 60 frames per second (fps). To display content at 60fps, Chrome has 16ms to render each frame. This includes JavaScript execution, style, layout, paint and pushing pixels to the user's screen. Of this 16ms, the less Chrome uses, the more web developers have to delight their users. Improvements to our rendering pipeline have included optimizing how we identify which elements in a page need to be redrawn and better tracking visually non-overlapping sets. This reduced the time to paint new frames to the screen by up to 35%.

In 2015, a user-centric performance model called RAIL was introduced by the Chrome team. We recently updated it.

What about memory consumption? Between Chrome 63 and 66, a ~20-30% improvement in renderer process memory usage was observed. We hope to continue exploring ways to build on this now that site-isolation has landed. Ignition and TurboFan reduced V8's overall memory footprint, slimming it down by 5-10% on all devices and platforms supported by V8. Some sleuthing this year also discovered memory leaks impacting 7% of sites on the web, which we’ve now fully fixed. Many components contribute to Chrome’s speed including the DOM, CSS and storage systems like IndexedDB. To learn more about our improvements to performance, continue keeping an eye on the Chromium Blog.

Give web developers more power to measure and optimize their web pages

Understanding where to start with improving your site can be a tedious process. To help, we explored several tools for understanding the lab signals and real-world experience felt by your users. Over the years, the Chrome DevTools Performance panel became a powerful way to visualize the play-by-play breakdown of how web pages were displayed in a lab setting. To continue lowering the friction for finding performance opportunities sites had, we then worked on Lighthouse - a tool for analyzing the quality of your website, giving you clear measurements of your site’s performance and specific guidance for improving your users’ experience. Lighthouse can be accessed directly from inside the DevTools Audits panel, run from the command-line, or integrated with other development products like WebPageTest.
Lighthouse running in the Chrome DevTools Audits panel

To complement the lab data provided by Lighthouse, we released the Chrome User Experience Report to help developers get access to field metrics for the experience their users feel in the real-world, such as First Contentful Paint and First Input Delay. Now, developers can build out their own custom site performance reports and track progress over millions of origins using the CrUX Dashboard.

We also introduced a number of Web Platform capabilities to help developers optimize the loading of their sites. We shipped Resource Hints and <link rel=preload> to allow developers to inform the browser what resources are critical to load early on. Chrome was one of the first browsers to implement support for byte-saving approaches like Brotli for compression, WOFF2 for smaller web fonts and WebP support for images.
We’ve been excited to see an increasing number of browsers support these features over time. Chrome implemented Service Workers, enabling offline caching & network resilience for repeat visits to pages. We’re delighted to see broad modern browser support for the feature.

In fact, Google Search now uses Service Worker and navigation preload for opportunistic caching on repeat searches. This led to a 2x improvement in page load times for repeat visits.
As we look to the future, we are also excited about the potential that emerging standards like native lazy-loading for images & iframes, and image formats like AV1 have to help deliver content to users efficiently.

Enjoy more of the web on your data-plan with Chrome

Over the last 10 years, the size of web pages has been ever-increasing, but for many users coming online for the first time, data can be prohibitively expensive or painfully slow. To help, Chrome released data-conscious features over the years like Chrome’s Data Saver. Data Saver intelligently optimizes pages, saving up to 92% on data consumption.

Going ahead, we are exploring new ways to help you save data. For users on the slowest connections, we've been working on Chrome for Android, allowing for smarter page optimizations to show essential content earlier. These page transformations load far faster than the full page, and we're continuing to improve our fidelity, coverage, and performance.

We've also been experimenting with putting guardrails in place for users who are data- or network- constrained. For example, we're exploring bringing native lazy-loading to Chrome, as well as providing users the option to stop additional requests from a page when it uses a lot of data.

We’re just getting started...

Together, these changes help developers and businesses deliver useful content to their users sooner. We know there’s still work to be done. Here’s to offering improvements to page load performance over another 10 years!

Posted by Addy Osmani, JavaScript Janitor

How we designed Chrome 10 years ago

NOTE: This article was inspired by a conversation with Darin Fisher, VP for Google Chrome, for our YouTube series “Designer vs. Developer”.

To release a browser when there were already established ones in the market was a bold move—especially when some of the major browsers were clocking over a million downloads within just hours of their release.
The community speculated about a Google browser as early as 2004, but the team actually started working on the project in 2006. With the rise in rich web applications such as Gmail, YouTube, and Google Maps, the demand for more powerful browsers became apparent. These new web apps were processor-intensive and the browsers weren’t designed to handle that level of complexity.

“In your typical browser of that day, if you were to leave Gmail running overnight, you would come back the next day and your browser would feel pretty sluggish.”
– Darin Fisher, VP Chrome

Browsers of that time mimicked what early search engines had done, diluting the focus on the core user experience. Search engines were mostly portal sites with a sea of links and a tiny input field. Google Search stripped away the clutter, offering the user a single input field, and focused on a single task.

Web browsers had created a similar problem with excessive toolbars. Whenever users installed a new app, they were offered an extra toolbar. Eventually, the browser UI dominated the user's screen real estate and left very little space for content. Chrome wanted to do what Google did with search: focus on content. The team wanted to get out of the user’s way and include features that weren’t possible before, such as draggable tabs. Even the extension system was built to ensure that the screen space for content wasn’t compromised and that the surrounding UI was minimized as much as possible.

The mantra for Chrome was the four S’s: simplicity, speed, security, and stability.

Simplicity represented the streamlined UI design and experience. Speed was about how quickly the browser responded when a user performed an action. Speed wasn’t just about load time, either. Before Chrome, browsers would often hang or fail to respond when a user tried to close a tab, had too many tabs open, or was doing something complicated on a page. Chrome worked on a multiprocessor architecture, so if the user clicked to close a tab, it would simply close.

Security was about making users feel safe on the web, protecting them from any nasties on the internet such as viruses or fake sites, and giving them control over what was happening. This tied into the final S -- Stability of the browser, ensuring that it wouldn’t randomly crash. The team put a lot of effort in making sure it supported the many quirks on the web and rendered pages in a way that web developers intended.

I asked Darin about the things he is proud of and the decisions he regretted. He mentioned the liberation of starting with the Windows version, which meant his teams could focus on building a great browser without thinking about any cross-platform issues. While it maintained the free-spirit of development for the team, to their peril, they had to recreate everything from scratch when building for mobile, MacOS and Linux - a painful but critical learning of ‘thinking long-term’ for him and the team.

The other challenge I asked him about was the dreaded “best viewed in browser X” banner message that was common in the early 2000s, indicating that site content might not show properly on some browsers (including Chrome). Today, Chrome is working with other browsers vendors, the W3C committee, and especially developers, to make sure we’re solving the right problems for the community, such as the cross-collaboration work we did when implementing CSS Grid.

What do the next ten years hold? As new computers, mobile devices, and users come online, the most likely effect will be that design patterns and trends from Asia and Africa become the standard way of experiencing digital design. Web makers in India have pioneered offline experiences, and app designers in Nigeria are developing new ways of delivering Ecommerce experiences to users on 2G networks.

So, here’s to the next ten years. Happy birthday, Chrome!

Posted by Mustafa Kurtuldu, Design Advocate

10 Years of Chrome DevTools

Chrome is turning 10! Thank you for making the web development community so open, collaborative, and supportive. DevTools draws inspiration from countless other projects. Here’s a look back at how DevTools came about, and how it’s changed over the years.

In the beginning, there was Firebug

Imagine for a moment that browsers didn't ship with developer tools. How would you debug JavaScript? You'd basically have 3 options:
What about layout issues? Network errors? Again, all you could really do is conduct painstaking experiments in your code. This was the reality of web development up until 2006. Then a little tool called Firebug came along and changed everything.

A screenshot of Firebug's Net panel, taken from
Saying Goodbye to Firebug (source and license)

Firebug was a Firefox extension that let you debug, edit, and monitor pages in real-time. As a web developer suddenly you went from having no visibility into your pages to having what are essentially the core features of modern developer tools. The ability to understand exactly why Firefox was behaving as it was unleashed a flood of creativity on the web. Without Firebug, the Web 2.0 era wouldn't have been possible.

WebKit Web Inspector

Around the same time as Firebug’s launch, a few Google engineers started working on a project which would eventually lead to Chrome. From the start, Chrome was a mashup of different code libraries. For rendering the Chrome engineers opted for WebKit, which is the open-source project that still powers Safari to this day. An added bonus of using WebKit was that it came with a handy tool called the Web Inspector.

A screenshot of the Web Inspector, taken from Web Inspector Redesign (source and license)

Like the Net panel of Firebug, the original Web Inspector probably looks familiar. Much of its functionality lives on to this day as the Elements panel in Chrome DevTools. Web Inspector launched a few days after Firebug, and Safari was the first browser to bundle developer tooling directly into the browser.

The "Inspect Element" era

Chrome brought many innovative ideas to the browser ecosystem, such as the omnibox that combined search and the address bar, and a multi-process architecture that prevented one hanging tab from crashing the entire browser. But the innovation we like the most was providing developer tools in every build to every user, exposed with the click of a mouse.

"Inspect Element" in 2010

Before Chrome, developer tooling was an opt-in experience. You either had to install an extension, like Firebug, or enable some flags, as is still the case in Safari today. Chrome was the first browser to make developer tooling accessible from every browser instance. We'd like to claim that we had a grand vision for creating a developer-friendly browser from the start, but the reality is that Chrome had a lot of compatibility issues in its early days (which makes sense, since no one was building for it) and we needed to give web developers an easy way to fix these issues. Web developers told us that it was a useful feature, and we kept it.

The mobile era

For the first few years of the DevTools project, we essentially added chapters to the stories that Firebug and Web Inspector started. The next big shift in how we approached DevTools happened when it became clear that smartphones were here to stay.
Our first mission in this brave new world was to enable developers to debug real mobile devices from their development machines, which we call remote debugging. DevTools was actually well-positioned to handle remote debugging, thanks to another consequence of Chrome’s multi-process architecture. Early on in the DevTools project we realized that the only way a debugger could reliably access a multi-process browser was through a client-server protocol, with the browser being the server, and the debugger being the client. When mobile Chrome came around, the protocol was already baked into it, so we just had to make the DevTools running on your development machine communicate with the Chrome running on your mobile device over the protocol. This protocol still forms the backbone of DevTools today, and is now known as the Chrome DevTools Protocol.

Remote Debugging

Remote debugging was a step in the right direction, and to this day is still the primary tool for making sure that your sites behave reasonably on real mobile devices. Over time, however, we realized that remote debugging could be a bit tedious. When you're in the early phases of building out a site or feature, you usually just need a first-order approximation of the mobile experience. This prompted us to create a set of mobile simulation features, such as:

  • Precisely emulating the mobile viewport, simulating touch-based input and device orientation.
  • Throttling the network connection to simulate 3G and CPU to simulate less-powerful mobile hardware.
  • Spoofing user agent, geolocation, accelerometer data and more.

We collectively refer to these features as Device Mode.

An early prototype of Device Mode

Device Mode in 2018

The performance era

While the mobile era unfolded, big apps like Gmail were pushing the limits of the web's capabilities. Gmail-scale bugs called for Gmail-scale tools. One of our first major contributions to the tooling ecosystem was to show a play-by-play breakdown of exactly everything that Chrome had to do in order to display a page.

The original Timeline panel, as announced in Do More with Chrome Developer Tools

The Performance panel in 2018

These tools were a step in the right direction, but in order to spot optimization opportunities you needed to learn the nitty-gritty details about how browsers work and sift through a lot of data. Lately we've been building on this foundation to provide more
guided performance insights. The new Lighthouse engine powers the Audits panel, and is also available as a Node module for integration with CI systems.

Performance suggestions in the Audits panel

The Node.js era

Up until 2014 or so, we mainly thought of DevTools as a tool for building great experiences on Chrome. The rise of Node prompted us to rethink our role in the web ecosystem.
For the first few years of Node's existence, Node developers were in a situation similar to that of web developers before Firebug, or Gmail developers before the Timeline panel: the scale of Node apps outpaced the scale of Node tools. Given that Node runs on Chrome's JavaScript engine, V8, DevTools was a natural candidate to fill the gap. Support for debugging Node with DevTools landed in 2016 and includes the usual DevTools features, such as breakpoints, code stepping, blackboxing, source maps for transpiled code, and so on.
Node Connection Manager

The DevTools protocol ecosystem

The name Chrome DevTools Protocol (CDP) suggests an API that only DevTools can use. The reality is more general than that: it’s the API that enables programmatic access to Chrome. Over the last few years, we've seen a few third-party libraries and applications join the protocol ecosystem:
  • chrome-remote-interface provides low level JavaScript access to the protocol
  • Puppeteer brings it to the next level of abstraction and enables automation of the evergreen headless Chrome browser with modern JavaScript API
  • Lighthouse automates the process of finding ways to improve the performance and quality of pages

We're excited to see thousands of projects depend on these packages to enable rich interaction with Chrome. If you’re in the tooling or automation business, it’s worth checking out the protocol to see if it opens up any opportunities in your domain. For example, the VS Code and WebStorm teams both use it to enable JavaScript debugging within their respective IDEs.

What's next?

Our core mission is to build tools that help you create great experiences on the web. We very much rely on your feedback to help us determine what products or features to build.

Thank you for creating such a vibrant community. We look forward to another 10 years of building the web with you.

Posted by the Chrome DevTools team

The ‘Capable Web’: A 10 Year Retrospective

When we introduced Chrome in 2008, our goal was to “keep evolving with the web and continuing to build a solid foundation for modern web applications.” In honor of our tenth year, we’d like to highlight some of the major changes in the web’s rich capabilities that we feel lucky to share with other browser vendors.

As the very first pages were served on the open web in 1990, people recognized that the ability to deliver dynamic content would make the web unique—you could provide information and function just by sharing a URL. The Common Gateway Interface standard released in 1993 defined a simple interface for web servers to run code in response to web requests. It brought a new era of experience and capability to computing, accessible at the click of a link. Hop forward two short years to JavaScript, then another year to frames, specifically the <iframe> tag. These innovations let developers dynamically load content into pages, brought a new level of interactivity to the web, and increased user expectations of what could be done in the browser.

Accessibility, linkability, indexability, and universal reach have always been the web’s core strengths. Alongside these super powers, users want ever richer and more-engaging experiences. “Ajax” was coined in 2005 to describe the combination of asynchronous JavaScript and XML, which shaped a more interactive, modern web. It led to the creation of such services as Google Maps, cementing the web as the best way to deliver experiences available to anyone, on any device.

2008 – 2014: Web applications, HTML5, and the start of the mobile era

Chrome saw huge progress in its early years, with a large number of what are now considered “core APIs” coming to the web after the WebKit implementation. The video, audio, and canvas elements were some of the first “modern web” features that many of us distinctly remember (and who can forget border-radius?). These features brought a new level of interaction to web experiences, and meant developers no longer needed plugins such as Adobe Flash or Java, to build interactive media and graphical experiences. Chrome experiments have captured great examples of rich experiences that are a direct result of the web’s improved performance.

The “Mobile Web” really hit the world in 2010, and we saw a slew of new platform primitives introduced for the platform (many inspired directly by Google Gears) to help make building web apps easier. We could now make responsive, offline-enabled applications with AppCache and WebSQL, request permission to access the user's geolocation, and even understand the orientation of the user’s device.
WebSocket landed on the platform the same year, heralding a change in the types of experiences developers could deliver on the web. No longer did they have to use long polling to enable a bi-directional channel between the user and a service; developers now had a two-way channel with a simple API to provide real-time communication.

Plink is an interactive music experiment synchronising player state via websockets.

Four major APIs came to Chrome in 2011. WebGL, Web Audio, and the Fullscreen API let us build rich and immersive experiences that could take advantage of the entire screen. IndexedDB — a new “web-first” storage mechanism — us store and query serializable JavaScript objects such as Strings, Objects, Arrays, Files, and Blobs more effectively.

Chrome Web Lab was an experiment that bridged the physical and digital worlds. It used Web Socket, video, real-time streaming, WebGL, and Web Audio to create an immersive world.

A bumper year for game-changing experiences on the web arrived in 2012. On the back of WebGL and Fullscreen, the Pointer Lock and Gamepad APIs let us build games and other web experiences that felt really interactive. The game-changing collection of WebRTC APIs truly set the web apart from all of the other platforms: It let us build P2P video-chat and real-time data sharing, without any plug-ins or proprietary stack, and accessible by simply clicking a link.

One of the first Chrome on Android to Chrome on Android WebRTC calls (March 2013)

In just seven years, the web changed drastically. Browsers got significantly faster and more capable, letting developers build richer experiences on the desktop. Users started to consume even more content on mobile, meaning we all had to rethink how our experiences would work across devices and form-factors, even when the user had no connectivity.

2015-2018: PWA, The Extensible Web, and deeper integration era

In 2015, we experienced a fundamental change in how we thought about integrating capabilities into the web platform. The Extensible Web manifesto asked browser engineers to consider a layered platform that offered lower-level primitives that were easier to explain, more efficient to implement, and allowed web developers to easily build higher-level abstractions, thus increasing the cadence and availability of compelling new features. Service Worker is an example of building on these APIs to follow these principles. Service Worker is a small piece of JavaScript that sits between the browser and the network, and lets the developer decide what to do with any web requests.

The combination of Service Worker and a handful of new APIs allowed marked the beginning of the Progressive Web Apps (PWA) era. PWAs are high-quality sites that combine the reach of the web with the user expectations that come with native platforms. Specifically, PWAs are...
  • Fast—they load instantly
  • Reliable—they never show the “downasaur,” even in uncertain network conditions, by taking advantage of the Service Worker and Cache APIs
  • Engaging—they respond quickly to user interactions with silky-smooth animations and no janky scrolling
  • Capable—the sites feel like natural extensions on the device, with immersive user experiences provided by features such as “fullscreen” and standalone mode through Web App Manifest; they deliver capabilities for meeting specific business goals, such as re-engagement through the Add to Homescreen feature and Web Push notifications

As PWAs became more established, so did the capabilities of the platform. The Background Sync API brought increased opportunities for developers to improve the resilience of their applications. We also got a better understanding of the network capabilities with extensions to the Network Information API.

Pointer Events, a critical component for any web site or app, came to Chrome after a long wait. Pointer Events presented a unified model for handling all forms of gesture-based input, ranging from touch to pens to mouse pointers.

In 2017, deeper integration of web apps with the host operating system and secure access to devices around the user arrived..

The Image Capture and Media Capture APIs provided full-frame access and control over a phone camera, as well as from other input sources such as a canvas. The Web Share API let sites share data directly with the operating system’s native sharing systems.

The Web Bluetooth API let a user securely select a Bluetooth LE device and have a webpage interact with the device. The Web USB API enabled the same level of connectivity, but to devices connected to the user's machine.

WebAssembly (WASM) opens up many possibilities. It brings a runtime that can execute code at near-native performance. Plus, it opens a new world of experiences on the web by letting developers use existing codebases built for other platforms on the web platform.

Web VR came to the web at roughly the same time it came to native platforms. It let us deliver immersive experiences without installing an app, significantly reducing the gap between a new native primitive arriving on platforms and being available across the web platform.

Forward to the future

We’re excited about the possibilities of the web platform. The web can (and should) be feature-rich, but new capabilities don't always have to be more complex. Web development should be predictable, manageable, and pain-free. Coming APIs such as Feature Policy are great examples of additions that will help developers create amazing sites in a more predictable way, and provide more control and customization over the UX of certain browser features. Feature Policy is the browser's built-in guide rails to help web developers avoid common pitfalls and use best practices.

Layered APIs is another initiative that we're excited about. With it, developers will be able to load and use high-level features shipped directly into the browser as JS modules. For example, instead of building a custom virtualize-scrolling component, developers can just import and use <virtual-scroller> in a site. Layered APIs can be quickly iterated on by the standards bodies and implemented by browser vendors, and will help create a pay-as-you-go standard library for the web. And looking further, the Houdini and Web XR APIs will radically change experiences we can build on and with the web.

Over the last 10 years, we’ve seen a massive increase in the rate at which new primitives and capabilities can be introduced to the web. We can thank all the browser vendors for their continued work to create and iterate on specs, using streamlined processes like those defined by the WICG and based on the principles in the Extensible Web Manifesto. We’ll continue our commitment to work with browser vendors and the developer ecosystem to prioritize features that users need, and to ensure that those capabilities arrive in a “webby” way. By doing so, we can uphold our original mission, while also prioritizing user safety, discoverability, instant access, and universal reach for everyone on the planet.

Here’s to the future of an even-more-capable open web.

Posted by Paul Kinlan, the Wizzy Web Warrior.

Charting Browser Interoperability

At this year's Google I/O, Ben Galbraith and Malte Ubl presented a chart during the Web keynote showing how the web is getting more interoperable:

This trend is really important to the Chrome team: web developers should be able to target the web platform, not four different (though overlapping) platforms. The chart was gleaned from the data in our Web API Confluence Dashboard. This project, originally designed for browser engineers, provides insights into web interoperability by tracking page-visible JavaScript APIs across many releases of the four major browser engines. Here’s an example:
Caption: Count of browser-specific APIs goes up when browsers are first to ship a new API, and down when either (i) a second browser implements a new API, or (ii) an API that failed to build consensus is removed by the one browser that implemented it.
This chart plots a count of APIs shipped by only one of the four browser vendors over time. Interacting with the chart on the dashboard lets you open the list of APIs that corresponds to each count:
This information helps browser vendors prioritize work that will make the web more interoperable by either removing old browser-specific APIs or working with other vendors to implement APIs that are not yet widely supported.

How APIs are collected

In order to count APIs on the web, we first had to define what counts as a “web API”. The web is full of useful features, some of which are hard to define let alone detect. For this analysis we focused on JavaScript APIs that are visible to the developer when the page first loads. This leaves out several classes of feature, like CSS properties, HTML attributes, and APIs that are not available on page load (e.g., APIs are surfaced through interaction user/API interactions, or only available in certain types of workers). Nevertheless, it gives us a general view of programmable browser capabilities.
Our JavaScript API-finding algorithm inspects the JavaScript object graph exposed on the global window object. Check out the link for details on how we managed to extract APIs from JavaScript prototypes. With the help of BrowserStack’s 1000+ browser/operating system configurations, we were able to gather API data for browser releases going back as far as 2012.
Determining if the web is healthy
Take a look at the metrics page on the dashboard and you’ll see a few different charts we’ve generated about the shape of the web. These metrics, and the APIs they represent, give web platform implementers insights into which APIs are fragmenting the web. APIs that fragment the web are:
  1. Shipped by almost every browser, but not quite;
  2. Removed by one browser, but not others; or
  3. Shipped by one browser, but not others.
For example, our data shows that Safari is the only major browser that does not ship CSSStyleDeclaration#backfaceVisibility, Chrome has removed a number of SVGSVGElement APIs that are still shipped by all major browsers, and Edge is the only major browser shipping a number of BhxBrowser APIs.

Querying the raw data yourself

The dashboard isn’t intended to replace tools like MDN Docs or, but rather to illustrate trends that help browser vendors keep evolving the web towards interoperability. That said, the catalog page on the dashboard can give developers another source to corroborate interop info from manually curated sources. Try playing around with the search box above the API catalog. It supports some basic structured queries like in:firefox60 or notin:chrome66 for APIs in Firefox 60 or missing from Chrome 66, or RTCPeerConnection count:2 for RTCPeerConnection-related APIs shipped by exactly two of the browsers currently in view. Clicking the vertical ellipsis icon lets you add or remove dozens of browser releases from the grid, and the URL bar always contains a link that will get you back to the current query.

Validating MDN browser compat tables

We’ve also started using the data to help tech writers programmatically check their contributions to MDN’s excellent browser compatibility database. Try this out:
# Clone MDN’s browser compatibility database
git clone
cd browser-compat-data
# Install dependencies
npm install
# Load confluence data for ServiceWorker
npm run confluence -- --interfaces=ServiceWorker
# Take a look at the differences that have been applied to your working tree
git diff
# Read the full list of parameters you can try on `npm run confluence`
npm run confluence -- --help


We hope both browser engineers and web developers can benefit from the dashboard. Check it out and let us know what you think over at the GitHub project that hosts the code.

Posted by Mark Dittmer, Software Engineer working on Web Ecosystem Infrastructure

Help test / provide feedback on upcoming Chrome browser features

Feeling adventurous? Preview upcoming Chrome features before they’re released across Desktop, Android and iOS.

What is the Chrome beta channel?
Chrome beta allows you to preview upcoming features before they’re released. You can expect weekly updates, access to features and designs that may or may not make it to a stable version, and the ability to submit feedback earlier in the development process.

How do I switch to the Chrome beta channel?

Is the beta channel considered stable enough to use every day?
Generally yes - but there may be hiccups along the way. We encourage beta channel users to regularly back up their important personal settings, like bookmarks, passwords, and more.

What’s the best way to provide feedback, report problems, etc.?
Chrome has three ways to provide feedback and report issues you may spot.
  1. Reporting feedback within Chrome. You can use the instructions found here to submit a feedback report within Chrome. We use these reports in aggregate to identify spikes and trends. We also perform deep dives when investigating issues, when checking in on new feature launches, and as part of regular user journey efforts.
  2. Troubleshooting an issue. Our official community forums are the best place to get help troubleshooting issues. We have a group of top contributors who also have the ability to escalate threads, which often help identify issues we aren’t seeing elsewhere.
  3. Reporting confirmed bugs on this project tracker. Once an issue is confirmed as a bug, you’re able to create a report to it on our public development tracker - straight to our team! You may find that your bug has already been reported (things move fast!), but this allows us to track a bug’s life cycle in an easy way.

Is there anything more beta than beta?
Yes! For some platforms, we also offer developer versions and even canary builds that are fresh off the test servers. These are generally only advised for folks that work on projects that need testing lead time. You can learn more about other release options here.

Chrome 69 Beta: CSS tricks, and more

Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, macOS, and Windows. View a complete list of the features in Chrome 69 on Chrome 69 is beta as of August 2.

New CSS tricks

Chrome has added several new CSS features.

Conic gradients

CSS conic (angular/sweep) gradients allow color transitions around a center rather than radiating from it. This allows, for example, creating a hue wheel using only two CSS properties as shown below. More examples are available.

div {
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
border-radius: 50%

New margin, padding, and border properties

Logical margin, padding, and border properties now use standard names, specifically margin-{block,inline}-{start,end}, padding-{block,inline}-{start,end} and border-{block,inline}-{start,end}-{width,style,color}. These capabilities were previously supported through -webkit prefixes and non-standard names. Shorthand properties are only added for border-{block,inline}-{start,end}.

CSS scroll snap

CSS scroll snap positions are offsets in a scroll container's visual viewport where scrolling will stop after each scrolling operation. This improves the user experience by allowing scrollable zones to easily stop at predefined points. This also enables common UX scroll patterns without the need for JavaScript. One such pattern is a horizontal image carousel accomplished with the declarations below. The article Well-Controlled Scrolling with CSS Scroll Snap provides more depth.

#gallery {
scroll-snap-type: x mandatory;
overflow-x: scroll;
display: flex;

#gallery img {
scroll-snap-align: center;

Display cutouts

Display cutouts are now supported in Chrome through the new CSS env() function (environment variables) and the viewport-fit meta tag. This allows developers to take advantage of the entire screen on devices that have a display cutout.

For example, to tell the browser to expand into the display cutout area the site should set the viewport-fit property in the viewport meta tag to cover. The site can then use the safe area inset CSS environment variables to layout their content without being covered by the cutout. This is shown below. The explainer and the spec provide more information.

<meta name="viewport" content="viewport-fit: cover" />

#box {
margin-top: env(safe-area-inset-top);
margin-left: env(safe-area-inset-left);
margin-bottom: env(safe-area-inset-bottom);
margin-right: env(safe-area-inset-right);

<div id=box></div>

Other features in this release


OffscreenCanvas is a new interface that allows 2D and WebGL canvas rendering contexts to be used in Workers. This increases parallelism in web applications and improves performance on multi-core systems.

Chrome now also supports DedicatedWorker.requestAnimationFrame(), allowing animation-like events to be triggered the same on dedicated workers as they are in Window. For example:

const offscreenCanvas = new OffscreenCanvas(100, 100);
const ctx = offscreenCanvas.getContext("2d");
ctx.fillRect(0, 0, 10, 10);

Or together with canvas:

const canvasElement = document.getElementById("mycanvas")
const offscreenCanvas = canvasElement.transferControlToOffscreen();
const ctx = offscreenCanvas.getContext("2d");
ctx.fillRect(0, 0, 10, 10);

Inside a worker:

self.onmessage = function(ev) {
const offscreenCanvas =;
const ctx = offscreenCanvas.getContext("2d");
let x = 0;
const draw = function() {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.fillRect(x, 0, 10, 10);
x = (x + 1) % ctx.canvas.width;

Main page:

const worker = new Worker("worker.js");
const offscreenCanvas =
worker.postMessage(offscreenCanvas, [offscreenCanvas]);


A new method named Element.toggleAttribute() allows toggling the existence of an element's attribute in a way similar to Element.classList.toggle. An optional force parameter forces addition or deletion of the attribute depending on the value of force. This makes managing boolean attributes much simpler as the interface doesn't use strings as does Element.setAttribute().

Fetch API: Request.isHistoryNavigation

A boolean property has been added to request objects to indicate whether a particular request is a history navigation. This allows a service worker to know whether a request was due to a back/forward navigation. An example of how this might be used is that a service worker could respond to such a navigation with a cached response.

JavaScript APIs

JavaScript has several new APIs:

Keyboard Map API

Some applications such as games assign specific functions to specific physical keys. When the interface references these keys it needs to show either the character displayed on the key, which varies by locale, or the character assigned to the key by an alternate keyboard layout that may have been installed by the user. Because of these layout variations it's sometimes possible for the character shown in the interface to not reference the intended physical key.
This new API provides a way to translate KeyboardEvent.code values representing physical keys into correct strings for display to the user. You can find details and examples of this new API in the specification and the explainer.


Support for the "rtt", "downlink", and "ect" client hint values and HTTP request headers have been added to Chrome to convey a device's network connection speed to servers. For example, the rtt client hint provides the server with the estimated effective round-trip time of the current connection, rounded to the nearest multiple of 25 milliseconds.The server could use this serve a downsampled image if the connection speed is slower than expected. These network quality hints provide to the server the same values as provided to a web page by the Network Information APIs navigator.connection.rtt, navigator.connection.downlink, and navigator.connection.effectiveType.

Media: Querying encryption scheme support through EME

Some platforms or key systems only support AES-128 in CTR mode, while others only support CBCS mode. Still others are able to support both. A new method allows web developers to query whether a specific encryption scheme is supported by Encrypted Media Extensions (EME).

Mid-ligature text selection

Chrome now allows for text to be selected inside ligatures. (A ligature is a combination of two or more letters in a single symbol.) This includes both mouse selection as well as cursor selection in input and textarea elements. We have also changed slightly the way we render text selection to support this change. Parts of text that happen to lie outside the selection area are now rendered with the original style:

Selection in a ligature in English.

Selection in a ligature in Arabic.


To avoid leaking information between frames, performance.memory values are currently heavily quantized, and delayed by 20 minutes.
If the renderer process is locked to documents from a single site (as in the case of Site Isolation on desktop), we can expose this information with fewer concerns about leaking information between frames. In these cases, we'll not return quantized memory consumption information, delayed by 30 seconds. This allows developers to detect performance regressions from user data more easily because the memory measurements will be more accurate and can be taken more frequently.


Service workers have two improvements:
. This aligns with the specification.

Update behavior of CSS Grid Layout percentage row tracks and gutters

In a future release there will be a change to how percentage row tracks and gutters are resolved on grid containers with indefinite height. Currently they behave similar to percentage heights in regular blocks, but going forward they will behave the same as for columns, making them symmetric.
Percentages will be ignored when computing intrinsic height (like it happens now) and resolved afterwards against that height. That way both column and row axes will have a symmetric behavior in order to resolve tracks and gutters specified by percentages.
In Chrome 69 you'll get a warning in the JavaScript console about this change. If you want to keep the current behavior in Chrome 70 you need to replace your percentage row tracks and gutters in indefinite height grid containers by "auto" and "0px" respectively.

Web Locks API

The Web Locks API allows scripts running in one tab to asynchronously acquire a lock, hold it while work is performed, then release it. While held, no other script executing in the same origin can acquire the same lock. A lock represents some potentially shared resource, identified by a name chosen by the web app. For example, if a web app running in multiple tabs wants to ensure that only one tab is syncing to the network, each tab could try to acquire a my_net_sync lock, but only one tab will succeed.
An example is shown below. It shows a function called when a lock for my_resource is acquired.

await navigator.locks.request('my_resource', async lock => {
const url = await look_up_in_database();
const response = await fetch(url);
const body = await response.text();
await store_body_in_database(body);

For more details about the API methods and options, see the explainer and draft specification.

Web Authentication now supports CTAP2 FIDO devices

Web Authentication adds support for CTAP2 devices, which provide advanced security capabilities such as biometric authentication and resident keys (keys stored on the device). The WebAuthentication API formerly only supported Universal 2nd Factor (U2F) devices at the transport layer. This change doesn't alter the API surface itself, but enables richer device interactions via the existing Web Authentication API.


WebRTC has two improvements:
which returns the most optimistic view of the capabilities of the system for sending media of the given kind. It does not reserve any resources, ports, or other state but is meant to provide a way to discover the types of capabilities of the browser including which codecs or RTP extensions may be supported.

Deprecations and Interoperability Improvements

Chrome sometimes deprecates, removes, or changes features to increase interoperability with other browsers. This version of Chrome includes the following such changes.

Removal of 'stalled' event from HTMLMediaElements that use Media Source Extensions

Previously, the HTMLMediaElement.stalled event fired when media download has failed to progress for at least 3 seconds. In Media Source Extensions, the web app manages the download and the media element is not aware of its progress. Since some apps append media data in chunks larger than 3 seconds, stalled was being fired at inappropriate times. To solve this, stalled has been removed for Media Source Extensions.

Removal of document.createTouchList

The document.createTouchList() method was removed
in favor of the Touch() constructor which has been supported since Chrome 48.

The window.confirm() method no longer activates its parent tab

If a document in a background tab calls window.confirm(), it returns immediately with false, and no dialog is shown to the user. If the tab is active, then the call shows a dialog as normal. Specifically, this removes the ability to use window.confirm() to bring a tab to the front because this is rarely what the user wants.

Bringing Google Pay to PaymentRequest

In September 2016 Chrome launched support for the PaymentRequest API, which offers a secure, seamless checkout experience built right into the browser. As part of that launch, Chrome offered support for the basic-card payment method. This allowed users to pay for goods online via PaymentRequest with credit or debit cards stored locally in Chrome or, for signed-in users, stored within their Google Account.

As of version 70, Chrome will no longer return cards stored in a user’s Google Account as part of the basic-card payment method. To continue getting access to cards stored in a user’s Google Account, developers will need to add support for Google Pay. This change is due to the fact that beginning with version 68, Chrome supports the Payment Handler API, a standards-based way for the browser to communicate with digital payment providers. Google Pay supports this standard.

Getting started with Google Pay is easy. Visit the developer site for a quick tutorial and review the latest Google Pay brand guidelines for best practices. When you are ready to implement, just follow the detailed checklist to test your integration and request production access.

You can find troubleshooting tips for common issues and can contact the Google Pay team if you need any additional help. Thanks for helping us make payments on the web a great experience for users everywhere.

Posted by Zach Koch, Product Manager

Improving extension transparency for users

We strive to ensure choice and transparency for all Chrome users as they browse the web. Part of this choice is the ability to use the hundreds of thousands of extensions available in the Chrome Web Store to customize the browsing experience in useful and productivity-boosting ways. However, we continue to receive large volumes of complaints from users about unwanted extensions causing their Chrome experience to change unexpectedly — and the majority of these complaints are attributed to confusing or deceptive uses of inline installation on websites. As we’ve attempted to address this problem over the past few years, we’ve learned that the information displayed alongside extensions in the Chrome Web Store plays a critical role in ensuring that users can make informed decisions about whether to install an extension. When installed through the Chrome Web Store, extensions are significantly less likely to be uninstalled or cause user complaints, compared to extensions installed through inline installation.

Later this summer, inline installation will be retired on all platforms. Going forward, users will only be able to install extensions from within the Chrome Web Store, where they can view all information about an extension’s functionality prior to installing.

This change will roll out in three phases:

  • Starting today, inline installation will be unavailable to all newly published extensions. Extensions first published on June 12, 2018 or later that attempt to call the chrome.webstore.install() function will automatically redirect the user to the Chrome Web Store in a new tab to complete the installation.
  • Starting September 12, 2018, inline installation will be disabled for existing extensions, and users will be automatically redirected to the Chrome Web Store to complete the installation.
  • In early December 2018, the inline install API method will be removed from Chrome 71.

If you distribute an extension using inline installation, you will need to update install buttons on your website to link to your extension’s Chrome Web Store page prior to the stable release of Chrome 71. And if you haven’t already, be sure to read up on how to create a high quality store listing, and consider using our install badge on your site.

We’re proud of the choices the Chrome Web Store provides users in enhancing their browsing experience. At the same time, it’s crucial that users have robust information about extensions prior to installation, so that they fully understand how their browsing experience will be impacted. We’re confident this change will improve transparency for all users about their extension choices in Chrome.

Posted by James Wagner, Extensions Platform Product Manager

Chrome 68 Beta: add to home screen, payment handler, page lifecycle

Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, macOS, and Windows. View a complete list of the features in Chrome 68 on Chrome 68 is beta as of June 7, 2018.

New add to home screen behavior for progressive web apps

We've heard from developers that they want more control over how and when the add to home screen prompt appears. Starting in Chrome 68 on Android, the behavior is changing to provide more control over when the prompt appears. Developers can now provide additional context for their add to home screen experience, and improve the click-through rate.
Add to home screen dialog

If a site meets the add to home screen criteria, Chrome will fire a beforeinstallprompt event, and no longer automatically show the add to home screen banner. Instead, when the event has fired, developers can save the event and add a button or other UI element to the app to indicate it can be installed. When the user clicks the install button, developers can call prompt() on the saved beforeinstallprompt event to show the new add to home screen modal dialog. Although the beforeinstallprompt event may be fired without a user gesture, calling prompt() requires one.

let installPromptEvent;

window.addEventListener('beforeinstallprompt', (event) => {
// Prevent Chrome <= 67 from automatically showing the prompt
// Stash the event so it can be triggered later.
installPromptEvent = event;
// Update UI notify the user they can add to home screen
document.querySelector('#install-button').disabled = false;

As a temporary measure to provide developers with time to handle the beforeinstallpromptevent and add an install button to their app, Chrome will show a mini-infobar the first time the user visits a site that meets the add to home screen criteria. Once dismissed, the mini-infobar will not be shown again until a sufficient amount of time (currently 3 months) has passed.
Add to home screen mini infobar

See Changes to add home screen behavior for complete details, code samples and screenshots of the new UI elements.

Payment Handler API

The Payment Request API brought the web a simpler, faster way to check out online by combining a seamless native-browser UI with a user's preferred form of payment and shipping addresses.

The just-launched Payment Handler API extends the reach of Payment Request by enabling web-based payment apps to facilitate payments directly within the Payment Request experience.

const request = new PaymentRequest([{
// Your custom payment method identifier comes here
supportedMethods: ''
}], {
total: {
label: 'total',
amount: { value: '10', currency: 'USD' }

Making a payment through the Payment Request API. "Pay with BobPay" is a custom payment method built with the Payment Handler API.

Protecting users from unwanted destinations

In this version of Chrome we are changing a few user interface behaviors to improve users' experience.

Require user gesture for redirects in cross-origin iframes

Unless forbidden by the sandbox attribute, content embedded in an iframe can generally navigate the top-level browsing context to a different website. This functionality is used by many types of websites, including single-sign-on providers and payment processors. Unfortunately, this behavior is also a common abuse vector, redirecting users to unwanted destinations without their knowledge or consent.

Beginning in Chrome 68, content embedded in an iframe will require a user gesture to navigate the top-level browsing context to a different origin. Similar to pop-up blocking, when this protection triggers users will see Chrome UI giving them the option to allow the redirect the continue.

A demonstration illustrates the behavior. The demo behind this link will exhibit the old behavior in Chrome 67 and early. The improved behavior works in Chrome 68.

Block tab-under navigations

A tab-under is when a page both opens a popup to some destination and navigates the opener page to some third-party content. Typically this behavior is used to send the user to a desired destination while also creating another tab with an unwanted destination. Similar to pop-ups, Chrome will prevent these unwanted navigations and instead show native UI to the user so they can choose whether to follow this redirect to the new direction.

The Page Lifecycle API

Application lifecycle is a key way that modern operating systems manage resources. On Android, iOS and recently Windows, apps can be started and stopped at any time by the platform. This allows these platforms to streamline and reallocate resources where they best benefit the user.

On the web, there has historically been no such lifecycle, and apps can be alive indefinitely. With large numbers of web apps (and tabs) running, critical resources such as memory, CPU, battery, and network can be oversubscribed, leading to a bad end-user experience.

In Chrome 68, developers will be able to listen for and respond to system-initiated CPU suspension of backgrounded tabs using the new freeze and resume events. In cases where a frozen page needs to be discarded to conserve memory, the document.wasDiscarded property is now available so developers can restore view state (saved in the freeze event) when the user refocuses the tab and the page is reloaded. Developers wanting to test these events in their own applications can visit chrome://discards to simulate page freezing, resuming, and discarding.

For more information on the Page Lifecycle API, refer to the specification or the explainer on GitHub.

Other features in this release


Accept two values in the overflow shorthand

The overflow shorthand will accept two values, making it possible to set the horizontal and vertical overflow to different values. If two values are specified, the first is overflow-x and the second is overflow-y. Changing the shorthand allows developers to specify a single statement where previously two were required.

CSS position values with three parts

The object-position and perspective-origin properties will no longer accept three-part values like "top right 20%". This also applies for positions in basic shapes and gradients. Valid position values will now always have 1, 2 or 4 parts. Deprecation of 3-part values occurred in Chrome 66.

Support 'x' as a resolution unit

CSS Values and Units Module Level 4 defines a new resolution unit called "dot per pixel" for support of high-resolution displays. This change adds 'x' as a synonym for the existing abbreviation, 'dppx'.

Unprefix CSS "grab" and "grabbing" values for cursor property

The CSS values "grab" and "grabbing" change the mouse cursor to an open hand or closed hand, commonly used to indicate that something can be grabbed or is currently grabbed. Prefixed versions of these properties have been supported since Chrome 1. With this change Chrome will support the standard, unprefixed versions of these values.


High resolution timestamp for Gamepad

Gamepad.timestamp now uses a DOMHighResTimeStamp, a high resolution monotonic time with microsecond resolution. Timestamps are measured as offsets from the PerformanceTiming.navigationStart property.

Custom elements

New customElements.upgrade()

This function invokes custom element constructors for custom elements whose constructors are not called yet explicitly. If a custom element is created with the innerHTML setter and its parent node is not connected to a document, the custom element constructor is not called until it's connected. This method explicitly allows developers to fully control the timing of custom element constructor calls regardless of connectedness.


Keyboard lock

While in fullscreen, this API allows apps to receive keys that are normally handled by the system or the browser like Cmd-Tab/Alt-Tab, or Esc. Users can escape keyboard lock (and fullscreen) by holding the Esc key for two seconds.

Make PointerEvent.fromElement and PointerEvent.toElement null

To improve consistency with other browsers, PointerEvents for fromElement and toElement fields not follow the Pointer Events Level 2 spec by always reporting null.
In a MouseEvent (from which a PointerEvent inherits these fields), fromElement and toElement are non-standard, and have been inconsistent among major browsers for many years. Moreover, there are standard and consistent alternatives already: target and relatedTarget.

Unified touch adjustment

Touch adjustment changes the TouchEvent and the corresponding PointerEvent target to a best target within the touch area. TouchEvent coordinates will not be changed.

Treat long-press as a user gesture

Long-press is now considered a user gesture because it indicates user interaction with the page. This allows a web app to call restricted APIs like navigator.vibrate() on long-press to match native behavior.


WebAudio: add user selectable automation rate for AudioParams

The AudioParam.automationRate
attribute allows the user to select whether the AudioParam is either "a-rate" or "k-rate". Most but not all AudioParam attributes allow changing the rate, as given in the spec.
For example, BiquadFilterNode with default "a-rate" automation is expensive to compute due to the complex relationship between the parameters and the filter coefficients. If this fast automation is not needed (the most typical case), the parameters can be set to "k-rate".


Improve cache management for service worker scripts

The HTTP cache will be ignored when requesting updates to the service worker. Requests for importScripts will still go through the HTTP cache. But this is just the default. A new registration option, ServiceWorkerRegistration.updateViaCache is available that offers control over this behavior.
Previously, HTTP requests that checked for updates to the service worker were fulfilled by the HTTP cache by default. If a Cache-Control header was inadvertently set on a service worker, then service worker updates could be delayed, and if your service worker contained versioning information for your sites other assets, those updates would also be delayed.


RTCRtpSender.getParameters()/setParameters() return and control track encoding

The getParameters() and setParameters() methods return or update the RTCRtpSender object's current parameters for how the RTCRtpSender.track property is encoded and transmitted to a remote RTCRtpReceiver. These methods enable you to change encoding parameters for WebRTC streams such as the maximum transmission bitrate without doing any SDP munging or renegotiation.

Deprecations and interoperability improvements

Chrome sometimes deprecates, removes, or changes features to increase interoperability with other browsers. This version of Chrome includes the following such changes.

Deprecate and remove negative brightness values in filter

For compliance with specification, filter's brightness() function no longer accepts negative values.

Remove document.createTouch

The document.createTouch() method is being removed because the Touch() constructor has been supported since Chrome 48.

Remove Document.selectedStylesheetSet and Document.preferredStylesheetSet

The Document.selectedStylesheetSet and Document.preferredStylesheetSet attributes are removed because they are non-standard and only implemented by Chrome and WebKit. The standard versions of these attributes were removed from the spec in 2016.


Previously, Chrome provided the AMD_compressed_ATC_texture formats. Hardware support has dwindled to near-zero, so the extension has been rejected by the WebGL Working Group. Support for it has been removed.

Evolving Chrome's security indicators

Previously, we posted a proposal to mark all HTTP pages as definitively “not secure” and remove secure indicators for HTTPS pages. HTTPS usage on the web has taken off as we’ve evolved Chrome security indicators. Later this year, we’ll be taking several more steps along this path.

Users should expect that the web is safe by default, and they’ll be warned when there’s an issue. Since we’ll soon start marking all HTTP pages as “not secure”, we’ll step towards removing Chrome’s positive security indicators so that the default unmarked state is secure. Chrome will roll this out over time, starting by removing the “Secure” wording and HTTPS scheme in September 2018 (Chrome 69).

Chrome treatment for HTTPS pages

Previously, HTTP usage was too high to mark all HTTP pages with a strong red warning, but in October 2018 (Chrome 70), we’ll start showing the red “not secure” warning when users enter data on HTTP pages.

Chrome 70 treatment for HTTP pages with user input

We hope these changes continue to pave the way for a web that’s easy to use safely, by default. HTTPS is cheaper and easier than ever before, and unlocks powerful capabilities -- so don’t wait to migrate to HTTPS! Check out our set-up guides to get started.

Posted by Emily Schechter, Product Manager, Chrome Security

The State of the Web at Google I/O 2018

The web is a global treasure, and has many strengths we all enjoy. It is a distribution platform like no other, providing people around the world access to a diverse range of content and enabling businesses to reach customers wherever they are. Underpinning the web’s success is its community and a set of fundamentally open standards, which ensures it remains dynamic and available to all.

From PageRank to Chromium, Google has been deeply invested in the web’s continued success. This week at Google I/O, our annual developer conference, we gave a State of the Union presentation to catalog some of our recent efforts to help the web continue to thrive and work well for everyone. We recap the key themes below, but encourage you to check out all the talks on YouTube.

Service Worker
The introduction of the Service Worker API is one of the most significant improvements to the web in recent history. It frees developers from the limited lifecycle of pages, working in the background to intercept network requests and handle incoming events to enable web apps to work offline. With service workers your site can receive push notifications, synchronize data in the background, and more. Apple rolled out support for service workers in Safari 11.1 on iOS and MacOS this March and Microsoft Edge shipped service workers just last week — meaning that every major modern browser now supports the standard. Using service workers can be a big change to your architecture, so to make it simpler we created Workbox, which wraps up many common, powerful service worker patterns into an easy-to-use API. We've just released version 3 of this library, built around modules allowing you to use only the features that you need.

Progressive Web Apps (PWAs)
Service workers provide the backbone for many of the capabilities of a PWA. Companies around the world, in many different industries, have been seeing incredible success building PWAs. Starbucks, who launched their PWA site last year, saw a 2X increase in their daily active users. In fact, across advertising sites that we measured, when a site switches to a PWA they see on average a mobile conversion rate boost of 20%.

Many early PWAs were focused on mobile, and the benefits now also extend to desktop. Chrome will soon provide support for users to “install” PWAs to their desktop. The site will get its own icon and launch in a standalone window, while retaining powerful features that one expects in a browser like find in page, shareable URLs, Google Cast support, and more. At I/O we demonstrated how Spotify is deploying their rich media experience as a desktop PWA. “Install” support for desktop PWA’s will be coming to ChromeOS in Chrome 67 in early June, and on Windows and macOS later this year.

WebAssembly enables websites to run high-performance, low-level code written in languages like C or C++, and opens up entirely new classes of content on the web platform. In March, AutoCAD from Autodesk took a 35-year-old-codebase — older than the web itself — and compiled it to run directly inside a browser using WebAssembly. AutoCAD is now just a link away, meaning you can make edits to your CAD drawing directly in a browser, regardless of device or operating system. AutoCAD’s engineering team has a single shared C++ codebase, and when their desktop team makes changes, they are easily integrated into the AutoCAD web app.

If you’re interested in learning how to port code or write your own, check out the WebAssembly codelab, demonstrating the interplay between C libraries and the DOM. Whether you’re using a complex library written in C, want to bring a new codec into the web platform, or using an engine such as Unity or Unreal Engine, WebAssembly is here to help.

Lighthouse is a tool for analyzing the quality of your website, giving you clear measurements of your site’s performance and guidance for improving your users’ experience. It can be accessed directly from inside Chrome’s DevTools, run from the command-line, or integrated with other development products. In 2018 alone, half a million developers are running Lighthouse against their sites on a regular basis. We know that the web changes fast — Lighthouse can help you stay up-to-date with the latest performance best-practices. Lighthouse 3.0, announced at I/O, will be available to everyone later this week.

Lighthouse gives you clarity into your site’s load performance in a controlled environment. However, if you want to see how your site performs for real users in the real world, then check out the Chrome User Experience Report. The report now provides origin-level performance metrics for the four million most visited websites. To learn more about how these and other tools can help you get a complete view of your site’s performance, check out our speed tools infographic.

AMP is a web component library and ecosystem for building reliably fast websites with great user experience at scale. There are now over six billion AMP pages from 46 million domains, with a median load time of less than one second from Google Search. Businesses are seeing success with AMP: AliExpress, the global online retail marketplace, recently launched a new mobile site as an AMP-driven Progressive Web App. The new site increased their conversion rate for non-search traffic by an incredible 31%.

Content consumption on mobile is changing, with bite-sized, fullscreen storytelling formats becoming increasingly popular. To help meet the needs of web publishers, the AMP project recently announced the development of AMP stories, a rich set of web components built for mobile-first storytelling. The format is under continued development, and we encourage you to experiment with building your own stories and give the AMP team your feedback.

Web Packaging
Web Packaging is a set of emerging technologies that we believe will redefine how web content is distributed on the web and shared between users. It allows publishers to bundle their content for distribution by other parties, while keeping the integrity guarantees of HTTPS. As part of exploring the novel use cases enabled by Web Packaging, we realized that there was an interesting opportunity for AMP. Through collaboration with the AMP team and the web community, we were able to design a solution that allows AMP documents to retain the publisher's original URL when served from the AMP cache.

As a showcase of our efforts, AMP project collaborators Food Network and Pinterest have built demos of Web Packaging, such as the one below. If you are curious to learn more, the AMP team wrote an article that goes into more detail about how Web Packaging benefits users and publishers. Beyond the AMP application, we are excited about what Web Packaging technologies will enable and are looking forward to refine our thinking with your help.

A demo using Web Packaging with an AMP page from Google Search

Polymer is a JavaScript library that helps you create custom reusable web components to share with other developers or combine to build performant, maintainable apps. At I/O we launched version 3.0 of the library, which makes some significant upgrades to the Polymer ecosystem. We’ve completed support for using npm as the package management system and ES6 modules as the unit of composition, making it easy to use Polymer-based web components alongside your other favorite web development tools and frameworks.

We’ve also introduced LitElement, a new web component base-class that combines the expressive power of Lit-HTML with web components to make it even easier to create lightweight, reactive components using a modern and expressive templating syntax.

We’re also releasing the PWA Starter Kit, a comprehensive starting point for building web component-driven PWAs that are fast, reliable, responsive, themable, and score top marks in our Lighthouse PWA and performance criteria.

At I/O this year the Angular team gave an overview of the growth of the community, and touched on some of the exciting new capabilities that have landed across the core framework, CLI, and Angular Material library in version 6. Angular is used by millions of developers and has built up a huge amount of momentum and a fantastic ecosystem. New commands released in version 6 like `ng update` and `ng add` will keep your application up to date and help developers move faster as the Angular team continues to balance stability and innovation.

The Angular team also gave a sneak peek at some of the improvements they are making under the hood of Angular with Project Ivy. This will make Angular simpler to debug and faster to compile and run, in a way that works with existing applications. The team showed demonstrated the utility of these improvements in the form of a small Hello World application where the Angular features that weren't used were automatically removed from the application's JavaScript bundle.

Our mission at Google and in Chrome is to work with the community to create experiences that are fast, integrated, reliable, and engaging. We’re excited by the powerful new capabilities that have come to the open web platform, and the comprehensive set of tools that enable you to rapidly build high quality sites for your users. To stay up to date on the latest advancements in the web, visit our developer portal or check out the talks from this year’s I/O on the Google Developers YouTube channel. And we’d love to see you at the upcoming Chrome Dev Summit later this year.

Posted by Malte Ubl and Ben Galbraith