It’s now very clear that Chrome Browser got huge adoption (I guess the current numbers of active users is around 100M). In case you didn’t know, Google got now an App store to chrome. They basically, take what Apple showed the world in terms of building an Eco system (apps that you, as developer, can monetize on their platform) and trying to do the same with chrome as platform. It’s very smart idea and soon when we will see the chrome OS on tablets – this will be the way to manage your apps. The main APIs that you might want to use are: Browser actions and Page actions.
Browser Actions – you should use browser actions to put icons in the main Google Chrome toolbar. It’s for actions you wish to add to the browser (not specific page). Here are the main tips in order to use it right:
- Do use browser actions for features that make sense on most pages.
- Do use big, colorful icons that make the most of the 19×19-pixel space. Browser action icons should seem a little bigger and heavier than page action icons.
- Do use alpha transparency to add soft edges to your icon. Because many people use themes, your icon should look nice on a variety of background colors.
- Don’t use browser actions for features that make sense for only a few pages. Use page actions instead.
Page Actions – Page actions represent actions that can be taken on the current page, but that aren’t applicable to all pages. For example: translate content on the page, create something from photos in the page etc’. Here are some samples for both type of extensions.
Now, if you are on a site that you think will make sense to put in an extension (due to it’s nice features)… it’s very easy to do it.
All you need are two main files:
- manifest.json – this file is the description of the extension. Some meta info…
- Create a simple deals.html page (in our case it’s all about good deals for cars) that will include the web page you wish to have as an iframe.
Here are the 2 files that show you how to take HGM mobile app and put it in chrome:
manifest.json
{
"name": "Great Deals on New Cars",
"version": "0.2",
"description": "Great the best prices on your new car",
"icons": { "128": "app_icon.png" },
"browser_action": {
"default_title": "Great Deals on New Cars",
"default_icon": "deals.png",
"popup": "deals.html"
},
"permissions": [ "http://www.thecarconnection.com/*" ]
}
deals.html
<!DOCTYPE html>
<html>
<head>
<title>Deals</title>
<meta name="author" content="Ido Green">
</head>
<body>
<iframe src="http://beta.thecarconnection.com/conduit/deals" width="510px" height="700px" border="0px" scrolling="no">
</body>
</html>
After you saved these 2 files in one directory, just go to Chrome and click on ‘Windows’ -> ‘Extensions’. In that page you click on ‘Load unpack extension…’ and point to your directory.
Done.
You should get now a new button and if you click on it you should get something like this:
another easy option is to go and download this extension.
Happy Friday/coding.
Share only with good friends:
Today I did a hangout on air with O’Reilly. It was a good opportunity to dive into some of the aspects of modern web application and check what are the main things we wish to think about when we design, build and ship our apps. Modern web apps are rich, interactive applications.
Ido Green 