# Technical Documentation: GoogleChrome/chrome-extensions-samples
> ℹ️ **Provenance:** In-Tree Documentation (316 Chapters) · [CodeWiki Reference](https://codewiki.google/github.com/GoogleChrome/chrome-extensions-samples) · Recency: Active (< 180 days)
## File: README.md
# Chrome Extensions samples
Official samples for Chrome Extensions and the Chrome Apps platform. (Chrome Apps are deprecated. Learn more [on the Chromium blog](https://blog.chromium.org/2020/08/changes-to-chrome-app-support-timeline.html)).
For more information on extensions, see [Chrome Developers](https://developer.chrome.com).
## Explore samples
The directory structure is as follows:
- [api-samples/](api-samples/) - extensions focused on a single API package
- [functional-samples/](functional-samples/) - full featured extensions spanning multiple API packages
- [\_archive/apps/](_archive/apps/) - deprecated Chrome Apps platform (not listed below)
- [\_archive/mv2/](_archive/mv2/) - resources for manifest version 2
You can also use the [Samples](https://developer.chrome.com/docs/extensions/samples/) page to discover extensions by type, permissions, and extension API.
## Installation
To experiment with these samples, please clone this repo and use 'Load Unpacked Extension'.
Read more on [Development Basics](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked).
## Contributing
Please see [the CONTRIBUTING file](/CONTRIBUTING.md) for information on contributing to the `chrome-extensions-samples` project.
## License
`chrome-extensions-samples` are authored by Google and are licensed under the [Apache License, Version 2.0](/LICENSE).
---
## File: CONTRIBUTING.md
# How to Contribute
We'd love to accept your patches and contributions to this project.
## Before you begin
### Sign our Contributor License Agreement
Contributions to this project must be accompanied by a
[Contributor License Agreement](https://cla.developers.google.com/about) (CLA).
You (or your employer) retain the copyright to your contribution; this simply
gives us permission to use and redistribute your contributions as part of the
project.
If you or your current employer have already signed the Google CLA (even if it
was for a different project), you probably don't need to do it again.
Visit to see your current agreements or to
sign a new one.
### Review our Community Guidelines
This project follows [Google's Open Source Community
Guidelines](https://opensource.google/conduct/).
## Contribution process
### Create an issue first
Before adding a new sample, [create an issue first](https://github.com/GoogleChrome/chrome-extensions-samples/issues/new).
Describe why this sample is needed and how you plan to implement it. Only once
you've got the approval from one of the maintainers start working on a PR. Non
trivial PRs without an approved issue will be rejected.
### Code Reviews
All submissions, including submissions by project members, require review. We
use GitHub pull requests for this purpose. Consult
[GitHub Help](https://help.github.com/articles/about-pull-requests/) for more
information on using pull requests.
### Setting up your Environment
If you want to contribute to this repository, you need to first [create your own fork](https://docs.github.com/en/get-started/quickstart/fork-a-repo).
After forking chrome-extensions-samples to your own Github account, run the
following steps to get started:
```sh
# clone your fork to your local machine
git clone https://github.com/your-fork/chrome-extensions-samples.git
cd chrome-extensions-samples
# install dependencies
npm install
```
### Writing a README
All new code samples or samples updated from Manifest V2 should include a
README file. Please copy the [provided template](./README-template.md) into
your sample's folder and follow the instructions therein.
---
## File: package.json
{
"name": "chrome-extensions-samples",
"version": "1.0.0",
"private": true,
"description": "Official samples for Chrome Extensions and the Chrome Apps platform.",
"scripts": {
"prettier": "npx prettier **/*.{md,html,json} -w",
"lint": "eslint **/*.js",
"lint:fix": "npm run lint -- --fix",
"prepare": "husky install"
},
"repository": {
"type": "git",
"url": "git+https://github.com/GoogleChrome/chrome-extensions-samples.git"
},
"keywords": [],
"author": "The Chrome Team",
"license": "Apache 2.0",
"bugs": {
"url": "https://github.com/GoogleChrome/chrome-extensions-samples/issues"
},
"homepage": "https://github.com/GoogleChrome/chrome-extensions-samples#readme",
"devDependencies": {
"@eslint/js": "10.0.1",
"chrome-types": "0.1.454",
"eslint": "^10.12.0",
"eslint-config-prettier": "10.1.8",
"eslint-plugin-jest": "^29.17.0",
"eslint-plugin-prettier": "5.5.7",
"globals": "17.13.0",
"husky": "9.1.7",
"lint-staged": "17.6.0",
"prettier": "3.9.10"
},
"lint-staged": {
"**/*.js": [
"npx eslint --fix"
],
"**/*.{md,html,json}": [
"npx prettier --write"
]
}
}
---
## File: README-template.md
_To create a README for your sample_
1. _Copy this file to your sample folder._
1. _Enter the requested information below._
1. _Delete these instructions._
_For API samples use the name of the API. For example, a sample about the `chrome.declarativeNetRequest` would simply be called "chrome.declarativeNetRequest". (Do not use special formatting in headings.) For functional samples, the title should be what the sample demonstrates_
# Title
_Describe what the sample demonstrates. If this is an API sample, link to the API._
This sample demonstrates ...
## Overview
_Describe how the sample demonstrates the API or use case and briefly describe how to use it._
## Implementation Notes
_Add any information that doesn't fit elsewhere in the README._
## Running this extension
1. Clone this repository.
2. Load this directory in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked).
3. _Add the rest of the instructions here_
---
## File: .prettierrc.json
{
"printWidth": 80,
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"arrowParens": "always"
}
---
## File: _archive/apps/README.md
# Chrome Apps samples
Official samples for deprecated Chrome Apps platform. If you want to learn about the platform, you can:
1. look at the source code of the samples below. Most samples have a "Try it now" button that allows you to install and play with it.
2. read the [official docs](http://developer.chrome.com/apps)
If you have questions, [search](http://stackoverflow.com/questions/tagged/google-chrome-app) or [ask at StackOverflow](http://stackoverflow.com/questions/ask?tags=google-chrome-app) (observe the google-chrome-app tag) or join the [Chromium Apps](https://groups.google.com/a/chromium.org/forum/?fromgroups#!forum/chromium-apps) Google group.
# Samples
Sample | API or feature | Link
--- | --- |:---:
analytics | [storage](#_feature_storage) [ios](#mobile-support) [android](#mobile-support) |
appengine-channelapi/app | [webview](#_feature_webview) |
appsquare | [geolocation](#_feature_geolocation) [identity](#_feature_identity) [storage](#_feature_storage) |
appview/embedded-app | [getUserMedia](#_feature_getUserMedia) |
appview/host-app | [appview](#_feature_appview) |
blink1 | [hid](#_feature_hid) [usb](#_feature_usb) |
bluetooth-samples/battery-service-demo | [bluetooth](#_feature_bluetooth) |
bluetooth-samples/device-info-demo | [bluetooth](#_feature_bluetooth) |
bluetooth-samples/heart-rate-sensor | [bluetooth](#_feature_bluetooth) |
calculator | [clipboard](#_feature_clipboard) [ios](#mobile-support) [android](#mobile-support) |
camera-capture | [getUserMedia](#_feature_getUserMedia) |
clock | [framelessWindows](#_feature_framelessWindows) [geolocation](#_feature_geolocation) [richNotifications](#_feature_richNotifications) [storage](#_feature_storage) |
context-menu | [contextMenu](#_feature_contextMenu) |
dart | [dart](#_feature_dart) [ios](#mobile-support) |
desktop-capture | [desktopCapture](#_feature_desktopCapture) |
dialog-element | |
diff | [clipboard](#_feature_clipboard) [fileSystem](#_feature_fileSystem) [storage](#_feature_storage) |
filesystem-access | [fileSystem](#_feature_fileSystem) [storage](#_feature_storage) |
frameless-window | [framelessWindows](#_feature_framelessWindows) |
gcm-notifications | [gcm](#_feature_gcm) [richNotifications](#_feature_richNotifications) [storage](#_feature_storage) |
gdrive | [framelessWindows](#_feature_framelessWindows) [identity](#_feature_identity) |
github-auth | [identity](#_feature_identity) |
hello-world | [ios](#mobile-support) [android](#mobile-support) |
hello-world-sync | [storage](#_feature_storage) [ios](#mobile-support) [android](#mobile-support) |
hid | [hid](#_feature_hid) |
identity | [identity](#_feature_identity) [android](#mobile-support) |
image-edit | [fileSystem](#_feature_fileSystem) [storage](#_feature_storage) |
instagram-auth | [identity](#_feature_identity) |
io2012-presentation | [framelessWindows](#_feature_framelessWindows) [getUserMedia](#_feature_getUserMedia) [serial](#_feature_serial) [storage](#_feature_storage) [webview](#_feature_webview) | -
io2012-presentation/helloworld | | -
io2012-presentation/servo | [getUserMedia](#_feature_getUserMedia) [serial](#_feature_serial) | -
ioio | [bluetooth](#_feature_bluetooth) |
keyboard-handler | |
managed-in-app-payments | [in-app-payments](#_feature_in-app-payments) | -
manga-cam | [framelessWindows](#_feature_framelessWindows) [getUserMedia](#_feature_getUserMedia) [syncFileSystem](#_feature_syncFileSystem) |
mdns-browser | [framelessWindows](#_feature_framelessWindows) [sockets](#_feature_sockets) [systemInfo](#_feature_systemInfo) |
media-gallery | [mediaGallery](#_feature_mediaGallery) |
messaging/app1 | [messaging](#_feature_messaging) |
messaging/app2 | [messaging](#_feature_messaging) |
messaging/extension | [messaging](#_feature_messaging) [richNotifications](#_feature_richNotifications) |
mini-code-edit | [commands](#_feature_commands) [contextMenu](#_feature_contextMenu) [fileSystem](#_feature_fileSystem) |
multicast | [framelessWindows](#_feature_framelessWindows) [messaging](#_feature_messaging) [sockets](#_feature_sockets) [storage](#_feature_storage) |
one-time-payment | [identity](#_feature_identity) [storage](#_feature_storage) |
optional-permissions | [optionalPermissions](#_feature_optionalPermissions) |
parrot-ar-drone | [old_sockets](#_feature_old_sockets) [sockets](#_feature_sockets) [android](#mobile-support) |
platform-title | [framelessWindows](#_feature_framelessWindows) |
printing | [print](#_feature_print) [storage](#_feature_storage) [systemInfo](#_feature_systemInfo) |
restarted-demo | [storage](#_feature_storage) [ios](#mobile-support) |
rich-notifications | [richNotifications](#_feature_richNotifications) [android](#mobile-support) |
sandbox | [sandbox](#_feature_sandbox) |
sandboxed-content | [sandbox](#_feature_sandbox) |
serial-control-signals | [serial](#_feature_serial) |
serial/adkjs/app | [serial](#_feature_serial) |
serial/espruino | [serial](#_feature_serial) |
serial/ledtoggle | [serial](#_feature_serial) |
servo | [getUserMedia](#_feature_getUserMedia) [serial](#_feature_serial) |
storage | |
syncfs-editor | [syncFileSystem](#_feature_syncFileSystem) |
systemInfo | [systemInfo](#_feature_systemInfo) |
tasks | [identity](#_feature_identity) [android](#mobile-support) |
tcpserver | [sockets](#_feature_sockets) [systemInfo](#_feature_systemInfo) [webview](#_feature_webview) |
telnet | [sockets](#_feature_sockets) |
text-editor | [clipboard](#_feature_clipboard) [fileSystem](#_feature_fileSystem) |
todomvc | [alarms](#_feature_alarms) [fileSystem](#_feature_fileSystem) [richNotifications](#_feature_richNotifications) [storage](#_feature_storage) [syncFileSystem](#_feature_syncFileSystem) [android](#mobile-support) | -
tts | [tts](#_feature_tts) | -
udp | [sockets](#_feature_sockets) [ios](#mobile-support) |
url-handler | [storage](#_feature_storage) [webview](#_feature_webview) | -
usb-label-printer | [fileSystem](#_feature_fileSystem) [getUserMedia](#_feature_getUserMedia) [optionalPermissions](#_feature_optionalPermissions) [usb](#_feature_usb) |
usb/device-info | [usb](#_feature_usb) |
usb/knob | [optionalPermissions](#_feature_optionalPermissions) [usb](#_feature_usb) |
weather | [geolocation](#_feature_geolocation) [storage](#_feature_storage) [ios](#mobile-support) |
web-store | [fileSystem](#_feature_fileSystem) [identity](#_feature_identity) [storage](#_feature_storage) [webstore](#_feature_webstore) |
webgl-pointer-lock | [framelessWindows](#_feature_framelessWindows) [pointerLock](#_feature_pointerLock) |
webserver | [sockets](#_feature_sockets) [systemInfo](#_feature_systemInfo) [android](#mobile-support) |
websocket-server | [sockets](#_feature_sockets) [ios](#mobile-support) |
webview-samples/browser | [webview](#_feature_webview) |
webview-samples/declarative-web-request | [storage](#_feature_storage) [webview](#_feature_webview) |
webview-samples/insert-css | [storage](#_feature_storage) [webview](#_feature_webview) |
webview-samples/local-resources | [webview](#_feature_webview) |
webview-samples/multi-tab-browser | [contextMenu](#_feature_contextMenu) [webview](#_feature_webview) | -
webview-samples/new-window | [webview](#_feature_webview) |
webview-samples/new-window-user-agent | [contextMenu](#_feature_contextMenu) [webview](#_feature_webview) | -
webview-samples/shared-script | [webview](#_feature_webview) |
webview-samples/user-agent | [webview](#_feature_webview) |
webview-samples/webview | [geolocation](#_feature_geolocation) [getUserMedia](#_feature_getUserMedia) [pointerLock](#_feature_pointerLock) [webview](#_feature_webview) |
window-options | [fullscreen](#_feature_fullscreen) |
window-state | [fullscreen](#_feature_fullscreen) |
windows | [framelessWindows](#_feature_framelessWindows) |
# Samples by features
API or feature | Samples
--- | ---
alarms | [todomvc](#_sample_todomvc)
appview | [appview_host-app](#_sample_appview_host-app)
bluetooth | [bluetooth-samples_battery-service-demo](#_sample_bluetooth-samples_battery-service-demo) [bluetooth-samples_device-info-demo](#_sample_bluetooth-samples_device-info-demo) [bluetooth-samples_heart-rate-sensor](#_sample_bluetooth-samples_heart-rate-sensor) [ioio](#_sample_ioio)
clipboard | [calculator](#_sample_calculator) [diff](#_sample_diff) [text-editor](#_sample_text-editor)
commands | [mini-code-edit](#_sample_mini-code-edit)
contextMenu | [context-menu](#_sample_context-menu) [mini-code-edit](#_sample_mini-code-edit) [webview-samples_multi-tab-browser](#_sample_webview-samples_multi-tab-browser) [webview-samples_new-window-user-agent](#_sample_webview-samples_new-window-user-agent)
dart | [dart](#_sample_dart)
desktopCapture | [desktop-capture](#_sample_desktop-capture)
fileSystem | [diff](#_sample_diff) [filesystem-access](#_sample_filesystem-access) [image-edit](#_sample_image-edit) [mini-code-edit](#_sample_mini-code-edit) [text-editor](#_sample_text-editor) [todomvc](#_sample_todomvc) [usb-label-printer](#_sample_usb-label-printer) [web-store](#_sample_web-store)
framelessWindows | [clock](#_sample_clock) [frameless-window](#_sample_frameless-window) [gdrive](#_sample_gdrive) [io2012-presentation](#_sample_io2012-presentation) [manga-cam](#_sample_manga-cam) [mdns-browser](#_sample_mdns-browser) [multicast](#_sample_multicast) [platform-title](#_sample_platform-title) [webgl-pointer-lock](#_sample_webgl-pointer-lock) [windows](#_sample_windows)
fullscreen | [window-options](#_sample_window-options) [window-state](#_sample_window-state)
gcm | [gcm-notifications](#_sample_gcm-notifications)
geolocation | [appsquare](#_sample_appsquare) [clock](#_sample_clock) [weather](#_sample_weather) [webview-samples_webview](#_sample_webview-samples_webview)
getUserMedia | [appview_embedded-app](#_sample_appview_embedded-app) [camera-capture](#_sample_camera-capture) [io2012-presentation](#_sample_io2012-presentation) [io2012-presentation_servo](#_sample_io2012-presentation_servo) [manga-cam](#_sample_manga-cam) [servo](#_sample_servo) [usb-label-printer](#_sample_usb-label-printer) [webview-samples_webview](#_sample_webview-samples_webview)
hid | [blink1](#_sample_blink1) [hid](#_sample_hid)
identity | [appsquare](#_sample_appsquare) [gdrive](#_sample_gdrive) [github-auth](#_sample_github-auth) [identity](#_sample_identity) [instagram-auth](#_sample_instagram-auth) [one-time-payment](#_sample_one-time-payment) [tasks](#_sample_tasks) [web-store](#_sample_web-store)
in-app-payments | [managed-in-app-payments](#_sample_managed-in-app-payments)
mediaGallery | [media-gallery](#_sample_media-gallery)
messaging | [messaging_app1](#_sample_messaging_app1) [messaging_app2](#_sample_messaging_app2) [messaging_extension](#_sample_messaging_extension) [multicast](#_sample_multicast)
old_sockets | [parrot-ar-drone](#_sample_parrot-ar-drone)
optionalPermissions | [optional-permissions](#_sample_optional-permissions) [usb-label-printer](#_sample_usb-label-printer) [usb_knob](#_sample_usb_knob)
pointerLock | [webgl-pointer-lock](#_sample_webgl-pointer-lock) [webview-samples_webview](#_sample_webview-samples_webview)
print | [printing](#_sample_printing)
richNotifications | [clock](#_sample_clock) [gcm-notifications](#_sample_gcm-notifications) [messaging_extension](#_sample_messaging_extension) [rich-notifications](#_sample_rich-notifications) [todomvc](#_sample_todomvc)
sandbox | [sandbox](#_sample_sandbox) [sandboxed-content](#_sample_sandboxed-content)
serial | [io2012-presentation](#_sample_io2012-presentation) [io2012-presentation_servo](#_sample_io2012-presentation_servo) [serial-control-signals](#_sample_serial-control-signals) [serial_adkjs_app](#_sample_serial_adkjs_app) [serial_espruino](#_sample_serial_espruino) [serial_ledtoggle](#_sample_serial_ledtoggle) [servo](#_sample_servo)
sockets | [mdns-browser](#_sample_mdns-browser) [multicast](#_sample_multicast) [parrot-ar-drone](#_sample_parrot-ar-drone) [tcpserver](#_sample_tcpserver) [telnet](#_sample_telnet) [udp](#_sample_udp) [webserver](#_sample_webserver) [websocket-server](#_sample_websocket-server)
storage | [analytics](#_sample_analytics) [appsquare](#_sample_appsquare) [clock](#_sample_clock) [diff](#_sample_diff) [filesystem-access](#_sample_filesystem-access) [gcm-notifications](#_sample_gcm-notifications) [hello-world-sync](#_sample_hello-world-sync) [image-edit](#_sample_image-edit) [io2012-presentation](#_sample_io2012-presentation) [multicast](#_sample_multicast) [one-time-payment](#_sample_one-time-payment) [printing](#_sample_printing) [restarted-demo](#_sample_restarted-demo) [todomvc](#_sample_todomvc) [url-handler](#_sample_url-handler) [weather](#_sample_weather) [web-store](#_sample_web-store) [webview-samples_declarative-web-request](#_sample_webview-samples_declarative-web-request) [webview-samples_insert-css](#_sample_webview-samples_insert-css)
syncFileSystem | [manga-cam](#_sample_manga-cam) [syncfs-editor](#_sample_syncfs-editor) [todomvc](#_sample_todomvc)
systemInfo | [mdns-browser](#_sample_mdns-browser) [printing](#_sample_printing) [systemInfo](#_sample_systemInfo) [tcpserver](#_sample_tcpserver) [webserver](#_sample_webserver)
tts | [tts](#_sample_tts)
usb | [blink1](#_sample_blink1) [usb-label-printer](#_sample_usb-label-printer) [usb_device-info](#_sample_usb_device-info) [usb_knob](#_sample_usb_knob)
webstore | [web-store](#_sample_web-store)
webview | [appengine-channelapi_app](#_sample_appengine-channelapi_app) [io2012-presentation](#_sample_io2012-presentation) [tcpserver](#_sample_tcpserver) [url-handler](#_sample_url-handler) [webview-samples_browser](#_sample_webview-samples_browser) [webview-samples_declarative-web-request](#_sample_webview-samples_declarative-web-request) [webview-samples_insert-css](#_sample_webview-samples_insert-css) [webview-samples_local-resources](#_sample_webview-samples_local-resources) [webview-samples_multi-tab-browser](#_sample_webview-samples_multi-tab-browser) [webview-samples_new-window](#_sample_webview-samples_new-window) [webview-samples_new-window-user-agent](#_sample_webview-samples_new-window-user-agent) [webview-samples_shared-script](#_sample_webview-samples_shared-script) [webview-samples_user-agent](#_sample_webview-samples_user-agent) [webview-samples_webview](#_sample_webview-samples_webview)
# Mobile support
You can generate native mobile versions of the samples below using the procedure
described [here](https://github.com/MobileChromeApps/mobile-chrome-apps/blob/master/README.md).
| Sample | Android support | iOS support |
| --- | --- | --- |
| analytics | Supported. | Supported. |
| calculator | Supported. Visual issues caused by fixed-size layout | Supported. Visual issues caused by fixed-size layout |
| dart | | Supported. Visual issues caused by fixed-size layout |
| hello-world | Supported. | Supported. |
| hello-world-sync | Supported. sync storage doesn't actually sync - works local | Supported. sync storage doesn't actually sync - works local |
| identity | Supported. You need to add an Android OAuth app in the Cloud API console of the OAuth project. The app's SHA1 can be the debug one (see more [here](https://developers.google.com/console/help/new/#installedapplications)), and the package name is org.chromium.identity.MyApp. If you don't add the Android OAuth app and tries to use the OAuth client-id from the Chrome app, you will get a generic message GoogleAuthException | |
| parrot-ar-drone | Supported. Communication to the Drone works, but the UI requires a connected gamepad. | |
| restarted-demo | | Supported. Restart must be done via Safari remote debugging. |
| rich-notifications | Supported. | |
| tasks | Supported. | |
| todomvc | Supported. | |
| udp | | Supported. |
| weather | | Supported. |
| webserver | Supported. Directory picking doesn't work on some versions of Android | |
| websocket-server | | Supported. |
# Libraries and tools
* [Google APIs client library for Chrome Apps](https://github.com/GoogleChrome/chrome-extensions-samples/blob/main/_archive/apps/libraries/gapi-chrome-apps-lib)
* [Google Analytics for Chrome Apps and Extensions](https://github.com/GoogleChrome/chrome-platform-analytics)
---
## File: _archive/apps/libraries/gapi-chrome-apps-lib/README.md
# Google API javascript client library loader for Chrome Packaged Apps
Provides the Google API javascript client 'gapi' as
appropriate for hosted websites, or if in a Chrome packaged
app implement a minimal set of functionality that is Content
Security Policy compliant and uses the chrome identity api.
## Status
This library is likely not suitable for use without additional modifications.
## Usage
To be expanded upon, but essentially:
- Add 'identity' permission to manifest.
- Reference this script instead of the apis.google.com online version.
- Call gapi methods as usual.
## Examples:
* [Tasks app using GAPI](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/_archive/apps/samples/tasks)
## Resources
* [JavaScript Client Library Reference](https://developers.google.com/api-client-library/javascript/reference/referencedocs)
---
## File: _archive/apps/samples/analytics/README.md
# Analytics
This example demonstrates how to include support for Google Analytics in your
packaged application. It uses the
[chrome-platform-analytics](https://github.com/GoogleChrome/chrome-platform-analytics) library,
which allows tracking app views or any arbitrary event to Google Analytics.
See more at the [project wiki](https://github.com/GoogleChrome/chrome-platform-analytics/wiki)
*Please note: You will need to modify main.js to include real Google Analytics credentials.*
## Resources
* [Runtime](https://developer.chrome.com/docs/extensions/reference/app_runtime)
* [Window](https://developer.chrome.com/docs/extensions/reference/app_window)
* [chrome-platform-analytics](https://github.com/GoogleChrome/chrome-platform-analytics/wiki)
## Screenshot
---
## File: _archive/apps/samples/analytics/manifest.json
{
"name": "Analytics Sample App",
"description": "An example app using Google Analytics without the Closure library",
"version": "1.2.5",
"manifest_version": 2,
"icons": {"128": "icon_128.png"},
"app": {
"background": {
"scripts": ["background.js"]
}
},
"permissions": [
"https://www.google-analytics.com/*",
"storage"
]
}
---
## File: _archive/apps/samples/analytics/sample_support_metadata.json
{
"sample": "analytics",
"files_with_snippets": [ ],
"android": {"works": true},
"ios": {"works": true}
}
---
## File: _archive/apps/samples/appengine-channelapi/README.md
# AppEngine Channel API example
This is an example of how to use the AppEngine's Channel API in a Chrome Packaged App. Since the Channel API is not directly compatible with the CSP restrictions in a packaged app, this sample uses a WebView and a "proxy" object that communicates with the Webview using async postMessage.
This code is an adaptation of the [Tic Tac Toe game](https://code.google.com/p/channel-tac-toe/) used by the AppEngine team to demonstrate the Channel API. The main modifications from the original game are:
- index.html is not rendered as a template in the server, it is embedded in the app. All responses from the server are JSON messages;
- the server doesn't use the appengine's user library, since that would require another authentication step. Instead, the server attributes a random UUID to the first user and another to the second. This user ID is returned to the client that uses it in the following calls. It is not secure, but simple enough for this sample. In a real application, this method would allow an eaversdropper to capture the GET request and replay with different commands;
- all the interations with the channel API are abstracted in the ChannelAPI object defined by channel_in_a_webview.js. This object communicates with the webview page (channel_in_a_webview.html), served to the webview from the appengine server.
To run:
- go to the `appengine` folder and type `dev_appserver.py .`
- install the Chrome Packaged App in the `app` folder
- run the Chrome packaged app twice and copy the game ID from one screen to the other
- play
* [Appengine Channel API](https://developers.google.com/appengine/docs/python/channel)
* [Webview](https://developer.chrome.com/apps/tags/webview)
## Screenshot
---
## File: _archive/apps/samples/appengine-channelapi/app/README.md
---
## File: _archive/apps/samples/appengine-channelapi/app/manifest.json
{
"manifest_version": 2,
"name": "Appengine Channel API Sample",
"version": "2",
"minimum_chrome_version": "27",
"permissions": ["webview", "http://localhost:8080/*"],
"app": {
"background": {
"scripts": ["main.js"]
}
}
}
---
## File: _archive/apps/samples/appengine-channelapi/appengine/app.yaml
application: moishetest
version: 1
runtime: python
api_version: 1
handlers:
- url: /static
static_dir: static
- url: /.*
script: chatactoe.py
inbound_services:
- channel_presence
---
## File: _archive/apps/samples/appsquare/README.md
# AppSquare
This is a basic Foursquare client implemented as a packaged app.
It just displays recent checkins of the logged in user's friends. To log into Foursquare, it uses the [identity API](http://developer.chrome.com/apps/identity.html) (specfically, the `launchWebAuthFlow` method). Once it gets the OAuth token, it uses the [storage API](http://developer.chrome.com/apps/storage) to persist it. It also uses the [W3C Geolocation API](http://www.w3.org/TR/geolocation-API/) to pass in the current location to the Foursquare API.
When running it unpacked, it will normally have a different ID (the unpacked
extension ID is a hash of the path on disk). However, this will result in the
auth API not working, since the redirect URL will be different. To force the
unpacked app to have the same ID, add this key and value to `manifest.json`:
"key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDnyZBBnfu+qNi1x5C0YKIob4ACrA84HdMArTGobttMHIxM2Z6aLshFmoKZa/pbyQS6D5yNywr4KM/llWiY2aV2puIflUxRT8SjjPehswCvm6eWQM+r3mB755m48x+diDl8URJsX4AJ3pQHnKWEvitZcuBh0GTfsLzKU/BfHEaH7QIDAQAB"
(this is a base 64 encoded version of the app's public key)
The key *must* be removed before uploading it to the store.
## Resources
* [Identity](https://developer.chrome.com/docs/apps/app_identity/)
* [Runtime](https://developer.chrome.com/docs/extensions/reference/app_runtime)
* [Window](https://developer.chrome.com/docs/extensions/reference/app_window)
## Screenshot
---
## File: _archive/apps/samples/appsquare/manifest.json
{
"name": "Sample of Foursquare integration",
"version": "7.1",
"manifest_version": 2,
"minimum_chrome_version": "33",
"app": {
"background": {
"scripts": ["background.js"]
}
},
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
"permissions": [
"identity",
"geolocation",
"storage",
"https://api.foursquare.com/",
"https://*.4sqi.net/",
"https://foursquare.com/"
]
}
---
## File: _archive/apps/samples/appview/README.md
# Appview
These samples show how to use the `` tag to embed other Chrome Apps
within your Chrome App.
Add `host-app` and `embedded-app` and embed the `embedded-app` inside
`host-app`.
## Resources
* [Appview](https://developer.chrome.com/apps/tags/appview)
* [Runtime](http://developer.chrome.com/apps/app_runtime)
* [Window](http://developer.chrome.com/apps/app_window)
* [videoCapture](https://developer.chrome.com/apps/declare_permissions)
## Screenshot
---
## File: _archive/apps/samples/appview/embedded-app/README.md
---
## File: _archive/apps/samples/appview/embedded-app/manifest.json
{
"manifest_version": 2,
"name": "Sample Appview Embedded",
"description": "This sample shows how to allow your app to be embedded into another app",
"version": "2",
"minimum_chrome_version": "43",
"permissions": ["videoCapture"],
"app": {
"background": {
"scripts": ["main.js"]
}
}
}
---
## File: _archive/apps/samples/appview/host-app/README.md
---
## File: _archive/apps/samples/appview/host-app/manifest.json
{
"manifest_version": 2,
"name": "Sample Appview Host",
"description": "This sample shows how to request another app to be embedded.",
"version": "2",
"minimum_chrome_version": "43",
"permissions": ["appview"],
"app": {
"background": {
"scripts": ["main.js"]
}
}
}
---
## File: _archive/apps/samples/blink1/README.md
# Blink(1)
This sample demos the `chrome.hid` API by controlling a [ThingM blink(1) mk2](http://blink1mk2.thingm.com/) RGB LED light via USB HID Feature Reports.
## APIs
* [HID](https://developer.chrome.com/apps/hid)
* [Runtime](https://developer.chrome.com/apps/app_runtime)
* [Window](https://developer.chrome.com/apps/app_window)
## Running this app on Linux
On Linux a udev rule must be added to allow Chrome to open the blink(1) device. Copy the file [`udev/61-blink1.rules`](https://raw.githubusercontent.com/GoogleChrome/chrome-extensions-samples/main/_archive/apps/samples/blink1/udev/61-blink1.rules) to `/etc/udev/rules.d`. It contains the following rule which allows anyone in the `plugdev` group read/write access the `hidraw` node for this device. See [USB Caveats](https://developer.chrome.com/apps/app_usb#caveats) for more details.
# Make the blink(1) accessible to plugdev via hidraw.
SUBSYSTEM=="hidraw", SUBSYSTEMS=="usb", ATTRS{idVendor}=="27b8", ATTRS{idProduct}=="01ed", MODE="0660", GROUP="plugdev"
## Screenshot
---
## File: _archive/apps/samples/blink1/manifest.json
{
"name": "blink(1)",
"manifest_version": 2,
"version": "0.3",
"minimum_chrome_version": "39.0.2140.0",
"app": {
"background": {
"scripts": [ "main.js" ]
}
},
"icons": {
"128": "128.png"
},
"permissions": [
"hid",
{
"usbDevices": [
{ "vendorId": 10168, "productId": 493 }
]
}
]
}
---
## File: _archive/apps/samples/bluetooth-samples/battery-service-demo/README.md
Bluetooth Low-Energy Battery Service Demo
=========================================
This sample demonstrates how an app can read the battery level of a Bluetooth
Low Energy peripheral using the chrome.bluetoothLowEnergy API to communicate
with the Generic Attribute Profile (GATT) based Battery Service.
## Screenshot
---
## File: _archive/apps/samples/bluetooth-samples/battery-service-demo/manifest.json
{
"name": "Battery Service Demo",
"description": "Battery Service Demo using chrome.bluetoothLowEnergy",
"version": "0.1",
"minimum_chrome_version": "37",
"icons": {
"16": "bluetooth.png",
"48": "bluetooth.png",
"128": "bluetooth.png"
},
"app": {
"background": {
"scripts": ["background.js"]
}
},
"bluetooth": {
"low_energy": true,
"uuids": ["180f"]
}
}
---
## File: _archive/apps/samples/bluetooth-samples/device-info-demo/README.md
Bluetooth Low-Energy Device Information Service Demo
====================================================
This sample demonstrates how an app can communicate with the GATT based Device
Information Service on a Bluetooth Low Energy peripheral using the
chrome.bluetoothLowEnergy API.
## Screenshot
---
## File: _archive/apps/samples/bluetooth-samples/device-info-demo/manifest.json
{
"name": "Device Information Service Demo",
"description": "Device Information Demo using chrome.bluetoothLowEnergy",
"version": "0.3",
"minimum_chrome_version": "37",
"icons": {
"16": "bluetooth.png",
"48": "bluetooth.png",
"128": "bluetooth.png"
},
"app": {
"background": {
"scripts": ["background.js"]
}
},
"bluetooth": {
"low_energy": true,
"uuids": ["180a"]
}
}
---
## File: _archive/apps/samples/bluetooth-samples/heart-rate-sensor/README.md
Low-Energy Heart Rate Sensor
============================
This sample demonstrates using the chrome.bluetoothLowEnergy API to communicate
with the Generic Attribute Profile (GATT) based Heart Rate Service on a
Bluetooth Low Energy heart rate sensor.
## Screenshot
---
## File: _archive/apps/samples/bluetooth-samples/heart-rate-sensor/manifest.json
{
"name": "Heart Rate Service Demo",
"description": "Heart Rate Monitor Demo using chrome.bluetoothLowEnergy",
"version": "0.1",
"minimum_chrome_version": "37",
"icons": {
"16": "hr_sensor_icon16.png",
"48": "hr_sensor_icon48.png",
"128": "hr_sensor_icon128.png"
},
"app": {
"background": {
"scripts": ["background.js"]
}
},
"bluetooth": {
"low_energy": true,
"uuids": ["180d"]
}
}
---
## File: _archive/apps/samples/calculator/README.md
# Calculator
A sample application that provides a simple calculator. Supports basic operations
such as addition, multiplication, subtraction and division.
This sample also incorporates an MVC-style structure and requires jQuery for
DOM manipulation.
## APIs
* [Runtime](https://developer.chrome.com/docs/extensions/reference/app_runtime)
* [Window](https://developer.chrome.com/docs/extensions/reference/app_window)
## Screenshot
---
## File: _archive/apps/samples/calculator/manifest.json
{
"name": "Calculator",
"description": "A simple calculator.",
"manifest_version": 2,
"minimum_chrome_version": "23",
"version": "1.2",
"offline_enabled": true,
"app": {
"background": {
"scripts": ["main.js"]
}
},
"permissions" : [
"clipboardWrite"
],
"icons": {
"16": "assets/icon-128x128.png",
"128": "assets/icon-128x128.png"
}
}
---
## File: _archive/apps/samples/calculator/sample_support_metadata.json
{
"sample": "calculator",
"files_with_snippets": [ ],
"android": {"works": true, "comments": "Visual issues caused by fixed-size layout"},
"ios": {"works": true, "comments": "Visual issues caused by fixed-size layout"}
}
---
## File: _archive/apps/samples/camera-capture/README.md
# Camera Capture
Shows how to grab a camera feed using getUserMedia. Requires
the `videoCapture` permissions to be set in the manifest file.
## APIs
* [Runtime](https://developer.chrome.com/docs/extensions/reference/app_runtime)
* [Window](https://developer.chrome.com/docs/extensions/reference/app_window)
* [videoCapture](https://developer.chrome.com/apps/declare_permissions)
## Screenshot
---
## File: _archive/apps/samples/camera-capture/manifest.json
{
"name": "Camera Capture Sample",
"version": "2.2",
"manifest_version": 2,
"icons": {
"16": "camera.png",
"128": "camera.png"
},
"app": {
"background": {
"scripts": ["background.js"]
}
},
"permissions": [
"videoCapture"
]
}
---
## File: _archive/apps/samples/clock/README.md
# Clock
A widget-like application that provides a world clock, an alarm, a timer and a stopwatch.
## APIs
* [Sync Storage API](http://developer.chrome.com/apps/storage)
* [Runtime](https://developer.chrome.com/docs/extensions/reference/app_runtime)
* [Window](https://developer.chrome.com/docs/extensions/reference/app_window)
## Screenshot
---
## File: _archive/apps/samples/clock/manifest.json
{
"name": "World Clock",
"version": "0.1.6",
"manifest_version": 2,
"minimum_chrome_version": "23",
"description": "A world clock application.",
"icons": {
"16": "assets/icon.png",
"128": "assets/icon.png"
},
"app": {
"background": {
"scripts": ["main.js"]
}
},
"offline_enabled": true,
"permissions": ["geolocation",
"storage",
"notifications",
""
]
}
---
## File: _archive/apps/samples/context-menu/README.md
# Context menus
Sample that shows how to use the [context menu API](http://developer.chrome.com/apps/contextMenus) in an app to manage various application context menus, such as menus that only apply to particular windows, menus that apply to selections, and context menus that work on the app launcher.
## APIs
* [Context menu API](http://developer.chrome.com/apps/contextMenus)
* [Runtime](http://developer.chrome.com/apps/app_runtime)
* [Window](http://developer.chrome.com/apps/app_window)
## Screenshot
---
## File: _archive/apps/samples/context-menu/manifest.json
{
"manifest_version": 2,
"name": "Context Menu Sample",
"version": "4",
"app": {
"background": {
"scripts": ["main.js"]
}
},
"permissions": ["contextMenus"]
}
---
## File: _archive/apps/samples/dart/README.md
# Using DART in a Chrome Packaged App
A simple Dart sample transformed into a Chrome packaged app. Please, use Dart version equal or greater than
0.1.2.0_15284_chrome-bot (Fri Nov 23 05:26:52 2012)
if you want to recompile dart to JS. See the correct, CSP compatible, command-line parameter in the compile.sh script.
## APIs
* [Runtime](https://developer.chrome.com/docs/extensions/reference/app_runtime)
* [Window](https://developer.chrome.com/docs/extensions/reference/app_window)
## Screenshot
---
## File: _archive/apps/samples/dart/manifest.json
{
"manifest_version": 2,
"name": "Hello Dart! Sample",
"version": "2",
"minimum_chrome_version": "23",
"icons": {"128": "images/dart_icon.png"},
"app": {
"background": {
"scripts": ["js/main.js"]
}
}
}
---
## File: _archive/apps/samples/dart/pubspec.yaml
name: dart-clock-packaged-app-sample
dependencies:
browser: any
---
## File: _archive/apps/samples/dart/sample_support_metadata.json
{
"sample": "dart",
"files_with_snippets": [ ],
"ios": {"works": true, "comments": "Visual issues caused by fixed-size layout"}
}
---
## File: _archive/apps/samples/desktop-capture/README.md
# Desktop Capture
Shows how to grab a desktop capture feed using getUserMedia. Requires
the appropriate permissions (`desktopCapture`) to be set in the manifest file.
## APIs
* [Runtime](https://developer.chrome.com/docs/extensions/reference/app_runtime)
* [Window](https://developer.chrome.com/docs/extensions/reference/app_window)
* [desktopCapture](https://developer.chrome.com/apps/desktopCapture)
## Screenshot
---
## File: _archive/apps/samples/desktop-capture/manifest.json
{
"name": "Desktop Capture Sample",
"version": "2",
"manifest_version": 2,
"icons": {
"16": "desktop.png",
"128": "desktop.png"
},
"app": {
"background": {
"scripts": ["background.js"]
}
},
"permissions": [
"desktopCapture"
]
}
---
## File: _archive/apps/samples/dialog-element/README.md
# Dialog Element
The WHATWG defines a new element called `