Chrome Web Store: new way to publish Google Apps Script

Apps Script developers that wished to share their work with a larger audience have traditionally turned to the Script Gallery, which allows other users to copy and install the script into their own spreadsheets. While appropriate for custom functions and spreadsheet extensions, it didn't fit well when distributing more complex functionality and apps.

In this blog post we'll be highlighting a newer way to distribute your scripts: deploying them as a web app and publishing them to the Chrome Web Store. Compared to the Script Gallery, the Chrome Web Store has some distinct advantages for developers:

• Automatic updates - Change your code, do some testing, and publish a new version to update the app for all users instantly.
• More information - Detailed descriptions, promotional images, ratings, and reviews lead tocompelling listings.
• Greater discoverability - Visit the Chrome Web Store site to learn about the benefits.

Looking through the Script Gallery we believe there are many scripts that would be a great fit for the Chrome Web Store and would benefit from the advantages listed above. Some aspects of a good candidate script are:

• Custom UI - Users interact with your script through a custom user interface, not via custom spreadsheet functions or onEdit triggers.
• Background processing - Your script uses time-based triggers to do work in the background and doesn't require that the Google Spreadsheet is open.
• Not primarily about Google Spreadsheets - Your script's main focus isn't spreadsheets and you utilize a variety of services to provide separate functionality.

A great example of such a script is Gmail Meter, which was first launched in the Script Gallery but has since been published to Chrome Web Store. Now users can install and run the script without needing to create a spreadsheet, see script code, or set up triggers. It may take a little work to update a spreadsheet-based script to use the web app model, and some common tasks are:

• Implement doGet() - Instead of showing your custom UI on the spreadsheet with Spreadsheet.show(), put the same code into the doGet() method and return the finalUiInstance or HtmlOutput object.
• Deploy as a web app - Configure your script to run as a web app, which will assign it a unique URL. In most cases you'll want the web app to run as the user so that it can access their services.
• Remove references to active spreadsheet - When published as a web app there is no active spreadsheet, so if your script needs access to a spreadsheet then you'll need to use SpreadsheetApp.openById() instead. You can use the DocsList service or theDocsListDialog UI widget to help users locate the desired spreadsheet.
• Handle multiple users - When published as a web app users access the same copy of the script, so you may need to change the way you organize data to avoid conflicts.UserProperties work well for small settings, and when using ScriptDb make the user's login ID or email address part of the objects so that you can filter for them later.

Publishing to the Chrome Web Store only takes a few clicks, and we provide instructions for the process in our documentation. We hope that you are inspired to take your scripts to the next level, and if you have any questions along the way feel free to reach out to us on StackOverflow or Google+.

By Eric Koleda
Ref: http://googleappsdeveloper.blogspot.com/2012/09/expand-your-reach-with-web-apps.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+GoogleAppsDeveloperBlog+%28Google+Apps+Developer+Blog%29

How to Read the Source Code of Chrome and Firefox Extensions

I am writing a Chrome extension (more on that next week !) and so far the experience has been excellent. Google has a decent set of API and has a good tutorial to get you started on developing extensions. But other than that I did not find many good resources in net for developing Chrome extensions. So I used the old way of reading the code of other good Chrome extensions to learn the ropes. Since the extension I write emulates a Firefox extension, I had to read some code of Firefox extensions too !

So in this post, I will talk about how to go about reading the code of Chrome/Firefox extensions and experimenting with them. I intend to write a more detailed post of developing/debugging Chrome extensions once I finish my extension.

A Word Of Caution

1) It is quite easy to mess with the extension’s application logic or its internal data structures. So be a little cautious when you are playing with the extension internals.
2) Also when you read the code, you might be tempted to reuse some of them. Just cross check with the extension’s license. Most of them have fairly liberal licenses. But it does not hurt to verify.

I will talk about Chrome extensions first and later will discuss the Firefox extensions.

Getting the Chrome Extension Id

One of the first things to know before playing with the extension is the extension id. There are two ways to know the id of an extension.

If the extension is installed in your computer, then you can get the id from the Extensions menu. Click on the wrench icon and select Extensions. In the Extensions page, each extension will be listed with some details like its name, description, version and most importantly an id. The id is a strange looking string with around 32 characters. For eg hoildcfdkjkefngkheffkiepkdcfdiok .

If you have not installed the extension, you can get the extension id by going to the extension’s page in the official Chrome extensions page . The extension id corresponds to the xxxx in the sample url – https://chrome.google.com/extensions/detail/xxxx.

Reading the Chrome Extension Source Code

I have two OSes in my system (Ubuntu and Windows 7). So I will explain the process for these two OS. But I am sure the process for other OS will be very similar.

