A repo containing samples tied to new functionality in each release of Google Chrome.
HTML JavaScript CSS
Latest commit 74f5b89 Jan 18, 2017 @PaulKinlan PaulKinlan committed on GitHub Merge pull request #464 from rsolomakhin/gh-pages
Web Payments API update.
Permalink
Failed to load latest commit information.
SAMPLE_STARTING_POINT Moving most files over to externalised JS Oct 9, 2015
_includes Add warning message if min chrome version check fails (#369) Jun 16, 2016
_layouts Override page index.html for web bluetooth samples (#444) Nov 18, 2016
allow-popups-to-escape-sandbox Added Allow popups to escape sandboxed iframe Sample Jul 31, 2015
app-install-banner Update URL to SW intro (#454) Dec 5, 2016
array-includes-es7 Moving most files over to externalised JS Oct 9, 2015
array-methods-es6 ESLint, with the Google config Dec 11, 2015
arrows-es6 ESLint, with the Google config Dec 11, 2015
audio audionode disconnect sample, plus audio from h5r Apr 14, 2015
autocapitalize Template migration Oct 13, 2015
battery-status ESLint, with the Google config Dec 11, 2015
beacon Switched to https://www.chromestatus.com instead of http Oct 27, 2015
block-modal-dialogs-sandboxed-iframe Added Block modal dialogs in a sandboxed iframe Sample Jul 31, 2015
classes-es6 s/pple/ple/g (#398) Aug 1, 2016
collections-iterators-es6 Don't log two spaces Dec 25, 2015
computed-properties-es6 Switched to https://www.chromestatus.com instead of http Oct 27, 2015
cookie-prefixes Review feedback. Jan 29, 2016
csp-upgrade-insecure-requests Template migration Oct 14, 2015
css-alpha-channel Alpha (#363) Jun 9, 2016
css-attribute-case-sensitivity Added Case-insensitive Attribute Selector Matching sample Jan 5, 2016
css-custom-properties Review changes for @jeffposnick and @ebidel Jan 24, 2016
css-escape fix a few typos Jan 7, 2016
css-flexbox-abspos Sample for new CSS Flexbox absolute-positioned children. (#353) Jun 2, 2016
css-hyphens CSS hyphens example (#429) Oct 19, 2016
css-intrinsic-sizing Fix typo Oct 16, 2015
css-motion-path ESLint, with the Google config Dec 11, 2015
css-opacity-force-flattening Force Flattening When Ancestor Has Opacity Sample (#393) Aug 2, 2016
css-shapes Switched to https://www.chromestatus.com instead of http Oct 27, 2015
css-will-change-transform-rasterization Rasterization & will-change: transform sample (#394) Aug 1, 2016
cut-and-copy ESLint, with the Google config Dec 11, 2015
decorators-es7/read-write Trialing the gulp linting Sep 2, 2015
default-parameters-es6 Address feedback on def. params Jan 27, 2016
destructuring-es6 Address review feedback Jan 27, 2016
dialog Merge remote-tracking branch 'upstream/gh-pages' into templatization Nov 3, 2015
encoding-api ESLint, with the Google config Dec 11, 2015
event-istrusted ESLint, with the Google config Dec 11, 2015
event-listeners-mandatory-arguments Added addEventListener/removeEventListener non-optional arguments Sample Jan 4, 2016
event-timestamp Remove the new Date() stuff Jan 22, 2016
extended-object-literals-es6 ESLint, with the Google config Dec 11, 2015
extended-unicode-escapes Fixing JSHint errors Aug 27, 2015
fetch-api Fetch referrerPolicy sample (#357) Jun 9, 2016
file-constructor Switched to https://www.chromestatus.com instead of http Oct 27, 2015
focus-navigation-start-point Broken link Mar 18, 2016
font-face-set ESLint, with the Google config Dec 11, 2015
formdata-methods review comments Mar 14, 2016
generators Fix off by 1 error in generators example Nov 13, 2015
idb-getall Missing semicolon. Nov 30, 2015
image-capture Add MediaStream Image Capture API Sample (#449) Dec 7, 2016
image-rendering-pixelated Switched to https://www.chromestatus.com instead of http Oct 27, 2015
images Images and some small style changes to bring the placeholder more inl… Aug 27, 2014
input-device-capabilities Review feedback Oct 13, 2015
intersectionobserver Fix spelling mistake (#359) Jun 2, 2016
keyboardevent-code-attribute Check to see if KeyboardEvent.code is supported Apr 14, 2016
keyboardevent-key-attribute Sample for KeyboardEvent.key Apr 13, 2016
lexical-declarations-es6 Fixing JSHint errors Aug 27, 2015
media-hover-pointer Fix media query checking for absence of any fine pointer Jan 4, 2016
mouseevent-get-modifier-state ESLint, with the Google config Dec 11, 2015
multi-column-css Switched to https://www.chromestatus.com instead of http Oct 27, 2015
muted-autoplay Autoplay Muted Video on Android sample (#395) Aug 1, 2016
network-information Removed the bit about iOS support. Nov 25, 2015
new-target-es6 ESLint, with the Google config Dec 11, 2015
notifications ESLint, with the Google config Dec 11, 2015
object-assign-es6 ESLint, with the Google config Dec 11, 2015
paymentrequest Web Payments API update. Jan 3, 2017
permissions Fixing JSHint errors Aug 27, 2015
picture-element Switched to https://www.chromestatus.com instead of http Oct 27, 2015
play-return-promise Review feedback Mar 7, 2016
presentation-api Add Presentation API samples. (#367) Jun 29, 2016
promise-rejection-events onResolved → onFulfilled Jan 29, 2016
proxies-es6 Add ES2015 Proxies sample (#275) May 24, 2016
push-messaging-and-notifications Correct spelling (#461) Dec 31, 2016
report-validity # This is a combination of 48 commits. Oct 9, 2015
resizeobserver Add ResizeObserver sample (#424) Oct 11, 2016
rest-parameters-es6 ESLint, with the Google config Dec 11, 2015
screen-orientation Switched to https://www.chromestatus.com instead of http Oct 27, 2015
service-worker Typo fix Sep 13, 2016
spread-operator Switched to https://www.chromestatus.com instead of http Oct 27, 2015
styles CSS Nit: Align vertically status and log (#372) Jun 16, 2016
subresource-integrity Update index.html Nov 30, 2015
template-literals-es6 Fixing JSHint errors Aug 27, 2015
touch-action Add touch-action demo, based on Matt Gaunt's work. (#459) Dec 7, 2016
typedarray-methods-es6 Moving most files over to externalised JS Oct 9, 2015
urlsearchparams Better demo Jan 25, 2016
vibration ESLint, with the Google config Dec 11, 2015
web-animations Merge pull request #239 from beaufortfrancois/removeUpdatesHtml5Rocks Oct 28, 2015
web-application-manifest Remove density from manifest (#457) Dec 5, 2016
web-bluetooth Renew OT tokens until 2017-01-24 (#465) Jan 4, 2017
web-vr Adds input demo Dec 8, 2016
webaudio-audiocontext-close Switched to https://www.chromestatus.com instead of http Oct 27, 2015
webaudio-audionode-disconnect Switched to https://www.chromestatus.com instead of http Oct 27, 2015
webaudio-method-chaining ESLint, with the Google config Dec 11, 2015
webaudio-offlinecontext-rendering Switched to https://www.chromestatus.com instead of http Oct 27, 2015
webaudio-suspend-resume Fixing JSHint errors Aug 27, 2015
.eslintignore Don't lint vendor/ Dec 11, 2015
.eslintrc Add eslint rule about single-parameter arrow functions. (#408) Aug 23, 2016
.gitignore Service Worker Video Caching Sample (#336) May 26, 2016
.travis.yml Update Travis CI config to use Ruby 2.2.2 (#387) Jul 13, 2016
Gemfile Require >= v39 of the github-pages gem Sep 28, 2015
LICENSE <dialog> demo and some placeholder templates. Aug 5, 2014
README.md Updated the README with ESLint info Dec 11, 2015
_config.yml ESLint, with the Google config Dec 11, 2015
index.html Removing GA tracking from index.html Oct 13, 2015
package.json ESLint, with the Google config Dec 11, 2015

README.md

Build Status

Google Chrome Samples

Samples tied to new functionality in Google Chrome.

Each sample corresponds to an entry in https://www.chromestatus.com/features, and using that interface is currently the best way to browse.

Contributing Samples

Please use SAMPLE_STARTING_POINT as a starting point.

While it's possible to simply create a standard set of HTML/JS/CSS files within the new directory, you can take advantage of the Jekyll-based templating system to handle most of the boilerplate. Any files that start with a front matter block will be templated, and any other files will be served verbatim.

If you're still unsure, two canonical samples that use templates are:

Follow the Using Jekyll with Pages guide to mimic the production Jekyll environment during local development.

Once complete, please file a pull request against the gh-pages branch with your sample. It's ideal when filing a pull request @-mention the relevant engineer who worked on adding the feature into Chrome, to solicit their feedback and ensure that the sample properly describes the functionality. The email address of the engineer who worked on a given feature can be found in the corresponding https://www.chromestatus.com/features entry. If you're unsure of the GitHub username corresponding to the engineer, an alternative is to email them a link to the pull request and ask for feedback directly.

Style / Linting / CI

The samples ideally should follow the Google JavaScript Style Guide, and that's enforced via ESLint, using the eslint-config-google base configuration, with a few overrides as needed.

Linting can be performed via npm run lint (make sure to npm install first).

Various IDEs offer real-time ESLint integration, and using those integrations that can help avoid errors before anything gets checked in.

Travis CI is currently being used to verify that the Jekyll build completes successfully and that linting passes without errors.