Google Chrome extension for school

Since the release of Google Chrome, I have been waiting for its extra features which has known to be extensions (similar to Firefox addons). I have to admit that Google has made the Chrome extension development process very convenient to web developers since there is not much difference between developing web pages and Chrome extensions, all you need to know is HTML, CSS and Javascript and a bit of API. By making such a good decision, Google has indeed opened the gate for millions of developers to contribute and enhance the usability of Chrome browser.

Being interested in web development, I have decided to give it a shot to try coding a simple Chrome extension that might be used in my school. I have come up with the idea to create an extension that makes it easy for students to check the appearance of other students by inputing the name and student ID. The pictures are taken from one of school's website with the URL pattern matching.

The following is what I did:

1. Create a manifest.json file
2. Create HTML page that shows the UI of the extension (known as popup)
3. External javascript file (which will be linked with the HTML

Yes, it's simple as that. Now let's take a look at the code:

manifest.json

{
"name": "Find your classmates",
"version": "1.0.1",
"description": "Created to tackle the issue of classmates knowing their teammates name but not knowing how they look like. Useful for evaluation",
"browser_action": {
"default_icon": "rplogo.jpeg",
"popup": "rpavatar.html"
},
"icons": { "48": "rplogo.jpeg",
"128": "rplogo.jpeg" },
"permissions": [
"tabs"
]
}

Google Apps Script in managing your work

Currently, I'm running this Interest Group in my school about Open Source and to ease the task of it, I use Google Apps to create forms and broadcast them around school. Students who are interested in joining the group will fill in their personal information and contacts. This data then goes to the spreadsheet and with Google Apps Script, I have automated the task to publish information on the website created with Google sites. There are few tutorials on the Google website which you can check out. In this post I would like to share how I have managed to integrate all these services together.

Note: As until now, Google Script seems to be not available to normal gmail accounts. However, you can easily create your own domain account with the email of your school or company.

The following is my own script to update a ListPage on the Google Sites. Things you need to do before-hand:

1. Create your own form with basic information (this will automatically create a spreadsheet for you). You can see how my spreadsheet looks like on the above picture.
2. Create a Google Site and give it a name.
3. Create a page and choose ListPage as a template.

Now we shall begin coding the script. In order to write scripts, go to Tools > Script > Script Editor. This will bring up a script editor which allows you to execute javascript code on the server. Yes, Javascript as a server-side language. The editor is quite user friendly as it has highlighting and code suggestions.

This is just a basic example of how you can use Google Apps Script. The whole API can be found on Google, it provides access to Google Service such as Calendar, Contacts, Gmail, Google Translate, Spreadsheet. Besides, you can use it with external applications as well (using UrlFetch, XML and SOAP services).