In my Ubuntu system, for an extension with id say xxxx, the source code is located at ~/.config/google-chrome/Default/Extensions/xxxx . In this case Default is the name of my profile. If you have a different profile, substitute it. This is the root folder and it has child folder with the name of the version. Once you go in, you can see the extension code . Have fun !

In Windows 7, you can see the extension source folder at "C:\Users\<username>\AppData\Local\Google\Chrome\User Data\Default\Extensions\xxxx" . Again replace username with your login name, Default with your profile name if you use alternate profile.

Some times, you do not want to install an extension to read the source code. In this case, all you need to do is to download the crx file. At Google’s office Chrome extension page, to download the crx file , go to the extension’s details page (which is of the format https://chrome.google.com/extensions/detail/extensionid ) . Right click on the "Install" button and select "Save Link As". You will get a crx file. Now all you need to do is to use unzip command to extract the contents. If you are in Windows , any extraction software that can extract zip files will do. It might whine about some missing headers. Ignore it. You will get the extension code in the extracted folder.

Playing with Chrome Extension’s Local Storage

One of the coolest feature in HTML 5 is Local Storage which allows to store application info in a hash like data structure (which is usually internally a SQLite database). Most of the extensions use it extensively. So you can learn a lot about their internals by exploring what they store in the local storage. Note that Local Storage usually contains information that are critical to the proper execution of the extension and tampering it is not a good idea !

In Ubuntu, you can take a look at the extension’s local storage file at "~/.config/google-chrome/Default/Local Storage". In Windows 7, you can look at the file at "C:\Users\<username>\AppData\Local\Google\Chrome\User Data\Default\Local Storage". The local storage is nothing but a SQLite file and will have a name like "chrome-extension_xxxx_num.localstorage" where xxxx is the extension id and num is a number (usually 0).

The contents are stored in a table called "ItemTable". You will need a SQLite program to view its contents. I think, if you are in Lucid Lynx (Ubuntu 10.04) , you will already have it in the system (sqlite3) . Else you can install it via update manager. I am not sure what is the best program to view SQLite databases in Windows.

If you do not want to dirty your hand with command line tools , then check out instructions later at the section "Playing with Live Chrome Extensions" .

Playing with Chrome Extension’s Web Databases

HTML 5 also allows an extension to have arbitrarily structured databases. Currently I see only SQLite databases. For my extension, I really wanted to use databases instead of the local storage but I did not find enough good references on using Web databases. Also the problem of migrating one database version structure to another was a nightmare. So I did not invest much time in exploring databases. Again, I think very few extensions use Web Databases (None of the ones I sampled used it !).

In Ubuntu, you can see the database file at ~/.config/google-chrome/Default/databases . In Windows 7, you can see it at C:\Users\<username>\AppData\Local\Google\Chrome\User Data\Default\databases. As above, this is a SQLite file and you can explore it using a SQLite database browser.

Other Stuff

As you have noticed, the folder ~/.config/google-chrome/Default (In Ubuntu) and C:\Users\<username>\AppData\Local\Google\Chrome\User Data\Default\ (in Windows 7) have lot of good stuff. Play around the files. But be cautious as fooling around can cause the extension to malfunction and at worst, crash of Google Chrome.

Playing with Live Chrome Extensions

Chrome’s Developer Tools is a delight. It packs lot of very nifty functions. I will talk more about it in future. If you want to know all about a Chrome extension (especially Js files and local storage) without much pain, Developer tools is the way to go.

Go to the extensions menu (Wrench icon -> Extensions). Lets say you want to dig into extension xxxx. Go to the xxxx’s section in that page. You can see that there is a line "Inspect active views:" . And it usually lists "background.html" (or something similar like bg.html) . If you are viewing some other html file of the extension (say options.html, help.html etc) , then you will see them here too. But you should be able to see background.html (or some background file) always. Click on the link "background.html".

It should open Chrome’s Developer Tools which has many tabs. "Elements" tab has the page’s html content. "Scripts" tab displays all the js file included by the background file. You can read/view all the js file by clicking on the drop down or by using the left/right button. It also has a decent javascript debugger.

My favorite tab is however "Storage". It shows all the extension’s internal stuff like its local storage, web databases (if available), sessions and cookies. So if you want to view the local storage contents without using SQLite program, this is your (GUI) way. It will show all the keys and values. It even allows you to edit/delete the storage !

The last tab is "Console". Most of the extensions typically put lot of log info. So you can take a look at the console and get valuable information about the execution trace. Another thing that you can do is call the internal (JS) functions of the extension. The commands you type run in the context of the extension/page. Its a great way to tinker with the extension. I refrain from giving any direct example but it is trivial to experiment if you had some basic stuff with Firebug or something similar.

The other tabs are very useful but needs a lot more space to explain. But if your aim is to know the internals , then the tabs I mentioned are more than enough.

Reading Firefox Extensions

I did not dig much into Firefox extensions so this section will be brief. In the case of Firefox , getting the extension id is a bit tricky. So I primarily depended on grep to find the information. Most of the extension code will be at "~/.mozilla/firefox/<profile>/extensions/" (In Ubuntu). Most extensions have strange names although some popular ones have their named folder (eg ubiquity is under ‘ubiquity@labs.mozilla.com’. Ditto for foxmarks, listit, moonlight etc). Firefox extensions are also written primarily in Javascript although for UI you need to use XUL.

Misc Stuff – Dealing with Obfuscation

Some times you can see that the code is obfuscated. Some time the intent is to minify the file, some times it is not ! It may even be encoded using some simple scheme like base64. If you find that the code you want to read is unreadble, go to some JS beautifier site. My favorite is JS Beautifier . It is excellent, very flexible with lot of options and can even handle various packers.

Resources

There are lot of good resources available in net.

1. Google Chrome Extensions Tutorial
This page has a pretty good tutorial and a good API documentation . Their page on debugging had lot of useful information .

2. SQLite
If you are a command line person like me, you will want to read about SQLite to browse local storage or databases content. SQLite allows most basic SQL commands although the other commands are non standard (eg .tables, .schema etc) . Check out their docs.

3. Local Storage and Web Databases These are HTML 5 features and resources can be found in many places in the internet. 

Chrome Extension: how to capture selected text and send to a web service

For the Google Chrome extension, I need to capture selected text in a web page and send to a web service. I'm stuck!

First I tried a bookmarklet, but Chrome on Mac seems to have some bookmarklet bugs so I decided to write an extension.
I use this code in my ext:

function getSelText(){
    var txt = 'nothing';
    if (window.getSelection){
        txt = "1" + window.getSelection();
    } else if (document.getSelection) {
        txt = "2" + document.getSelection();
    } else if (document.selection) {
        txt = "3" + document.selection.createRange().text;
    } else txt = "wtf";
    return txt;
}
var selection = getSelText();
alert("selection = " + selection);

When I click on my extension icon, I get a "1". So I think the act of selecting outside the browser window is causing the text to not be seen by the browser as "selected" any more.
Just a theory....
thoughts?

==================================

You can do this by using Extensions Messaging. Basically, your "background page" will send the request to your service. For example, lets say you have a "popup" and once you click on it, it will do a "Google search" which is your service.

content_script.js

In your content script, we need to listen for a request coming from your extension, so that we send it the selected text:

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    if (request.method == "getSelection")
      sendResponse({data: window.getSelection().toString()});
    else
      sendResponse({}); // snub them.
});

