Creating a New New Tab Page for Chrome - Tales of a Developer Advocate

For a long time Chrome Extensions have had the ability to create a new tab page in side Chrome. An excellent example of this is SpeedDial.

With the introduction of the new Chrome Web Store there is a new boy in town. Apps. Apps are installed on to the New Tab Page and if your extension doesn’t handle them, then you need to update it because users will not be able to run the new apps that they have installed or purchased.

The good news is that for a little while now Chrome has had a Management API. The API gives you specific access to a list of all the Apps and Extensions that are installed in to a users browser.

So, without further ado, lets make an awesome Chrome Extension New Tab Page with an amazing App Launcher!!

As always with an extension, you start with a manifest.

{
    "name": "The New App Launcher",
    "description": "Launches apps, the good way!",
    "version": "0.0.0.1",
    "permissions" : ["management"],
    "chrome_url_overrides" : {
        "newtab": "newtab.html"
    }
 }

Done, that was simple. Notice that we defined a permission – management, and we also defined an object called “chrome_url_overrides”, specifying a new url for the New Tab Page.

Next step, create the “newtab.html” file – we will keep it simple for now – just a simple skeleton.

<html>
  <head>
    <style>

    </style>
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        chrome.management.getAll(getAllCallback);
      });

      var getAllCallback = function(list) {
        // TODO: Something Awesome
      };
    </script>
  </head>
  <body>
    <div id="apps">

    </div>
  </body>
</html>

It is pretty standard HTML, with a simple call to a Chrome specific API called chrome.management.getAll – which as you guessed gets a list of all the Extensions and App installed on the your system. Like all methods in the extension subsystem, getAll doesn’t return data directly, rather the data is returned via a callback defined by you. The callback will recieve a list of ExtensionInfo objects

Lets do something with this, because as it stands it is just a blank page. Lets populate the “apps” div with some content by padding out “getAllCallback” with some functionality.

var getAllCallback = function(list) {
  var apps = document.getElementById("apps");
  for(var i in list) {
    // we don't want to do anything with extensions yet.
    var extInf = list[i];
    if(extInf.isApp && extInf.enabled) {
      var app = document.createElement("div");

      var img = new Image();
      img.className = "image";
      img.src = find128Image(extInf.icons);

      var name = document.createElement("div");
      name.className = "name";
      name.textContent = extInf.name;

      app.className = "app";
      app.appendChild(img);
      app.appendChild(name);
      apps.appendChild(app);
    }
  }
};

var find128Image = function(icons) {
  for(var icon in icons) {
    if(icons[icon].size == "128") {
      return icons[icon].url;
    }
  }

  return "/noicon.png";
};

Again, pretty simple – the output should look similar to the attached. Pretty nice, but there is one small problem – nothing is clickable, we can’t launch anything. That is pretty simple to solve thanks again to chrome.management API. The API has a simple method called “launchApp” which at its simplest takes an extension ID as its parameter.

Lets get that added so we have a fully functioning New Tab Page and App launcher. We will just add a click handler to the image, no anchors needed.

img.addEventListener("click", (function(ext) {
    return function() {
        chrome.management.launchApp(ext.id);
    };
})(extInf));

And that is it. We have a Chrome extension that provides a New Tab Page with app launcher functionality! Awesome

The code for this post is on Github, so fork away and have a play and let me know if you create an awesome extension.