All Feeds | XSL | RSS | Embed | Edit

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

Angular
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

Chrome 67 Beta: WebXR Origin Trial, Generic Sensors

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 67 on ChromeStatus.com.

Generic Sensors

Sensor data is used in many native applications to enable experiences like immersive gaming, fitness tracking, and augmented or virtual reality. This data is now available to web applications using the Generic Sensor API. The API consists of a base Sensor interface with a set of concrete sensor classes built on top. Here are links to the sensor specs and examples of how they might be used.

Accelerometer: Use the motion of the device to move around in a 3D video.

Gyroscope: Use the orientation of the device to implement a table-top maze.

Orientation Sensor: This is what's called a fusion sensor meaning it combines readings from two or more sensors, in this case the accelerometer and the gyroscope. Whereas a maze implemented using only the gyroscope might only move the location marker in two dimensions, one implemented with the orientation sensor could require the user to physically turn the device to turn a corner.

Motion Sensors: This is a fusion sensor that includes a magnetometer as well as the accelerometer and the gyroscope. The most obvious use case for this as a virtual compass.

Accelerometer sensor measurements provide the movement speed of the device in terms of x, y, and z coordinates.

Intel has a website devoted to demonstrations of the sensor APIs with sample code available for download. The article published at the start of the origin trial has been updated.

WebXR Device API Origin Trial

The WebXR Device API enables the creation of virtual and augmented reality experiences on mobile devices and desktops - unifying experiences across AR enabled mobile devices, mobile-based VR headsets like Google Daydream View and Samsung Gear VR, as well as desktop-hosted headsets like Oculus Rift, HTC Vive, and Windows Mixed Reality Headsets.

The new API is available as an origin trial (explainer, sign-up form). You can find samples and documentation in the Immersive Web Community Group GitHub repos. There's also a polyfill available that supports browsers with WebVR 1.1 support, browsers without support, and "magic window" on mobile devices.

Watching a video in virtual reality

Virtual and augmented reality experiences enabled by this API include games as well as other "long tail" applications, such as:
Note: If you are participating in the WebVR origin Trial that has been available in Chrome since version 62, you cannot use your existing token for the WebXR origin Trial. The WebVR origin Trial (the old one) previously set to end on July 24, 2018, has been extended to September.

Other Features in this Release

SVG

SVG2 requires <foreignObject> to be a stacking context. Making <foreignObject> a stacking context allows developers to place HTML content underneath a <foreignObject> without confusion.

DOM

The DOM specification was updated so that DOMTokenList.replace() returns a boolean value indicating whether a replacement occurred. This is useful for code that takes different paths depending on whether a replacement occurred, avoiding the need for an extra condition using contains(). Chrome now follows the specification.

HTML > CustomElements

Authors can now create custom elements that inherit from the semantics of native, built-in elements. This saves developers from reimplementing built-in functionality such as accessibility, semantics, JavaScript methods/properties.

Input

Web pages can now process mouse events (mousedown, auxclick, mouseup) for back and forward buttons on mice with five or more buttons. This allows back and forward mouse buttons to be prevented by applications such as games that wish to override them.

On Windows the right-hand Alt key serves as AltGraph (ISO-Level-3-Shift) on some layouts, such as many European language layouts, to allow generating additional printable-characters. Internally the key generates Ctrl+Alt modifiers, so that Chrome reports all of Control, Alt and AltGraph in the flags for these keys. In this change, Chrome distinguishes AltGraph from Ctrl+Alt under Windows for consistency with these modifiers on other platforms.

For developers this removes an edge-case from keyboard event modifier handling. If an app handles keydown/keypress/keyup to implement shortcuts, it will no longer need workarounds to cope with certain (mainly European) keyboard layouts. For example, if an app uses Ctrl+# as a shortcut (as GMail did) then previously the app would need to check for both Ctrl, and for AltGraph, otherwise French users would not be able to use it.
This change applies to Windows only.

JavaScript

JavaScript now has a numeric primitive that provides support for arbitrary precision integers. Previously, numbers in JavaScript were represented as double-precision floats, giving them limited precision. Using the BigInt() function and 'n' suffix on numeric literals you can safely store and operate on large integers even beyond the safe integer limit for numbers.

Layout

Formatting contexts will now behave exactly like floats do when they are positioned. In other words, they no longer look at the shape-outside property of the float for positioning and instead are positioned according to their margin box. The new behavior may be seen in this example by changing the height of the flex class. This also affects how new formatting contexts are sized and positioned.

Loader

Client Hints enable origins to receive device-specific preferences in the HTTP request headers. Accept-CH-Lifetime adds a client hint that allow origins to persist their opt-in policy for a specified period so they can receive client hints on navigation requests. Additionally, on the first page load, this feature provides hints for all subresources of the page.

Network > Streams API

TransformStream is part of the Streams API, which is used for creating, composing, and consuming streams of data. It enables transforming data in stream form. It is typically used in a pipe between a ReadableStream and a WritableStream. The following example uses TransformStream to decode text received in a streaming response body.

function textDecodeTransform() {
const decoder = new TextDecoder();
return new TransformStream({
transform(chunk, controller) {
controller.enqueue(decoder.decode(chunk, { stream: true }));
}
});
}

fetch(url).then(response => {
// response.body is a stream of Uint8Array chunks.
// But if we want chunks of text:
const stream = response.body.pipeThrough(textDecodeTransform());
// …
});

Shadow DOM

The <slot> element can now participate in a flat layout tree, with UA style display: contents. Before this change, applying a CSS selector to a <slot> element had no effect. Not only is this fixed, but when selectors are applied to a <slot> element, its children inherit its styles.

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

To defend against certificate misissuance, web developers should use the Expect-CT header, including its reporting function. Expect-CT is safer than HPKP due to the flexibility it gives site operators to recover from configuration errors, and due to the built-in support offered by a number of CAs.

We expect to remove this in Chrome 69.

Deprecate AppCache on Non-secure Contexts

AppCache over HTTP is deprecated. AppCache is a powerful feature that allows offline and persistent access to an origin. Allowing AppCache to be used over non-secure contexts makes it an attack vector for cross-site scripting hacks.
Removal is expected in Chrome 69.

Layout

Several Webkit-prefixed CSS properties will be removed in this release.

-webkit-box-flex-group: This property has minimal usage based on the UseCounter in stable.

Percent (%) values for -webkit-line-clamp: There is interest in finding a standards-based solution to the number values use case, but we haven't seen demand for the %-based values.

-webkit-box-lines: This property was never fully implemented. It was originally intended such that a "vertical"/"horizontal" -webkit-box could have multiple rows/columns.

Protecting WebView with Safe Browsing

