Chrome Packaged App Manifest Version 2 Editor App

Started working on Chrome Packaged App Manifest Version 2 Editor App using AngularJS and Twitter Bootstrap.

Download

One of the cool trick I learned while implementing this is demonstrated by this fiddle. It deals with using AngularJS's ng-repeat with an object, and editing the values of properties of that object within it. It makes a clever use of angular.copy() to isolate input-bound variables.

Todo

• Implement Load and Save using file system API
• Implement complete Manifest Version 2
• Eclipse integration
• [Stretch Goal] Refactor into generic JSON editor...possibly using JSON Schema
• Define manifest version 2 JSON schema.
• Use the schema to implement the editor

Modern Art generator App

Here is a silly packaged app. When launched it shows a chrome-less square window with some modern art animation. Clicking on the directional (N, NE, E, SE, S, SW, W, NW) tridrants it creates a similar chrome-less square window with some modern art animation in that direction. Clicking on the center tridrant closes the window. Here is a sample screenshot:

Try it in another tab!

By clicking in various directions you can create endless modern art on your desktop.

I am trying to create display wall type application...and ended up creating this fun app on the way :)

Enjoy!

Desktop App for YouTube with embedded videos

In this and this blog entry I talked about Desktop App for YouTube. However in that variant the videos are shown in a separate window. This has to do with the fact that the webview tag cannot show embedded videos in the current stable version of Chrome. However the webview tag in Chrome Canary can show embedded videos. With that I managed to get embedded videos in Desktop App for YouTube that only works with Chrome Canary. Here is the screenshot:

Also added support to popout the video. This basically answers the question someone asked here.You can further make it full screen using the built in control.

Available on Chrome web store.

While implementing this I ran into CSP limitations and capabilities and limitation of embedded sandboxed iframe and webview tags. I got around those issues by using absolute positioning and z-index to position webview at the exactly right sub-rectangle if sandboxed iframe.

Smart phone browser simulators package apps

See this blog post for more details on how to set things up for full effect. Also managed to not require a window decorations. Simply drag the top part to move the window around. Click on home buttons to return to desktop. Add tab buttons create additional windows. And the clock actually works :)

Now I am including the latest zips as they do not seem to crash my Chrome as I had experienced with initial versions of the apps (197381). In any case use at your own risk.

chrgalaxys4.zip

chrgalaxys3.zip

chriphone.zip

Just for fun - two Chrome packaged apps

This is just a teaser. I will share the apps once the bug # 197381 is fixed!

TODO

• Figure out a way to send the correct User Agent headers so that websites will think that they are talking to real devices
• Handler overflow and scrollbar (style). Exploring an interesting idea to fix this as follows:

• Run Chrome with custom profile (using --user-data-dir)

• Install the app in that instance of the Chrome

• Run the app_host with the same custom profile

• Create a shortcut for the app on the desktop

• Edit the shortcut to point to the same profile (using --user-data-dir)

• Edit the custom stylesheet at

.../Default/User StyleSheets/Custom.css

• And add the following CSS 

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 3px;
    background: rgba(128,128,128,1); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

::-webkit-scrollbar-thumb:window-inactive {
background: rgba(192,192,192,0.4); 
}

• And using the following command line option

--user-agent="Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3"

• Voila...notice the thin scrollbars and mobile website for ios being displayed

• You may have to use a batch (.bat) file to invoke the app like this

@echo off
cmd /c start C:\Users\name\AppData\Local\Google\Chrome\Application\app_host.exe --user-data-dir="c:\Users\name\.chriphone" --profile-directory=Default  --user-agent="Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3" --app-id=phfcjmgphpbpgofopejnibdpkcmmcfee

• I get the following...gmail.com thinks it is talking to a real iPhone!

• Similarly with the following user agent string:

--user-agent="Mozilla/5.0 (Linux; U; Android 4.0.4; en-gb; GT-I9300 Build/IMM76D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"

• I get the following...gmail.com thinks it is talking to a real Galaxy S3!

Also S4:

This basically solves (albeit in a hacky way) a question that was asked on

Chrome Apps Office Hours - the WebView Control

Enjoy!

Try Chrome Developer Tools Enhancement - Scope Varibles section

In this blog entry I talked about enhancing the Scope Variables section of Chrome Developer tools. If you want to try the enhancement yourself you can easily do so by following this procedure:

• Download and install Chrome Canary. My changes are compatible with Chrome canary only.
• Configure its launch with following parameters:

chrome.exe --remote-debugging-port=9222 --remote-debugging-frontend="http://chrome-developer-tools.googlecode.com/git/inspector/front-end/inspector.html"

The

--remote-debugging-frontend="http://chrome-developer-tools.googlecode.com/git/inspector/front-end/inspector.html"

parameter basically tells the Chrome debugger back-end to use the Developer Tools located at:

http://chrome-developer-tools.googlecode.com/git/inspector/front-end/inspector.html

which is where I have put my modified code for developer tools.

UPDATE: It appears that the runtime flag `—remote-debugging-frontend` was recently removed. Instead, custom frontend url needs to be specified after a pound sign in address of remote debugging server when connecting to the server running at 9222 due to the flag -remote-debugging-port=9222. Instead of navigating to “localhost:9222", go to “localhost:9222#http://localhost:8088/front_end/inspector.html?experiments=true”.

So the new invocation should look like this:

chrome.exe --remote-debugging-port=9222 --no-first-run --user-data-dir=C:\devtoolsprofile

• Launch the page you want to debug in one tab

• Launch another tab with the following URL

http://localhost:9222

UPDATE:

http://localhost:9222#http://localhost:8088/front_end/inspector.html?experiments=true

• Select the page you want to debug in the grid that is shown - in my case it is test.html from above

• Set breakpoints and run the action in page to be debugged that will cause the break point to be hit. Try out my enhancement to the Scope Variable section. The enhancement is to highlight the scope variables that are new or changed their value since the last time the debugee was suspended.

Please provide feedback.

Here is a simple packaged app that wraps Developer Tools:

If you are interested you can download it here.

Enjoy!

Desktop App powered by YouTube™

A few years ago I created the YouTube™ Viewer  add-on (which still works!) for Firefox. The idea was to search for YouTube™ videos in a distraction-free and safe manner and then watch them. Google Chrome now supports packaged apps which can be launched from a desktop icon. I thought this can be used to create a YouTube™ viewer app for Chrome. I created one using Chrome Packaged App APIs [1] [2] and Angular.js. One thing I could not achieve though was to actually embed the video inside the app. This is probably a bug...so I filed one:

180390 - Sandboxed page in packaged app cannot display embedded YouTube video.

Here are the screenshots for instant gratification:

The Desktop App powered by YouTube™:

The video playing in Chrome:

The desktop launcher for Desktop App powered by YouTube™:

Get it here.

I will soon blog about the details of how the app works and while doing that explain concepts such as sandboxed pages and security restrictions imposed by the Chrome App programming model.

Here is a screenshot of my original Firefox add-on:

You can download it here. This is built using XUL plus JavaScript.

Enjoy!