Launching Apps from your Bookmarks Bar

About a month ago, I met a couple Cr-48 users who were using their Bookmarks Bar as a launcher for their favorite websites and web apps that they’d bookmarked, rather than using the icons for the apps they’d installed on their new tab page. They had removed the title next to each bookmark icon, so there was just a long line of icons across the Bookmarks Bar. I thought it would be convenient to be able launch both your bookmarked websites and apps installed from the Chrome Web Store all from the Bookmarks Bar.

I created a really simple extension called Apps to Bookmarks Bar to do this using the Bookmarks and Management APIs that are part of the Chrome Extensions framework.

Let’s take a look at how it’s made. First, every extension needs a manifest.

  "name": "Apps to Bookmark Bar",
  "version": "0.1",
  "description": "Adds an icon to the bookmark bar when you install an app from the Chrome Web Store.",
  "background_page": "a2b.html",
  "permissions": ["management", "bookmarks"],
  "icons": { "16": "a2b16.png",
             "48": "a2b48.png",
             "128": "a2b128.png"}

The parts that are most important here are the permissions and background_page sections. In the permissions section, we need to specify “management” and “bookmarks” so the extension can use those two APIs.  The Management API is used for interacting with the list of apps and extensions that a user has installed, and the Bookmarks API is used for interacting with a user’s bookmarks. We’ll look at how this extension is using both of those APIs in a little bit.

In the background_page section of the manifest, we’re specifying the name of an HTML file, “a2b.html”.  A background page is an HTML file that runs in the extensions process and exists for the lifetime of the extension. In this case, we’re just using it to hold our script for adding apps to the Bookmarks Bar.

Here’s what a2b.html looks like.

<!DOCTYPE html>
  <script src="a2b.js"></script>

It’s just including a script, which is doing the interesting (though still pretty simple) stuff. {
  var id;
  if (info.isApp) {
    // Using an id of 1 is a "reasonably safe" way of getting to
    // the Bookmarks Bar according to
    chrome.bookmarks.create({'parentId': '1',
                             'url': info.appLaunchUrl });

This script adds a listener for the onInstalled event. That means it will execute any time an app or extension is installed. But we’re only concerned with apps, so then we check to see if the event was triggered by an app.

The next line is actually the part that took the longest to figure out. I wanted to be able to locate the “Bookmarks Bar” folder within the BookmarkTreeNode objects that are returned from getTree(). It ended up being trickier than I expected to find a clean way of doing this. At first I thought I’d just look for a node whose title was “Bookmarks Bar,” and that worked on a Mac, but on Windows, it’s actually “Bookmarks bar.” It would be easy enough to work around that, but what if the browser’s language settings were set to something other than English? So I looked for another approach, and I came across this feature request. The feature request acknowledges that there’s not a simple way of finding the Bookmarks Bar folder, but that it’s reasonably safe to rely upon the Bookmarks Bar folder having the id of 1,  so that’s what I’m doing. Using chrome.bookmarks.create, we’re creating a new bookmark in the Bookmarks Bar, with the app’s launch URL as the bookmark URL. We’re not specifying any title for the bookmark, so it will just show up as an icon. The icon will actually just be the generic one until you visit the app, and then it will use the favicon.

So that’s it! I may try to expand on this to have an option to also create bookmarks for apps you’d installed prior to installing the extension, and possibly to handle cases where you disable or uninstall an app.  All the code is also on GitHub, so you’ll be able to find any updates there too.

This entry was posted in Uncategorized and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s