Since 2007, Google Safe Browsing has been protecting users across the web from phishing and malware attacks. It protects over three billion devices from an increasing number of threats, now also including unwanted software across desktop and mobile platforms. Today, we’re announcing that Google Play Protect is bringing Safe Browsing to WebView by default, starting in April 2018 with the release of WebView 66.

Developers of Android apps using WebView no longer have to make any changes to benefit from this protection. Safe Browsing in WebView has been available since Android 8.0 (API level 26), using the same underlying technology as Chrome on Android. When Safe Browsing is triggered, the app will present a warning and receive a network error. Apps built for API level 27 and above can customize this behavior with new APIs for Safe Browsing.

An example of a warning shown when Safe Browsing detects a dangerous site. The style and content of the warning will vary depending on the size of the WebView.

You can learn more about customizing and controlling Safe Browsing in the Android API documentation, and you can test your application today by visiting the Safe Browsing test URL (chrome://safe-browsing/match?type=malware) while using the current WebView beta.

Posted by Nate Fischer, Software Engineer

Protecting users from extension cryptojacking

As the extensions ecosystem continues to evolve, we remain focused on empowering developers to build innovative experiences while keeping our users as safe as possible. Over the past few months, there has been a rise in malicious extensions that appear to provide useful functionality on the surface, while embedding hidden cryptocurrency mining scripts that run in the background without the user’s consent. These mining scripts often consume significant CPU resources, and can severely impact system performance and power consumption.

 The chart above shows a recent example of CPU overutilization from hidden coin mining in an extension. 
Until now, Chrome Web Store policy has permitted cryptocurrency mining in extensions as long as it is the extension’s single purpose, and the user is adequately informed about the mining behavior. Unfortunately, approximately 90% of all extensions with mining scripts that developers have attempted to upload to Chrome Web Store have failed to comply with these policies, and have been either rejected or removed from the store.

Starting today, Chrome Web Store will no longer accept extensions that mine cryptocurrency. Existing extensions that mine cryptocurrency will be delisted from the Chrome Web Store in late June. Extensions with blockchain-related purposes other than mining will continue to be permitted in the Web Store.

The extensions platform provides powerful capabilities that have enabled our developer community to build a vibrant catalog of extensions that help users get the most out of Chrome. Unfortunately, these same capabilities have attracted malicious software developers who attempt to abuse the platform at the expense of users. This policy is another step forward in ensuring that Chrome users can enjoy the benefits of extensions without exposing themselves to hidden risks.

Posted by James Wagner, Extensions Platform Product Manager

Chrome 66 Beta: CSS Typed Object Model, Async Clipboard API, AudioWorklet

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 66 on ChromeStatus.

The ImageBitmap Rendering Context for <canvas>

Historically, rendering an image to a canvas has involved first creating an <img> tag and then rendering its contents to a canvas. This causes multiple copies of the image to be stored in memory. A new rendering context streamlines the display of ImageBitmap objects by avoiding memory duplication and rendering them more efficiently.
This example shows how to do this using an ImageBitmapRenderingContext. This essentially transfers ownership of an image's pixels. This example does so from a blob to a <canvas>, but pixels can be moved between <canvas> elements as well. Note that the blob is compressed so it is not a full copy in memory.

const image = await createImageBitmap(imageBlob);
const canvas = document.createElement('canvas');
const context = canvas.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

canvas.toBlob((outputJPEGBlob) => {
// Do something with outputJPEGBlob.
}, 'image/jpeg');

If this were done without createImageBitmap(), the imageBlob would be lazily decoded, which would cause jank. On the other hand createImageBitmap() is asynchronous which allows you to decode it completely before using it and avoiding jank. For example, a WebGL game could use this to load new textures on the fly as gameplay progresses.

CSS Typed Object Model

Historically, developers wanting to manipulate CSS properties have had to manipulate strings only for the browser to then convert it back to a typed representation. What made things worse was when developers tried to read the value of a CSS property in Javascript, this typed value was converted back to a string.
In version 66, Chrome implements the CSS Typed Object Model (OM) Level 1, a part of Houdini, for a subset of CSS properties. Typed OM reduces this burden on both the developer and browser by exposing CSS values as typed JavaScript objects rather than strings. Along with allowing the performant manipulation of values assigned to CSS properties, Typed OM allows developers to write more maintainable and easy to understand code.
A brief example illustrates the point. Previously if I wanted to set the opacity of an element I could do this:

el.style.opacity = 0.3;
el.style.opacity === "0.3"

With CSSOM:

el.attributeStyleMap.set("opacity", CSS.number("0.3"));
el.attributeStyleMap.get("opacity").value === 0.3

The returned values above are of type CSSUnitValue, which are easier to manipulate than strings.

Asynchronous Clipboard API

The new asynchronous clipboard API provides a promise-based means of reading from and writing to the clipboard. It's simpler than the old execCommand('copy') API released in Chrome 43 and integrates with the Permissions API. Future Chrome releases will also support copy/paste of richer types of data, including images.
To get a taste of this API, lets do simple write and read operations with text.

try {
await navigator.clipboard.writeText("Hello, clipboard.");
} catch {
console.error("Unable to write to clipboard.");
}

Similarly, to read text back:

const data = await navigator.clipboard.readText();
console.log("From the clipboard:", data);

For more information, including how to use security and permissions with the API, read Unblocking Clipboard Access and check out our sample.

AudioWorklet

The legacy ScriptProcessorNode was asynchronous and required thread hops, which could produce an unstable audio output. The AudioWorklet object provides a new synchronous JavaScript execution context which allows developers to programmatically control audio without additional latency and higher stability in the output audio.
You can see example code in action along with other examples at Google Chrome Labs.
In addition to AudioWorklet, other worklet API are being built. PaintWorklet was released in Chrome 65/Opera 52. An AnimationWorklet is planned. ScriptProcessorNode will be deprecated some time after AudioWorklet ships.

Other Features in this Release

Blink > Animation

The add and accumulate compositing operations are intended for building modularized animations. The add and accumulate keywords will be supported in Chrome soon. Until then, they will no longer throw errors. This is to maintain compatibility with Firefox and other implementations.

Blink > CSS

CSS has two new features.

Blink > Feature Policy

By default, the deviceorientation, deviceorientationabsolute, and devicemotion events are now restricted to top-level document and same-origin subframes, the same as if the feature policy for those features were set to 'self'. To modify this behavior, explicitly enable or disable the specific feature.

Blink > File API

The File API now results in a network error instead of a 404 when attempting to read from an invalid or non-existing blob URL.

Blink > Forms

HTML forms have two new features.

Blink > Fullscreen

If a page in fullscreen mode opens a popup and calls window.focus(), that page exits full screen. This does not occur if the popup receives focus some other way.

Blink > GetUserMedia

A new method on the MediaStreamTrack interface called getCapabilities()
returns a MediaTrackCapabilities object, which specifies the values or range of values which each constrianable property. Capabilities vary by device.

Blink > JavaScript

There are several JavaScript changes.

Blink > Layout

Layout has two new features.
The default value for all three is normal and the prefixed properties are aliases of the new ones. Note that column-gap property already exists and is used by css-multicol.

Blink > Media

Media has two new features.

Blink > Network

The Fetch API has two new features.


const controller = new AbortController();
const signal = controller.signal;
const requestPromise = fetch(url, { signal });

// Abort the fetch:
controller.abort();

Blink > ServiceWorker

Service workers have two changes.

Blink > WebRTC

Chrome now supports the RTCRtpSender.dtmf
attribute per the specification. This replaces the CreateDTMFSender() function which has not yet been deprecated.

Deprecations and Interoperability Improvements

Blink > CSS

The object-position and perspective-origin properties no longer accepts three-part values such as top right 20%. This change also applies to basic shapes and gradients. Valid position values must always have 1, 2, or 4 parts.

Blink > HTML

Following a specification change, ImageCapture.prototype.setOptions() has been removed.

Blink > Input

Following a specification change, document.createTouch() and document.createTouchList() have been removed.

Blink > Web Audio

Following a specification change, automatic dezippering of AudioParam.prototype.value changes was removed from Chrome. If you need to smooth the value of AudioParam changes, use AudioParam.prototype.setTargetAtTime().

Under the hood: How Chrome's ad filtering works

While most advertising on the web is respectful of user experience, over the years we've increasingly heard from our users that some advertising can be particularly intrusive. As we announced last June, Chrome will tackle this issue by removing ads from sites that do not follow the Better Ads Standards. We've previously discussed some of the details surrounding how Chrome protects users from intrusive ads, but as we approach the launch date of February 15, we wanted to go under the hood and discuss how this feature works in more detail.

What are the Better Ads Standards?
The Better Ads Standards are the result of public consumer research by the Coalition for Better Ads, an industry group focused on improving users' experience with online advertising. Over 40,000 internet users in North America and Europe participated in surveys where they were shown common ad experiences and asked to evaluate how intrusive the experiences were. The most intrusive ad experiences include prestitial ads (those full-page ads that block you from seeing the content on the page) and flashing animated ads. More details about the research and methodology can be found on the Coalition's website.

Although a few of the ad experiences that violate the Better Ads Standards are problems in the advertisement itself, the majority of problematic ad experiences are controlled by the site owner — such as high ad density or prestitial ads with countdown. This result led to the approach Chrome takes to protect users from many of the intrusive ad experiences identified by the Better Ads Standards: evaluate how well sites comply with the Better Ads Standards, inform sites of any issues encountered, provide the opportunity for sites to address identified issues, and remove ads from sites that continue to maintain a problematic ads experience.

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


Evaluating sites for violations
Sites are evaluated by examining a sample of pages from the site. Depending on how many violations of the Better Ads Standards are found, the site will be evaluated as having a status of Passing, Warning, or Failing. The evaluation status of sites can be accessed via the Ad Experience Report API. Site owners can also see more detailed results, such as the specific violations of the Better Ads Standards that were found, via the Ad Experience Report in Google’s Search Console. From the Report site owners can also request that their site be re-reviewed after they have addressed the non-compliant ad experiences.

The Ad Experience Report in Google's Search Console allows site owners to see their overall site evaluation status, as well as the specifics of any violations identified on their site.


Filtering on sites at the network level
At a technical level, when a Chrome user navigates to a page, Chrome’s ad filter first checks if that page belongs to a site that fails the Better Ads Standards. If so, network requests on the page — such as those for JavaScript or images — are checked against a list of known ad-related URL patterns. If there is a match, Chrome will block the request, preventing the ad from displaying on the page. This set of patterns is based on the public EasyList filter rules, and includes patterns matching many ad providers including Google’s own ad platforms, AdSense and DoubleClick.

What this looks like in Chrome
Chrome will automatically block ads on sites that fail the Better Ads Standards, using the approach described above. When at least one network request has been blocked, Chrome will show the user a message indicating that ad blocking has occurred as well as an option to disable this setting by selecting “allow ads on this site.” For desktop users, the notification in Chrome's address bar will look similar to Chrome's existing pop-up blocker. Android users will see message in a small infobar at the bottom of their screen, and can tap on “details” to see more information and override the default setting.

Chrome will automatically block intrusive ads on sites that have been found to violate the Better Ads Standards, but users have the option to disable the feature by selecting “allow ads on this site.” 


Early results show positive progress for users
While the result of this action is that Chrome users will not see ads on sites that consistently violate the Better Ads Standards, our goal is not to filter any ads at all but to improve the experience for all web users. As of February 12, 42% of sites which were failing the Better Ads Standards have resolved their issues and are now passing. This is the outcome we were hoping for — that sites would take steps to fix intrusive ads experiences themselves and benefit all web users. However, if a site continues to maintain non-compliant ad experiences 30 days after being notified of violations, Chrome will begin to block ads on that site.

We're encouraged by early results showing industry shifts away from intrusive ad experiences, and look forwarding to continued collaboration with the industry toward a future where Chrome's ad filtering technology will not be needed.

Posted by Chris Bentzel, Engineering Manager

Chrome 65 Beta: CSS Paint API and the ServerTiming API

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

CSS Paint API
The CSS Paint API, also known as “CSS Custom Paint”, allows developers to programmatically generate an image whenever a CSS property expects one. Instead of referencing an image resource, developers can now use the new paint() function to reference a paint worklet that will draw the image. This API can be used for many things, including making the DOM tree smaller and transferring significantly less data compared to an image.

<style>
  textarea
{
   
background-image: paint(checkerboard);
 
}
</style>
<textarea></textarea>
<script>
  CSS
.paintWorklet.addModule('checkerboard.js');
</script>

To see the paint worklet in action, check out our explainer and the video demo below.


In this example, the CSS Paint API is used to programmatically create a checkerboard image.
Server Timing API
Developers interested in measuring the performance of their web applications have been able to use the Navigation Timing and Resource Timing APIs to request timing data for the document and its resources. Until now, there has been no way for the server to send any details about its response time to the client. The new Server Timing API allows web servers to pass performance timing information via HTTP headers to browsers. This new API provides developers a more complete performance picture that includes the speed of both the client and the server. For example, Chrome Developer Tools now shows server timing performance information via the Server Timing API.

Screenshot of the Chrome Developer Tools integration of the ServerTiming API.

Other features in this release

Blink > CSS


Blink > DOM



Blink > Feature Policy

Blink > Network

  • To match compatibility with the TLS spec, Chrome now supports the draft-23 version of the TLS 1.3 protocol.
  • Developers can use Request.destination to evaluate which resource their service worker is fetching.

Blink > Performance APIs

  • As WebIDL was deprecated, PerformanceResourceTiming, PerformanceLongTaskTiming, and TaskAttributionTiming now support the toJSON method to convert objects to JSON.

Blink > Security

  • To protect users against cross-origin information leakage, Chrome will ignore the presence of the download attribute on anchor elements with cross-origin attributes.

Deprecations and interoperability improvements

Blink > Bindings

  • To match compatibility with the HTML spec, document.all is no longer overwritable.

Blink > Network

  • As previously announced, Chrome 65 will not trust certificates issued from Symantec’s Legacy PKI after December 1st, 2017, and will result in interstitials. This will only affect site operators who explicitly opted-out of the transition from Symantec’s Legacy PKI to DigiCert’s new PKI, and does not apply to the previously disclosed independent sub-CAs from this infrastructure.
For a complete list of all features (including experimental features) in this release, see the Chrome 65 milestone hotlist.

Posted by Ian Kilpatrick, Patiently Painting Engineer

A secure web is here to stay

For the past several years, we’ve moved toward a more secure web by strongly advocating that sites adopt HTTPS encryption. And within the last year, we’ve also helped users understand that HTTP sites are not secure by gradually marking a larger subset of HTTP pages as “not secure”. Beginning in July 2018 with the release of Chrome 68, Chrome will mark all HTTP sites as “not secure”.


In Chrome 68, the omnibox will display “Not secure” for all HTTP pages.

Developers have been transitioning their sites to HTTPS and making the web safer for everyone. Progress last year was incredible, and it’s continued since then:

Chrome is dedicated to making it as easy as possible to set up HTTPS. Mixed content audits are now available to help developers migrate their sites to HTTPS in the latest Node CLI version of Lighthouse, an automated tool for improving web pages. The new audit in Lighthouse helps developers find which resources a site loads using HTTP, and which of those are ready to be upgraded to HTTPS simply by changing the subresource reference to the HTTPS version.

Lighthouse is an automated developer tool for improving web pages.

Chrome’s new interface will help users understand that all HTTP sites are not secure, and continue to move the web towards a secure HTTPS web by default. HTTPS is easier and cheaper than ever before, and it unlocks both performance improvements and powerful new features that are too sensitive for HTTP. Developers, check out our set-up guides to get started.

Posted by Emily Schechter, Chrome Security Product Manager

Further protecting users from deceptive or confusing inline installation

Since 2012, Chrome has enabled extension developers to provide a smooth installation experience on their own pages using inline installation. We have also worked hard to prevent abuse of this feature by disabling inline installation in cases where we detect misleading or deceptive installation flows. User complaints have been reduced by 65% since the start of this disabling initiative. Fewer than 3% of extensions still engage in these deceptive or confusing install flows, but this subset of extensions generates 90% more user complaints on average than the rest of the extensions in the Chrome Web Store.

As part of our ongoing efforts to protect users, we are expanding our abuse protections to further reduce user harm. Starting in a few weeks, we will upgrade our automated inline installation abuse detection to improve our detection speed and better detect extensions using deceptive or confusing installation flows.

In addition to the existing extension-level protection, our expanded enforcement will also use machine learning to evaluate each inline installation request for signals of deceptive, confusing, or malicious ads or webpages. When we find those signals, we’ll selectively disable that one inline installation request and redirect the user to the extension’s page on the Chrome Web Store. This selective enforcement will not impact inline installation of that extension from other, non-deceptive sources.

We’ve taken these measures to preserve a good experience for Chrome users and developers in the Chrome Web Store. More information is available in the Inline Installation Enforcement FAQ.

Posted by Nav Jagpal and Benjamin Ackerman, Safe Browsing Team

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

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


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

 
Two types of abusive experiences where a deceptive site control appears to do one thing, but has a different behavior when clicked. One looks like a play button on a video but sends the user to an unwanted download when clicked (left), and the other looks like a close button but instead opens unwanted pop-up windows (right).

Resize Observer
Traditionally, responsive web applications have used CSS media queries or window.onresize to
build responsive components that adapt content to different viewport sizes. However, both of these
are global signals and require the overall viewport to change in order for the site to respond
accordingly. Chrome now supports the Resize Observer API to give web applications finer
control to observe changes to sizes of elements on a page.

const ro = new ResizeObserver((entries) => {
 for (const entry of entries) {
   const cr = entry.contentRect;
   console.log('Element:', entry.target);
   console.log(`Element size: ${cr.width}px × ${cr.height}px`);
   console.log(`Element padding: ${cr.top}px / ${cr.left}px`);
 }
});

// Observe one or multiple elements
ro.observe(someElement);
The code snippet above uses the Resize Observer API to observe changes to an element.

import.meta
Developers writing JavaScript modules often want access to host-specific metadata about the
current module. To make this easier, Chrome now supports the import.meta property within
modules that exposes the module URL via import.meta.url. Library authors might want to
access the URL of the module being bundled into the library to more easily resolve resources
relative to the module file as opposed to the current HTML document. In the future, Chrome plans to
add more properties to import.meta.

Other features in this release

Blink > Animation

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

Blink>Fonts

Blink>Input

Blink>JavaScript

  • To improve developer experience, Chrome now supports named captures in regular expressions, allowing developers to assign meaningful names to portions of a string that a regular expression matches.
  • Chrome now supports the Unicode property escapes \p{…} and \P{…} for regular expressions that have the u flag set, allowing developers to create more powerful Unicode-aware regular expressions.
  • To assist with local-aware formatting of strings produced by internationalization formatters, developers can now use Intl.NumberFormat.prototype.formatToParts() to format a number to a list of tokens and their type. Thanks to Igalia for helping make this happen!

Blink>Media

Blink>Network

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

Blink>Permissions API

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

Blink>Scroll

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

Blink>SVG

Blink>WebAudio

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

Blink>WebRTC

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

Blink>WindowDialog

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

UI>Notifications

Deprecations and interoperability improvements

Blink> CSS

Blink> DOM

Blink> Performance APIs


For a complete list of all features (including experimental features) in this release, see the
Chrome 64 milestone hotlist.  
Posted by Charles Harrison, Pop-Up Popping Engineer

Reducing Chrome crashes caused by third-party software

Roughly two-thirds of Windows Chrome users have other applications on their machines that interact with Chrome, such as accessibility or antivirus software. In the past, this software needed to inject code in Chrome in order to function properly; unfortunately, users with software that injects code into Windows Chrome are 15% more likely to experience crashes. With Chrome extensions and Native Messaging, there are now modern alternatives to running code inside of Chrome processes. Starting in July 2018, Chrome 68 will begin blocking third-party software from injecting code into Chrome on Windows.

These changes will take place in three phases. In April 2018, Chrome 66 will begin showing affected users a warning after a crash, alerting them that other software is injecting code into Chrome and guiding them to update or remove that software.

In Chrome 66 a warning will be shown to users with third-party software that injects into Chrome.


In July 2018, Chrome 68 will begin blocking third-party software from injecting into Chrome processes. If this blocking prevents Chrome from starting, Chrome will restart and allow the injection, but also show a warning that guides the user to remove the software. Finally, in January 2019, Chrome 72 will remove this accomodation and always block code injection.

While most software that injects code into Chrome will be affected by these changes, there are some exceptions. Microsoft-signed code, accessibility software, and IME software will not be affected. As with all Chrome changes, developers are encouraged to use Chrome Beta for early testing.

Fewer crashes means more happy users, and we look forward to continuing to make Chrome better for everyone.

Posted by Chris Hamilton, Chrome Stability Team

Expanding user protections on the web

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

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

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

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

Similar to how Google Safe Browsing protects users from malicious content, starting in early January Chrome's pop-up blocker will prevent sites with these types of abusive experiences from opening new windows or tabs. To help site owners prepare for this change, today we're also launching the Abusive Experiences Report alongside other similar reports in the Google Search Console. Site owners can use the report to see if any of these abusive experiences have been found on their site and improve their user experience. Otherwise, abusive experiences left unaddressed for 30 days will trigger the prevention of new windows and tabs.

Together, these protections will dramatically improve users' web browsing experiences while still allowing them access to all that the web has to offer. 

Posted by Ryan Schoen, Product Manager

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

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

Dynamic module imports

Currently, importing JavaScript modules is completely static, and developers cannot import modules based on runtime conditions, like whether a user is logged in. Starting in this release, the import(specifier) syntax now allows developers to dynamically load code into modules and scripts at runtime. This  can be used for lazy loading a script only when it’s needed, which improves performance of the application.

button.addEventListener('click', event => {
   import('./dialogBox.js')
   .then(dialogBox => {
       dialogBox.open();
   })
   .catch(error => {
       /* Error handling */
   });
});
The code example above shows how to use the import(specifier) function to import JavaScript after an event.

Async iterators and generators

Writing code that does any sort of iteration with async functions can be inelegant. The new async generator functions using the async iteration protocol are now available to help developers streamline the consumption or implementation of streaming data sources. Async iterators can be used in for loops and also to create custom async iterators through async iterator factories.
async function* getChunkSizes(url) {
 const response = await fetch(url);

 for await (const chunk of streamAsyncIterator(response.body)) {
   yield chunk.length;
 }
}
The code example above shows how to use async iterators to writer cleaner code for streaming fetches, using the streamAsyncIterator function.

Device Memory API

It’s challenging for developers to create one user experience that can work across all devices, due to varying device capabilities. The new Device Memory JavaScript API helps developers with this challenge by using the total RAM on a user’s machine to provide insights into device constraints. This insight enables developers to tailor content at runtime in accordance with hardware limitations. For example, developers can serve a “lite” app to users on low-end devices, resulting in better experiences and fewer frustrations. The Device Memory API can also be used to add context to metrics, such as the amount of time a task takes to complete in JavaScript, through the lens of device memory.



Permissions UI changes

When websites need special permissions from a user, they trigger a permission request. Currently these permission requests appear in Chrome for Android as ignorable banners at the bottom of the screen, and developers often show them without considering whether the user has the appropriate context to grant the permission. This results in a distracting user experience, and users ignore or temporarily dismiss these permission prompts more than 90% of the time.

In Chrome 59, we started to address this problem by temporarily blocking a permission if the user dismisses the request three times. As a next step, in this release Chrome for Android now presents permission requests as modal dialogs. This change reduces the overall number of permission prompts by 50%. It also makes users 5 times more likely to accept or deny requests, rather than temporarily dismissing or repeatedly ignoring them. To ensure users understand the permission request, developers should present users with permission requests at an appropriate time, as we’ve found that users were 2.5 times more likely to grant permission to a site that ask for permissions with context.

Other features in this release

Blink > Bindings

Blink > CSS


Blink > Fonts

Blink > HTML

Blink > JavaScript

Blink > MediaStream

Blink > Network

Blink > Sensor

Blink > Storage

UI > Browser > Mobile (Android)


Deprecations and interoperability improvements

Blink > Bindings

Blink > CSS


Blink > DOM


Sathya Gunasekaran, Lazily-Loaded Engineer

Introducing the Chrome User Experience Report

Chrome was founded to push the web forward, and a key part of that is enabling developers to improve their user experience. Although current tools allow developers to understand how real-world users experience their own sites, they have never provided insight into comparisons with other sites or macro user experience trends across the web. Following similar efforts like the HTTPS Transparency Report, today we’re making the Chrome User Experience Report available to encourage performance and user experience improvements across the web.

The report is a public dataset of key user experience metrics for top origins on the web. All performance data included in the report is from real-world conditions, aggregated from Chrome users who have opted-in to syncing their browsing history and have usage statistic reporting enabled. The initial release includes data from a sample of ten thousand origins and focuses on loading metrics, though we hope to expand coverage in future iterations. For full details on the dataset format, how to access it, and best practices for analysis, please see our developer documentation.

By querying the dataset, developers can understand how real Chrome users experience the web from the diverse set of hardware, software, and networks they use in the wild. Analyzing many origins on the web will help site developers and the web community understand where they are doing well, identify areas for improvement, and observe advancements in user experience over time.

We welcome feedback on the dataset’s format, metrics, dimensions, or any other ways to improve the report. We hope that this dataset will help the web community identify opportunities, record trends, and improve user experience on the web.

Posted by Bryan McQuade and Ilya Grigorik, User Experience Reporters

Building unified documentation for the web

Browsers are always exploring new directions. This independent experimentation has enabled the web to evolve to meet new use cases, but it also means that keeping up with how the web is changing can be difficult. Browsers maintain documentation for their features and APIs, but cross-browser documentation is often fragmented across several sources. One of Chrome’s top priorities is making it easier to build sites that work in all browsers, and simplifying web documentation is a key part of that effort.

Today, web documentation is taking a big step towards a unified source. Mozilla Developer Network (MDN) Web Docs is announcing a new product advisory board, which includes founding members from Mozilla, Google, Microsoft, Samsung, and several others from the web standards and development communities. The product advisory board will review and provide feedback on the direction of MDN’s web documentation going forward.

For the last several years, Chrome has been transitioning its web documentation efforts to MDN, allowing us to combine our documentation efforts with many open source contributors like Mozilla. The product advisory board is another step towards making MDN the best source of up-to-date, comprehensive documentation on the web and aligns closely with our goal to make it easier to build for the web as a whole. As part of this effort, we’re also investing in interoperability tests for the web, which allows browsers to share tests and compare the compatibility of their features. We’re also building new infrastructure to help browser developers find bugs and missing APIs between implementations.

Check out MDN Web Docs as the centralized source of web API documentation. And look out for more information on how we’re working to make the web an even easier platform to build on.

Posted by Dru Knox, Product Manager

Chrome 62 Beta: Network Quality Estimator API, OpenType variable fonts, and media capture from DOM elements

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

Network Quality Estimator API

The Network Infomation API has been available in previous versions of Chrome, but has only provided theoretical network speeds given the type of a user's connection. In this release, the API has been expanded to provide developers with network performance metrics as experienced by the client. Using the API, a developer can inspect the current expected round trip time and throughput and be notified of performance changes. To simplify application logic, the API also summarizes measured network performance as the cellular connection type (e.g. 2G) most similar to it, even if the actual connection is WiFi or Ethernet.


Using these network quality signals, developers can tailor content to network constraints. For example, on very slow connections, developers can serve a simplified version of the page to improve page load times.  These signals will also soon be available as HTTP request headers and enabled via Client Hints.

OpenType Variable Fonts

OpenType Font Variations bring new typographic capabilities to the web. Previously, one font file contained just a single instance of a font family, including only one weight (Regular, Bold, Black…) or one stretch (Normal, Condensed, Expanded…).
Figure: Animated Amstelvar and Decovar variable font examples


With variable fonts, responsive design on the web now extends to typography. OpenType Variations provide a continuous spectrum of stylistic variations while saving space and bandwidth, since they all load from a single compact font file. Stretch, style, and weight can be adjusted using the respective updated CSS properties which now allow numeric values. Fine tuning of variation axis parameters, such as weight or width, is possible using the font-variation-settings CSS property.

Media Capture from DOM Elements

The W3C Media Capture from DOM Elements API now allows sites to live-capture content in the form of a MediaStream directly from HTMLMediaElements (i.e. <video> and <audio>). By invoking the captureStream() method on HTMLMediaElements, streamed content can be recorded and sent remotely using WebRTC, processed with WebAudio, or manipulated in various other ways.


Figure: A 3D rendering being live-captured and streamed to a peer connection using WebRTC.

Other features in this release

Deprecations and interoperability improvements


Posted by Ben Greenstein and Tarun Bansal, The Network’s Watch

Unified autoplay

Users watch and listen to a lot of media, and autoplay can make it faster and easier to consume on the web. However, one of the most frequent user concerns is unexpected media playback, which can use data, consume power, and make unwanted noise while browsing. To address this, Chrome will be making autoplay more consistent with user expectations and will give users more control over audio.

Starting in Chrome 64, autoplay will be allowed when either the media won’t play sound, or the user has indicated an interest in the media. This will allow autoplay to occur when users want media to play, and respect users' wishes when they don't. These changes will also unify desktop and mobile web behavior, making web media development more predictable across platforms and browsers.

Not all users have the same preferences for autoplay media, so Chrome 63 will add a new user option to completely disable audio for individual sites. This site muting option will persist between browsing sessions, allowing users to customize when and where audio will play.

These changes will give users greater control over media playing in their browser, while making it easier for publishers to implement autoplay where it benefits the user. For more details, please see the autoplay roadmap.

Posted by Mounir Lamouri, Software Engineer

Update 2018-05-21: The autoplay policy is in effect for <video> and <audio> and prevents roughly half of unwanted media autoplays. Please see the Chrome blog post for more details.

For the Web Audio API, the policy described in this post will go into effect in Chrome 70 (October, 2018). This will affect web games and some WebRTC applications, as well as any site using the Web Audio API. We recommend that developers update their code to correctly handle the autoplay policy.

Run multiple versions of Chrome side-by-side

By default, when users install Chrome, they receive the most stable and supported build available. However, Chrome fans and web developers have long been able to opt into new Chrome features by installing pre-release packages such as Chrome Beta and Dev. Historically it's been impossible to install these pre-releases on the same computer as stable Chrome, forcing developers to choose between testing their site in the next version of Chrome and experiencing their site as users see it now.

Starting today, Chrome Beta and Chrome Dev can be installed on the same Windows computer as stable Chrome and run simultaneously, allowing developers to more easily test their site across multiple versions of Chrome. This means side-by-side Chrome installation is available on Windows, Android, and Linux, and will be made available on other platforms in future releases.


Chrome, Chrome Beta, and Chrome Dev can now be installed side by side on the same Windows computer. 

To install Chrome Beta or Chrome Dev, visit the Chromium release channels page. If you already have Chrome Dev or Beta and wish to run it side-by-side with stable Chrome, you'll need to uninstall it and then reinstall from this page. To easily transfer your bookmarks, settings, and other data, sign in to Chrome before you uninstall. And if you see something not quite right in Chrome Dev or Beta, please send us feedback.

Posted by Greg Thompson, Bitmason

Chrome 61 Beta: JavaScript modules, Payment Request API on desktop, Web Share API, and WebUSB

Unless otherwise noted, changes described below apply to the newest Chrome Beta channel release for Android, Chrome OS, Linux, Mac, and Windows.
JavaScript modules
Modules allow developers to declare a script's dependencies and are already popular in third-party build tools, which use them to bundle only the required scripts. This release adds native support for JavaScript modules via the new <script type=module> element.


Native support means the browser can fetch granular dependencies in parallel, taking advantage of caching, avoiding duplications across the page, and ensuring the script executes in the correct order, all without a build step.


To get started, learn more about JavaScript modules and the aspects of the JavaScript language affected by modules.

Payment Request API on desktop

The Payment Request API is now available for Windows, Mac, Linux, and ChromeOS, following the announcement of Android support last year. Developers can now offer secure, seamless checkout experiences across platforms. To get started, “check out” our integration guide.
The PaymentRequest process throughout a transaction.

Web Share API

To allow users to easily share content on social networks, developers have had to manually integrate sharing buttons into their site for each social service. This often leads to users not being able to share with the services they actually use, in addition to bloated page sizes and security risks from including third-party code.


Sites can now use the new navigator.share API on Chrome for Android to trigger the native Android share dialog, allowing the user to easily share text or links with any of their installed native apps. In a future release, this API will also be able to share to installed web apps.


The navigator.share API allows the user to share content with a variety of native apps via the native Android share dialog.

WebUSB

Most hardware peripherals such as keyboards, mice, printers, and gamepads are supported by high-level web platform APIs. To use specialized educational, scientific, or industrial USB peripherals, users must find and install potentially unsafe drivers and software with system-level privileges.


Chrome now supports the WebUSB API, allowing web apps to communicate with peripherals given a user's consent. This enables all the functionality provided by these devices, while still preserving the security guarantees of the web.

Other features in this release

  • The Network Information API is now available on desktop as well as Android, enabling sites to access the underlying connection information of a device.
  • Developers can now specify scrolling smoothness via a new optional parameter in existing Scroll APIs or with the scroll-behavior CSS property.
  • The CSSOM View Smooth Scroll API brings native smooth scrolling to the platform through a the scroll-behavior: smooth CSS property or by using the window.scrollTo() DOM scroll method, eliminating the need to implement this behavior with JavaScript
  • CSS color values can now be 8- and 4-digit hex colors of the format #RRGGBBAA and #RGBA.
  • Sites can now access the relative positions of the screen content with the Visual Viewport API, exposing complex functionality like pinch-and-zoom in a more direct way.
  • The Device RAM API is now available, exposing the amount of RAM on a user’s device to sites to optimize overall performance of a web application.
  • When navigating from an installed web app to a site outside the initial web app’s scope, the new site now automatically loads in a Custom Chrome Tab.
  • For video using native controls, Chrome will now automatically expand video to fullscreen when a user rotates their device in an orientation that matches a video playing on the screen.
  • nextHopProtocol is now available in Resource Timing and Navigation Timing, providing access to the network protocol used to fetch a resource.  
  • Sites can now require embedded third-party content to enforce a given Content Security Policy via the new csp attribute on <iframe> elements.
  • The DOMTokenList interface now supports replace() to easily change all identical tokens to a new one, such as active to inactive on expiration.
  • To access a list of attribute names of an element, getAttributeNames() is now supported and gives developers a more direct mechanism than going through the attributes collection.
  • To increase security, sites will now automatically exit full screen if a JavaScript dialog opens.
  • Sites can now access an estimate for the disk space used by a given origin and quota in bytes via the Storage API’s new navigator.storage.estimate() function.
  • To improve the browser’s cache hit rate, URLSearchParams now supports sort() to list all stored name-value pairs.
  • The URLSearchParams constructor has been updated to accept any object as a parameter instead of only other URLSearchParams instances.
  • To prevent the use of mis-issued certificates from going unnoticed, sites can use the new Expect-CT HTTP header which will enable automated reporting and/or enforcement of Certificate Transparency requirements.
  • Chrome will no longer decode frames for videos using Media Source in background tabs.
  • "Non-Live" camera settings such as photo resolution, red eye reduction, and flash mode can now be retrieved with ImageCapture.getPhotoSettings().
  • Sites can now use the Clear-Site-Data header to delete their own client-side data, such as cookies, service workers, storage, and cache entries.


Deprecations and interoperability improvements

  • To increase security, resources with URLs containing both \n and < characters will now be blocked.
  • To increase security, support for the Presentation API’s start function has been deprecated and removed for insecure contexts.
  • To align with the spec and preserve browser consistency, the scrollingElement is now the documentElement in standards mode.
  • To increase consistency across on<event> attributes, onwheel attributes have been moved from Element to Window, Document, HTMLElement, and SVGElement.
  • To better follow spec and provide more granular control over the flow of referred content, Chrome now supports three new Referrer Policy values, same-origin, strict-origin, and strict-origin-when-cross-origin.
  • Following the change in spec, the maximum value for colSpan has been decreased from 8190 to 1000.

Posted by Domenic Denicola, Maverick Modulator

So long, and thanks for all the Flash

This morning, Adobe announced their plans to end support for Flash in late 2020. For Flash developers this will mean transitioning to HTML, as Chrome will increasingly require explicit permission from users to run Flash content until support is removed completely at the end of 2020.

HTML is faster, safer, and more power efficient than Flash and works across desktop and mobile. Three years ago, over 80% of Chrome daily desktop users visited sites with Flash. Today only 17% of users visit sites with Flash and we’re continuing to see a downward trend as sites move to HTML.

Over a three-year period, Flash usage has declined 80%.


We strongly encourage sites that still rely on Flash to make the move to HTML as there will be an increasing number of restrictions on Flash leading up to the end of support:

Flash helped make the web a rich, dynamic experience, and shaped the modern set of web standards. We recognize that any transition can have challenges, but we will continue to work closely with Adobe and the web community to ensure that users have a great experience and to help developers make the web transition to HTML.

Posted by Anthony Laforge, on behalf of the Chrome team

Chrome 60 Beta: Paint Timing API, CSS font-display, and Credential Management API improvements

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

Paint Timing API

While no generalized metric perfectly captures when a page is loaded in all cases, First Paint and First Contentful Paint are invaluable numbers to measure critical user moments during loading. To give developers better insight into their site’s loading performance, the new Paint Timing API exposes metrics that capture First Paint and First Contentful Paint.
Screen Shot 2017-06-08 at 8.57.03 AM.png
Stills of a First Paint and First Contentful Paint for Google.com, from “Web Performance: Leveraging the Metrics that Most Affect User Experience” at Google I/O 2017

CSS font-display

Downloadable web fonts are often used to create more visually rich web experiences. Historically, Chrome has delayed rendering text until the specified font is available, to ensure visual correctness. However, downloading a font can take as long as several seconds on a poor connection, significantly delaying the time until a user sees content. Chrome now supports the CSS @font-face descriptor and corresponding font-display property, allowing developers to specify how and when Chrome displays text content while downloading fonts.

Credential Management API improvements

In response to developer feedback and to make the Credential Management API easier to use for all sites, the need for a custom fetch() to access the stored password is now deprecated. Starting in Chrome 60, the user’s password will now be returned directly as part of the PasswordCredential.

In addition, we've made a series of changes to better align with the work being done in the Web Authentication Working Group. This includes the deprecation of requireUserMediation, which has been renamed to preventSilentAccess.

Other features in this release

Deprecations and interoperability improvements



Posted by Shubhie Panicker, Paint Timing Promoter

Improving advertising on the web

Advertising is a critical component of the web, keeping content open and free for everyone. However, over the years we've increasingly heard from users that while some types of advertising are fine, others can seem overwhelmingly frustrating or intrusive. Due to these poor ad experiences, the usage of extensions that block ads across the web continues to rise, up about 30% from just last year. This reduces the ability for publishers to continue creating free content and threatens the sustainability of the web ecosystem.

Chrome has always focused on giving users the best possible experience browsing the web. For example, Chrome, like other browsers, prevents pop-ups in new tabs based on the fact that they are annoying. Today, we have an even better understanding of the types of experiences that bother users when it comes to unwanted advertising. New public, consumer-driven research done by the Coalition for Better Ads in creating the Better Ads Standards outlines a number of these experiences, such as full-page ad interstitials, ads that unexpectedly play sound, and flashing ads. In dialog with the Coalition and other industry groups, we plan to have Chrome stop showing ads (including those owned or served by Google) on websites that are not compliant with the Better Ads Standards starting in early 2018.

We know that many web developers make most or all of their revenue from digital advertising, and we want to make following the guidance of the standard as easy as possible. Starting today we're rolling out the Ad Experience Report, a new tool which provides screenshots and videos of annoying ad experiences we’ve identified to make it easy to find and fix the issues. Developers can also use the report to re-submit their site for review once the problematic ad experiences have been addressed.

This is just one step toward making advertising an excellent experience across the web, and we plan to continue integrating user feedback with developer needs to help balance the web ecosystem for all.

Posted by Rahul Roy-Chowdhury, VP Product Management

Goodbye PNaCl, Hello WebAssembly!

Historically, running native code on the web required a browser plugin. In 2013, we introduced the PNaCl sandbox to provide a means of building safe, portable, high-performance apps without plugins. Although this worked well in Chrome, it did not provide a solution that worked seamlessly across all browsers.


Since then the web community has rallied around WebAssembly, as a cross-browser solution to high performance code. WebAssembly provides the speed necessary to build an in-browser video editor or run a Unity game at a high frame rate utilizing existing standards-based web platform APIs. Applications using WebAssembly already run in multiple browsers: Chrome and Firefox support WebAssembly natively and Edge and Safari support WebAssembly in preview versions of their browsers.


Given the momentum of cross-browser support, we plan to focus our native code efforts on WebAssembly going forward. We will remove support for PNaCl in the first quarter of 2018 everywhere except inside Chrome Apps and Extensions. We believe that the ecosystem around WebAssembly makes it a better fit for new and existing high-performance web apps, and that usage of PNaCl is sufficiently low to warrant deprecation.


We recognize that technology migrations can be challenging. To help ease the transition we have prepared a set of recommendations for existing PNaCl implementations to migrate to the web platform, as well as a feature roadmap for WebAssembly. As you embark on the migration process, please let us know if you run into any challenges, so that we can help make the shift as smooth as possible.


With the launch of WebAssembly, the web platform has gained a foundation for a new generation of fast and immersive web apps that run in any browser. We’re excited to see what developers build next!



Posted by Brad Nelson, Software Engineer on NaCl, PNaCl, and WebAssembly

The Modern Mobile Web: State of the Union

Posted by Rahul Roy-chowdhury, VP Product Management, Chrome


What a difference a year makes. Last year at Google I/O, we shared that the mobile web was open for business. New technologies such as AMP and Progressive Web Apps (PWAs) were bringing new capabilities, better performance, and a streamlined workflow to the mobile web.


Fast forward one year later: more than two billion AMP pages have been created and "PWA" has proved to be far more than a buzzword—it’s now the way that many businesses around the world are building for mobile devices. For more details, take a look at the video from Google I/O on the latest mobile web state of the union, or read below on how these technologies are making the modern mobile web mainstream.


Momentum
Summing up all the great success stories from around the world in a single post is a tall order, but here are some highlights.


To improve the performance of Wego's mobile site, the company built AMP pages using amp-install-serviceworker to transition to a fast PWA experience. Average page load time decreased from 12 seconds to less than one second, and conversion rates increased by 95%.


When Forbes rebuilt their mobile website as a PWA, they began by re-thinking what their experience could look like on a phone. Instead of minimally updating their underlying site, Forbes integrated PWA technologies to provide an immersive, app-like experience. They saw immediate improvements and engagement rates have more than doubled since launch.



Ola, the leading cab aggregator in India, built a PWA and noticed that 20% of users who book using their PWA had previously uninstalled their app. By reducing the amount of storage space needed, the PWA allowed them to effectively re-engage with users that otherwise would have been lost.


Another success story is Twitter Lite, a PWA which minimizes data usage, is resilient on unreliable mobile networks, and is less than 1MB of space on a device. Twitter's new mobile experience is also optimized for speed, with up to 30% faster launch times as well as quicker navigation throughout the site. They've found that users are spending 2.7x more time on site, and as a result are seeing 76% more tweets on the new PWA than their previous mobile site. Twitter is seeing incredible re-engagement with 1 million sessions initiated a day from icons added to the Android homescreen.


Polished Experiences
Users expect a lot from their mobile devices, and we've added tons of APIs over the past year to meet that demand. The mobile web can support more use cases and get more done than ever before. A few highlights:

  1. Improved Add to Homescreen
Earlier this year we unveiled Improved Add to Homescreen, integrating PWAs much deeper into the Android operating system. Now, in addition to being displayed on the homescreen, PWAs are also displayed in the app launcher and Android settings alongside native apps, and can also open in response to users clicking links in Chrome or other apps.

  1. Payments
Checkout can be a complicated process. To improve payment flows on the web, we launched a one-tap payment API called Payment Request. Using this API allows web apps to support credit cards and Google payment mechanisms such as Android Pay. We also just announced that it is now possible to integrate this API with additional payment apps.

  1. Media Consumption
Over 70% of internet traffic is video. To allow great mobile web media experiences we have given the users more control over playback with the Media Session API, improved full screen playback with the Screen Orientation API, and we’re filling out features for offline with Background Fetch. To learn more, see our mobile web media best practices and see how the APIs can come together at our PWA for Media demo.



Tooling
We’ve also been working hard to improve and extend the set of tools that let you build engaging experiences on the web.


Lighthouse is a new automated tool for measuring the quality of a web experience. It runs nearly 100 audits against your web app, checking everything from page performance, to byte efficiency, to accessibility, and gives you a summary score. New integration with Chrome's DevTools means you’ll be able to run Lighthouse audits without leaving the browser.


Polymer 2.0 is the next major release of the Polymer library, re-built from the ground up to take advantage of the best new features of the modern web platform. This release uses new Web Component API’s that have shipped in Chrome and Safari. It’s completely modular and best of all - it’s now 10% faster and 80% smaller.


Chrome is committed to making sure that you can develop easily, engage with your users, and build a thriving business around the web. For the latest news, subscribe to our YouTube channel and follow us on Twitter @ChromiumDev.