Build a Media Player Chrome App

Published in

Searce

6 min readNov 13, 2019

A Google Chrome App is a web application that runs on the Google Chrome web browser.

Chrome apps are just web applications that are registered with Chrome’s Web Store (Gmail, e.g.). They’re basically just glorified bookmarks.

Chrome apps runs within the chrome browser itself having a different user interface which distinguish them from web applications. It has few additional capabilities like can work offline, can access additional hardware devices and local storage which makes it more robust.

There are two types of apps, hosted and packaged.

Packaged apps

Packaged apps have features very similar to a native desktop app, namely offline capable (by default), can interact with hardware devices, and can access local storage. Packaged apps are not confined to the regular Chrome interface and can display without a classic window menu and operating system user interface elements.

Hosted apps

Hosted apps are the original type of Chrome apps. They contain a single manifest file that contains the URL and additional information about the app. Hosted apps are usually offline and are subject to regular web page security restrictions.

Here are the basic steps for creating chrome app.For better understanding we will create an example app (Media Player)

Create manifest.json
Create background scripts
Create a window page
Create background event handlers
Install chrome app in developer mode

Create your first chrome app (Media Player)

Here we will create one chrome app called Media Player. This app will use pre specified video urls and will download and store video on chrome local storage and can be played afterwards. Downloaded videos will be played in loop sequencing. This app will use chrome fileSystem and many more chrome inbuilt functionalities.

A Chrome App contains these components:

The manifest tells Chrome about your app, what it is, how to launch it and the extra permissions that it requires.
The background script is used to create the event page responsible for managing the app life cycle.
All code must be included in the Chrome App package. This includes HTML, JS, CSS and Native Client modules.

All icons and other assets must be included in the package.

1. Create manifest.json

Manifest Files described detailed description for all the available attributes of manifest.json and use of specific attribute.

2. Create the background script

Your background script may contain additional listeners, windows, post messages, and launch data, all of which are used by the event page to manage the app

chrome.app.runtime.onLaunched event will be fired when user starts the app

To keep the screen awake all the time chrome.power app is used.To use the power app we will have to include “power” in permissions section of manifest.json.

chrome.app.window is used to create the window which will immediately open the window with the full screen state and full width and height. (You can provide your bound with the predefined left, right, height, width properties.)

3. Create a window page

Window page (index.html) contains the html code for the starting page of the application.

4. Create background event handlers (app.js)

In background script we will use javascript to fetch data from the given video url and store that into chrome local storage.

Here we have declared and initialised required global variables which will be used afterwards. baseFolderPath is the local storage directory path to store all the videos locally. videoUrls is the object which contains video urls for the developments environments and production environment separately.

We have used chrome.management app to fetch the information regarding app.

On the start of app, local storage will be blank so our first step will be identifying whether base directory exist or not.

To check whether directory exist or not we have used getDirectory function of the window.webKitFileSystem. If directory does not exist then to create id explicitly {create:True} parameter is used. Newly created directory will be stored in persistent local storage using window.webKitFileSystem.

You can also use chrome fileSystem apps. For reference of chrome fileSystem visit chrome storage api

After the creation of the base directory our next step is to fetch the video urls which are supposed to be played. To fetch the video link we will first check whether the app has active internet connection or not using navigator.onLine.

If internet connection is not available then we will use the videos available from the local storage otherwise we will fetch the video link based on the application environment which we have already identified using chrome.management.getSelf().

After fetching the video urls which are supposed to be played by app. Our next step is to check whether the video file of given url exists in chrome app local storage or not.

To check whether file exist or not we have used getFile of window.webKitRequestFileSystem.If file exists in local storage then we will use that file else we will download the file from the given url and store it in local storage.

If given video file does not exist in chrome app local storage then we will have to download that file and store it in local storage for the future use.

To fetch the content from the cloud storage url of the video file we have used XMLHttpRequest to fetch the data and using filesystem we will store video in localStorage. We have also added listener to fetch the amount of data fetched from the given http url.

After download of the files to play the videos in loop mode, We have stored the chrome app local storage file objects into myVids and assigned the first video to the video player and started playing the video.

To continue the video playing one after the other, We have added video ‘ended’ event listener which will assign next video to the video player.

Chrome Apps with kiosk mode enabled always run fullscreen on Chrome OS and do not allow the user to exit the app. So to close the window we have used window.close() and to rotate the window we have used chrome.system.display properties.