Creating a New New Tab Page for Chrome

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>
<span class="tag">&lt;/style&gt;</span>
<span class="tag">&lt;script&gt;</span>

      document.addEventListener("DOMContentLoaded", function() {
chrome.management.getAll(getAllCallback);
});
  <span class="keyword">var</span> <span class="function">getAllCallback</span> = <span class="keyword">function</span>(list) {
    <span class="comment">// TODO: Something Awesome</span>
  };</span>
<span class="tag">&lt;/script&gt;</span>

</head>
<body>
<div id="apps">
<span class="tag">&lt;/div&gt;</span>

</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");
  <span class="keyword">var</span> img = <span class="keyword">new</span> Image();
  img.className = <span class="string"><span class="delimiter">&quot;</span><span class="content">image</span><span class="delimiter">&quot;</span></span>;
  img.src = find128Image(extInf.icons);

  <span class="keyword">var</span> name = document.createElement(<span class="string"><span class="delimiter">&quot;</span><span class="content">div</span><span class="delimiter">&quot;</span></span>);
  name.className = <span class="string"><span class="delimiter">&quot;</span><span class="content">name</span><span class="delimiter">&quot;</span></span>;
  name.textContent = extInf.name;

  app.className = <span class="string"><span class="delimiter">&quot;</span><span class="content">app</span><span class="delimiter">&quot;</span></span>;
  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.

View Source | Make a correction | Correction history

I lead the Chrome Developer Relations team at Google.

We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.

Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.

I love to learn about what you are building, and how I can help with Chrome or Web development in general, so if you want to chat with me directly, please feel free to book a consultation.

I'm trialing a newsletter, you can subscribe below (thank you!)

Book a consultation

See Also

Tags