I made a Chrome Extension

The other week I got a new Chromebook. Mainly just to see what the user experience was, but I surprised myself by liking it a lot more than I expected I would. But that’s another story.

I started being more interested in Chrome Apps, which work in Chrome on a regular PC or Mac as well, and started looking into the development process of Chrome Apps and Extensions. Pretty cool stuff. So here is my first extension, Chrome Apps Shortcut.

https://chrome.google.com/webstore/detail/chrome-apps-shortcut/eobiahopcndogkgfjedmneomoghnpjpp?hl=en-US&gl=US

It barely does anything. Literally a one liner in terms of code. But I made it as a solution to an actual problem I had. Your Chrome Apps are displayed in a special page in the Chrome. If you use the bookmarks bar, you can add a shortcut to that location there. Or, if you use the default new tab page, there’s a shortcut there. I don’t use either of those things. I use a custom new tab page. So the only way to open the Chrome Apps page was to type in “chrome://apps” in the url field. Furthermore, because this is a custom url scheme, most methods of creating a shortcut to a web page do not work with that. At least none of the methods that I usually use. I looked for an extension that would do what I wanted, and there wasn’t one, so I made this.

All it does is put an icon up in the extensions area at the top of Chrome. You click it, it opens the Apps page in a new tab. The Code to do this is here:

[code language=”javascript”]chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
code: chrome.tabs.create({url:”chrome://apps”})
});
});[/code]

And even most of that is boiler plate. I just added the chrome.tabs.create({url:"chrome://apps"}) part.

There’s also the manifest, and all the icon files…

[code language=”javascript”]{
“manifest_version”: 2,
“name”: “Chrome Apps Shortcut”,
“short_name”: “Chrome Apps Shortcut”,
“description”: “Opens the Chrome Apps tab.”,
“version”: “0.0.1”,
“minimum_chrome_version”: “38”,

“icons”: {
“16”: “icon_16.png”,
“48”: “icon_48.png”,
“128”: “icon_128.png”
},
“browser_action”: {
“default_icon”: “icon_48.png”
},
“background”: {
“scripts”: [“background.js”],
“persistent”: false
},
“permissions”: [
“tabs”,
“https://ajax.googleapis.com/”
]
}
[/code]

And then in order to publish, you have to set up your Chrome Developer Account ($5 one time fee) and create screenshots, descriptions, blah blah blah.

All told though, from concept, to published in store, was maybe 2-3 hours. Most of that was looking up how to do stuff.

I want do dive more into packaged apps next. There are some great possibilities there. Learn more here:

https://developer.chrome.com/home

This entry was posted in General, JavaScript, Technology. Bookmark the permalink.