background.html

Now in background page you can handle the popup onclick event so that we know we clicked on the popup. Once we clicked on it, the callback fires, and then we can send a request to the content script using "Messaging" to fetch the selected text.

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.sendRequest(tab.id, {method: "getSelection"}, function(response){
     sendServiceRequest(response.data);
  });
});

function sendServiceRequest(selectedText) {
  var serviceCall = 'http://www.google.com/search?q=' + selectedText;
  chrome.tabs.create({url: serviceCall});
}

As you have seen, I registered a listener in a content script to allow my extension to send and receive messages from it. Then once I received a message, I handle it by searching for Google.

Hopefully, you can use what I explained above and apply it to your scenario. I just have to warn you that the code written above is not tested, so their might be spelling, or syntax errors. But those can easily be found by looking at your Inspector :) 

5 google offline productivity apps

We Chromebook and Chrome users love web apps a lot, but we also hate them (occasionally) because most of them only works online.  I have pointed out this being a major drawback of Chromebook and Chrome OS in my previous posts, 9 Reasons why you shouldn’t buy a Chromebook and 5 things Chrome OS should learn from Joli OS.
But things could change.  We gradually see more and more offline web apps emerged in the Chrome Web Store.  In this article I’ll introduce 5 productivity and work related web apps that work without internet connection.  Choices are certainly endless, do let us know your favorite by leaving a comment here!

Offline Google Mail

This is not the first time Google made its services work offline.  In the past it was done through Google Gears.  Earlier this year many of these offline features were pulled down to prepare for a new stage of offline working enabled by HTML5.  This September we begin to see the results and this Offline Google Mail web app is one of them.

It’s not just a hyperlink to Google Mail.  It can run as a background app in your computer and notify you whenever you receive a new mail.  Every time you run it on Chrome it synchronizes the internet and the storage in your computer so that you read the freshest emails even when internet connection stopped.  It also brings a tablet-like user interface which maximizes the use of screen real estate.

This app is far from perfect, though.  A much complained missing feature is access to Contacts when offline.  Contacts are as important as emails for mobile workers.  Some other features on (my) wish list are keyboard shortcuts, caching of attachments, tasks integration…  After all it’s a good start, please work hard Google guys!

