Chromium Blog
News and developments from the open source browser project
A classic boardwalk game rolls from your phone to your computer—using only your browser
Tuesday, June 4, 2013
Last week we
launched
Roll It
, a
Chrome Experiment
that links phones to computers and gets people out of their chairs and swinging. We wanted to share how we built a physical game experience with no dedicated hardware. It requires just the web, your computer and a phone.
Here’s a look at the APIs and browser-based features we used to create it.
Roll It is a three-dimensional (3D) experience, from the swing of your phone’s
accelerometer
right up to the virtual models rendered on your computer’s
HTML5 Canvas
. On the phone side, we hooked into browser events like
DeviceOrientation
and
DeviceMotion
to detect the speed and direction of a swing. On the computer side we rendered our scene using
Three.js
and plugged in
Physijs
to add physics to the ball and environment.
To sync the phone to the computer we employed
WebSockets
which enable rapid two-way communication between devices via a central server.
For extra stability we built our backend on
Google Cloud Platform
:
Our
Google App Engine
application, built in
Go
, dynamically balances users across our relay servers.
A
Google Compute Engine
server maintains game state across synced devices.
Google Cloud Storage
speedily serves up the static assets.
We couldn’t have brought this experiment to life without a great team. The theme for Roll It was composed by
Mr. Tim Healey
.
Legwork Studio
developed the interfaces and game environment, and teamed up with
Mode Set
for the development.
To dig deeper into the technology behind Roll It, check out the
HTML5 Rocks Case Study
, or join the team for a
Google Developers Live
event this Friday, June 7, 2013 at 5pm GMT for an in-depth discussion.
Posted by Pete LePage, Developer Advocate and Boardwalk King
Rich Notifications in Chrome
Thursday, May 23, 2013
App notifications send immediate alerts to users about important events as they happen. Chrome and Chrome OS already support basic web notifications, but rich notifications for Chrome
packaged apps
and extensions can enable users to act directly on these notifications and show rich content like lists and images. For those in beta channel, notifications now live in a center that is outside the browser, which allows them to receive notifications even when the browser is not open.
Rich notifications are available in the latest beta channel builds on
Windows
, dev channel builds on
ChromeOS
, and will be coming to Mac OS X and Linux soon.
You can trigger a rich notification by calling the
create
method under the
chrome.notifications
module:
chrome.notifications.create(
‘id1’,{
type:
‘basic’
,
iconUrl:
‘image1.png’
,
title:
‘Althe Frazon’
,
message:
‘Hi, what's going on tonight?’
,
buttons: [{ title:
‘Call’
,
iconUrl:
‘call.png’
},
{ title:
‘Send Email’
,
iconUrl:
‘email.png’
}],
priority: 0},
function() { /* Error checking goes here */}
);
Rich notifications include full-bleed icons and space to convey a headline and short message. Additionally, they enable you to create action buttons and respond to clicks right within your app, empowering your users to do anything they could do within the app’s UI itself.
Apart from the
basic
notification type shown above, you can use other formats like
image
to show a preview of an image within the notification or
list
to coalesce multiple notifications from your app into a single one. For example, a mail app could show multiple unread emails within a single notification using the list type. You can also specify different priorities for notifications that determine how long they stay on the screen before moving into the notification center where they continue to live until dismissed by the app or user.
The notification center holds all current notifications and can be pulled up at any time from the launcher on ChromeOS or the system tray on Windows. Users can view and clear all of their notifications in the center, and also access settings to control which apps, extensions and websites can send them notifications.
Notification Center on Windows
Notification Center on ChromeOS
You can get started with rich notifications in your app or extension by trying out the
Notify Test App
and taking a look at the
documentation
on the Chrome developer site. We’d love your feedback so feel free to ask a question on
Stack Overflow
, start a discussion on our
mailing list
, or file a bug on our
issue tracker
. Posted by Justin DeWitt, Software Engineer and Notifications Knight
Chrome 28 Beta: A more immersive web, everywhere
Thursday, May 23, 2013
Today’s
Beta channel
release introduces several new developer features and a major under-the-hood performance improvement. Unless otherwise noted, changes apply to desktop versions of Chrome and Chrome for Android. We’ll be rolling out the update over the next few hours.
Fullscreen API on Chrome for Android
The
Fullscreen API
on Chrome for Android allows you to programmatically hide the browser UI and OS status bar. Just like on desktop, you can tell any piece of content to enter fullscreen mode by calling its
webkitRequestFullScreen()
function. The prefixed version will eventually be replaced by
requestFullscreen()
. Here you can see the Fullscreen API used in a
zombie-inspired Chrome Experiment
:
Faster page loads
Starting in today’s Beta, your apps get a free speed boost from Blink’s new
threaded HTML parser
. It has two under-the-hood performance benefits: (1) reduced jankiness by moving work off the main JavaScript thread, and (2) improved page loading speed through pipelining. Compared to the normal HTML parser, it loads DOM content about 10% faster and reduces the maximum stop time due to parsing by 40%.
Experimental new media features in Chrome for Android
In today's Beta,
Web Audio
joins
WebGL
and
WebRTC
as an option in
about:flags
in Chrome for Android. Used together or independently, these three features will allow you to create rich, powerful web experiences that work across device form factors. We’re still actively improving the implementations, but we invite you to start experimenting. To see them in action, watch the
mobile web demo in the Google I/O 2013 keynote
.
Deprecated features
The prefixed version of the
Content Security Policy
HTTP header is
now
deprecated
, so please use
Content-Security-Policy
instead of
X-WebKit-CSP
. The prefixed version will still work for now, but future releases
may not support it
.
For
Chrome Extensions
, HTML-based notifications have been
deprecated
in favor of the new
Rich Notifications Chrome API
. Extensions developers who are using HTML notifications in their apps or extensions should migrate to the newer Rich Notifications API, as support for the existing
createHTMLNotification()
feature will stop working in a future release of Chrome.
Other developer features in this release
You can now use
CSS
@supports
conditional blocks
to test whether Chromium supports certain property:value pairs.
The
:unresolved
CSS pseudoclass
lets you style a
Custom Element
that hasn’t been registered in the browser yet. Custom Elements are part of
Web Components
.
As part of V8's continuing quest to make all JavaScript as fast as possible,
recent
optimizations
have
made the asm.js benchmarks more than twice as fast as prior versions of Chrome.
Chrome
Apps
and
Extensions
developers can now use
rich notifications
to proactively engage with users.
Visit
chromestatus.com
for a complete overview of Chrome’s developer features, and circle
+Google Chrome Developers
for more frequent updates.
For general information about what’s going on in Chromium and Blink, watch the recordings of the fireside chats with the
Blink team
and the
Chrome team
at Google I/O 2013.
Posted by Alexandre Elias, Software Engineer and Screen Space Conservationist
Testing Chromium: SyzyASAN, a lightweight heap error detector
Monday, May 20, 2013
AddressSanitizer
(ASAN) is a tool for finding memory problems and has been used to find
thousands
of memory errors in Chromium over the last two years. These kinds of errors will typically lead to heap or data corruption and subsequent crashes in random, unrelated code, which make them quite challenging to find and fix without tools like ASAN. However, ASAN is built using
LLVM
/
Clang
and is limited to Mac and Linux builds of Chromium. To address the lack of coverage for Windows-only code, we built SyzyASAN.
SyzyASAN
is built on top of the
Syzygy
toolchain and is an instrumentation-based clone of ASAN for detecting heap errors. It consists of three parts:
An instrumenter that injects instrumentation into binaries produced by the
Microsoft Visual Studio
toolchain.
A run-time library that replaces
malloc, free,
et al.
An
RPC
-based logging server that receives information about detected errors. This lets us get information safely out of sandboxed processes, like Chromium’s renderer.
SyzyASAN operates nearly identically to ASAN, finding errors in the same manner and producing similar reports. SyzyASAN finds some of the hardest-to-locate memory bugs like use-after-free, buffer overruns, and underruns. Focusing on very common memory errors allows SyzyASAN to be relatively efficient.
Although Chrome with SyzyASAN is very usable, the penalties in speed - 4.7x on CPU intensive operations - and memory - a 25% increase plus a fixed 256MB increase in each process - are noticeable so we’ll confine these releases to our Canary channel for now. We’ve been releasing SyzyASAN-instrumented builds to the Windows Canary channel one day each week recently. One day with a little slowdown on the Canary channel gives us plenty of great data. In the last three weeks, we’ve found 150 new bugs in Chromium, several of which could lead to security vulnerabilities.
We’ve put together some
instructions
for instrumenting your local build and debugging issues. Try it out and help us squash more memory bugs. The Syzygy source code and binaries can be downloaded from our
code site
, and instructions for how to use it are on our
wiki
. If you have any questions, suggestions or contributions, feel free to contact
syzygy-team@chromium.org
. If you’re using Syzygy or SyzyASAN with your project we’d love to hear about it!
Posted by Chris Hamilton, Sanitation Engineer
Building efficient apps and extensions with push messaging
Thursday, May 9, 2013
Event pages keep apps and extensions efficient by allowing them to respond to a variety of events such as timers or navigation to a particular site, without having to remain running persistently. But what if you need to respond to something that occurs outside of Chrome, such as a news alert, a message sent to a user or a stock hitting a price threshold? Until now, you had to do this by repeatedly polling a server. This process consumed bandwidth and reduced the battery life of your users’ machines. For a more efficient solution, starting today you can use
Google Cloud Messaging for Chrome
(GCM) - across all channels of Chrome.
GCM will be familiar to developers who have used
Google Cloud Messaging for Android
. To send a message, all you need to do is:
Request a token (channel ID) via
chrome.pushMessaging.getChannelId()
.
Pass the returned token to your server.
Whenever you need to send a message to your app or extension, post the message along with the token to the GCM server-side API.
Your message is then delivered in near real time to Chrome. This makes your event page wake up (if it’s not already running), and the message is delivered to your
chrome.pushMessaging.onMessage
listener.
To use GCM, your users must be signed into Chrome, as the service relies on an efficient push channel that’s only established for signed-in users. Messages are automatically delivered to all the devices where the user has signed in and installed your app/extension.
To add GCM to your app/extension, take a look at the
overview
of the service or start with some of the
sample apps
—and start pushing!
Posted by Mark Scott, Product Manager
Integrate Chrome with your iOS app
Tuesday, May 7, 2013
As an iOS app developer, when your users want to access web content, you currently have two options: create your own in-app web browser frame, or send users away from your app to a browser.
With Chrome’s
OpenInChromeController class with x-callback
, users can open a web page in Chrome and then return to your app with just one tap.
In the example below, a YouTube user has opened a link in Chrome. “YouTube” is prominently displayed in Chrome’s back button. Touching “YouTube” returns the user to the YouTube app.
After you've downloaded the OpenInChromeController class and added it to your project, you’ll be able to check if Chrome is installed, and if so, send links to Chrome with or without x-callback enabled. Additionally, you can specify whether or not to open a new tab when sending a link to Chrome. For a deeper dive and to download the code, check out our
developer docs
.
Posted by Michele Aiello, Software Engineer and Callback Captain
Preview the new Chrome packaged apps
Wednesday, May 1, 2013
A few months ago, we announced the
developer preview
of
Chrome packaged apps
and the Chrome App Launcher. That preview enabled you to to upload your Chrome packaged apps to the Chrome Web Store and test the app install flow. However, a Chrome packaged app was discoverable only if you had a direct link to it, not via searching and browsing the store.
Starting today Chrome packaged apps will be
available in the Chrome Web Store
for anyone on Chrome's
developer channel
on Windows and Chrome OS. You will notice that the “App” category now contains only the new Chrome packaged apps. A new category, called “Websites”, contains all existing
hosted apps
and
legacy packaged apps
.
.
Many of these apps are works in progress, which is why we’re only making them easily available on Chrome’s dev channel. If you’ve written a packaged app, or are working on one, now is a great time to get some early feedback and polish your app before Chrome packaged apps become more broadly available.
A number of developers have taken advantage of the early preview to publish apps that demonstrate the new powerful capabilities of the packaged apps platform. If you're looking for inspiration, we've highlighted a few of them for you to try out in the
Web Store’s Apps category
. If you’re not sure whether a Chrome packaged app is right for you, you can learn more at our developer site:
developer.chrome.com/apps
. As always, we welcome your feedback on our
G+ Developers page
or our developer forum.
Posted by Amanda Bishop, Product manager and (web) store keeper
Labels
$200K
1
10th birthday
4
abusive ads
1
abusive notifications
2
accessibility
3
ad blockers
1
ad blocking
2
advanced capabilities
1
android
2
anti abuse
1
anti-deception
1
background periodic sync
1
badging
1
benchmarks
1
beta
83
better ads standards
1
billing
1
birthday
4
blink
2
browser
2
browser interoperability
1
bundles
1
capabilities
6
capable web
1
cds
1
cds18
2
cds2018
1
chrome
35
chrome 81
1
chrome 83
2
chrome 84
2
chrome ads
1
chrome apps
5
Chrome dev
1
chrome dev summit
1
chrome dev summit 2018
1
chrome dev summit 2019
1
chrome developer
1
Chrome Developer Center
1
chrome developer summit
1
chrome devtools
1
Chrome extension
1
chrome extensions
3
Chrome Frame
1
Chrome lite
1
Chrome on Android
2
chrome on ios
1
Chrome on Mac
1
Chrome OS
1
chrome privacy
4
chrome releases
1
chrome security
10
chrome web store
32
chromedevtools
1
chromeframe
3
chromeos
4
chromeos.dev
1
chromium
9
cloud print
1
coalition
1
coalition for better ads
1
contact picker
1
content indexing
1
cookies
1
core web vitals
2
csrf
1
css
1
cumulative layout shift
1
custom tabs
1
dart
8
dashboard
1
Data Saver
3
Data saver desktop extension
1
day 2
1
deceptive installation
1
declarative net request api
1
design
2
developer dashboard
1
Developer Program Policy
2
developer website
1
devtools
13
digital event
1
discoverability
1
DNS-over-HTTPS
4
DoH
4
emoji
1
emscriptem
1
enterprise
1
extensions
27
Fast badging
1
faster web
1
features
1
feedback
2
field data
1
first input delay
1
Follow
1
fonts
1
form controls
1
frameworks
1
fugu
2
fund
1
funding
1
gdd
1
google earth
1
google event
1
google io 2019
1
google web developer
1
googlechrome
12
harmful ads
1
html5
11
HTTP/3
1
HTTPS
4
iframes
1
images
1
incognito
1
insecure forms
1
intent to explain
1
ios
1
ios Chrome
1
issue tracker
3
jank
1
javascript
5
lab data
1
labelling
1
largest contentful paint
1
launch
1
lazy-loading
1
lighthouse
2
linux
2
Lite Mode
2
Lite pages
1
loading interventions
1
loading optimizations
1
lock icon
1
long-tail
1
mac
1
manifest v3
2
metrics
2
microsoft edge
1
mixed forms
1
mobile
2
na
1
native client
8
native file system
1
New Features
5
notifications
1
octane
1
open web
4
origin trials
2
pagespeed insights
1
pagespeedinsights
1
passwords
1
payment handler
1
payment request
1
payments
2
performance
20
performance tools
1
permission UI
1
permissions
1
play store
1
portals
3
prefetching
1
privacy
2
privacy sandbox
4
private prefetch proxy
1
profile guided optimization
1
progressive web apps
2
Project Strobe
1
protection
1
pwa
1
QUIC
1
quieter permissions
1
releases
3
removals
1
rlz
1
root program
1
safe browsing
2
Secure DNS
2
security
36
site isolation
1
slow loading
1
sms receiver
1
spam policy
1
spdy
2
spectre
1
speed
4
ssl
2
store listing
1
strobe
2
subscription pages
1
suspicious site reporter extension
1
TCP
1
the fast and the curious
23
TLS
1
tools
1
tracing
1
transparency
1
trusted web activities
1
twa
2
user agent string
1
user data policy
1
v8
6
video
2
wasm
1
web
1
web apps
1
web assembly
2
web developers
1
web intents
1
web packaging
1
web payments
1
web platform
1
web request api
1
web vitals
1
web.dev
1
web.dev live
1
webapi
1
webassembly
1
webaudio
3
webgl
7
webkit
5
WebM
1
webmaster
1
webp
5
webrtc
6
websockets
5
webtiming
1
writable-files
1
yerba beuna center for the arts
1
Archive
2024
Dec
Aug
Jun
May
Apr
Mar
Feb
2023
Nov
Oct
Sep
Aug
Jun
May
Apr
Feb
2022
Dec
Sep
Aug
Jun
May
Apr
Mar
Feb
Jan
2021
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2020
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2019
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2018
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2017
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2016
Dec
Nov
Oct
Sep
Aug
Jun
May
Apr
Mar
Feb
Jan
2015
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2014
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2013
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2012
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2011
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2010
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2009
Dec
Nov
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2008
Dec
Nov
Oct
Sep
Feed
Follow @ChromiumDev
Give us feedback in our
Product Forums
.