Offline Google Calendar

What?  Google Calendar works offline?  Yes, it is a BETA (a.k.a experimental) feature.  Click the top right gear icon in Google Calendar and choose Offline.  You’ll see this pop up window asking you to enable offline mode and warning you about store private data in your computer.

No, RSVPs you made to events when flying on an airplane would not be synchronized immediately (unless there is satellite internet connection, which I cannot afford).  But once you are online again the online and offline copies would be merged.

Offline Google Docs

Offline Google Docs works in the same way as the Offline Google Calendar.  You can enable the offline mode and get everything downloaded to your computer, then work your head off while on the plane or on a remote beach with no phone reception.

Currently Google Docs can only load Google documents and spreadsheets offline.  And they are READ ONLY.  There is no way you can edit them offline.  And you cannot create new documents.  So what’s this for?  Well, I tried loading my itinerary when travelling abroad recently.  At that time I only needed to read the hotel address and transport directions.  But if you are expecting some editing function, you may need to wait until this technology appears.

Offline Calculator: Scientific Calculator

It’s quite annoying to know that a “computer”, which literally means something capable to compute, cannot be used to do simple calculations offline.  But that’s a common question I heard the most when the concept of Chromebook first came out.

There are a few offline calculator for Chrome.  The one I’m introducing is Scientific Calculator.  You can use it to do simple maths as well as using 18 functions (e.g. cosine, exponent etc.) and 8 constants (e.g. Pi and e).

Offline Note Taker: Scratchpad

If you want to take notes while offline, you can’t use Google Docs.  Scratchpad is a convenient tool you should try because it can sync notes back to Google Docs.  You can mark down things (formatting and bullet points supported) offline and have them loaded to the cloud when internet is available.  On Chromebook it appears as a pop up panels just as some other system notifications.

Summary

After writing this short blog post, I found great potential to write more because there are so many useful offline web apps out there.  I’ll continue writing on this topic to make it a series of offline productivity web app reviews.  Stay tuned!

5 offline productivity apps

In Part 1 of my 5 offline productivity apps series, I introduced chrome web apps for email, calendar, documents, note pad and calculators that could be used offline.  This time, I’ll introduce more work-related productivity apps.

MindMapr: Offline Mindmapping Web App

MindMapr is a web app that allows users to create mind maps.  Since it is developed with HTML5 technology, no external plug-ins such as Flash is required.  The user control is simple and intuitive.  Just drag and drop to create and move new nodes and edit them.  Mindmaps could be stored in the browser for later use.  (According to the developer, saving files to desktop computer is not yet implemented)
Watch this video to know how simple it is:
https://www.youtube.com/watch?v=9rB5K1HW_GU
Web Store: https://chrome.google.com/webstore/detail/njkigggmlihigheckmmebgogbgdmllpo

Speech Recognizer

This web app is interesting, yet very useful.  Since version 11 Chrome has a speech recognition function that translate your talk into texts.  This app uses the built-in voice recognition engine in Chrome to read your speech and convert into texts for you.  If you have a long passage to write but cannot type fast, this is what you need.  The app developer has created a Chrome extension, Voice In, which does the same thing, for easy input of text fields on any web site.


Web Store: https://chrome.google.com/webstore/detail/aomjekmpappghadlogpigifkghlmebjk

SpringPad: Save, Organize and Read

I used to be a heavy Evernote user but since a few months ago I have changed to Springpad.  It has a true Chrome web app (unlike the Evernote web app which is a shortcut only).  Now Springpad Chrome web app can be used offline in Chrome browser, which is a great news to people who often clips web pages, make notes and create lists.

Web Store: https://chrome.google.com/webstore/detail/fkmopoamfjnmppabeaphohombnjcjgla

Converter: Conversion Between Units

I used to keep an excel spreadsheet in my desktop computer for unit conversion even when I’m offline.  If I only have Chromebook in hand, I’ll use this Converter web app to do so.  I like it’s simple user interface and that it does not contain advertisements (which are quite common for other free apps).

Web Store: https://chrome.google.com/webstore/detail/gncebhdkjgopkmaklokjadihihfakeoi

Remember the Milk:  Never Forget Your To-do

I think many people heard of RTM before.  I’m a daily user of it, even in the office I use RTM instead of the built-in task manager in MS Outlook.  The best thing about are keyboard shortcuts.  You can quickly add and amend tasks by using the mouse.  For example, click on a task and press “R” to amend the description and “D” to change due day.  It has apps for smartphones so that you can carry your to-do on the go and update wherever you are.  It does not have built-in support for GTD or other management systems, but you can easily implement your own by using tags.

Web Store: https://chrome.google.com/webstore/detail/chdiaibgndcpagmnpkjoelgfkommjbni