Add Custom Web Apps To Chrome's New Tab Page

While custom new tab pages like previously mentioned Myfav.es are great, some of you may prefer Chrome's default for its easy access to Chrome-only web apps. Here's how to add your other favourite pages to Chrome's new tab page.By default, there doesn't seem to be an easy way to just add any old website to Chrome's new tab page. If you want just as quick access to, say, Lifehacker as you do the New York Times or TweetDeck, reader andrew.yeh.10< shows us how:

You can create webapps for the Chrome new tab page even if they're not in the Chrome Web Store.

Make a new folder and create a new text file called "manifest.json" inside it. Fill in the name, description, urls and launch page:

{ "name": "Name_of_web_app", "description": "Description of web app", "version": "1.0", "icons": { "128": "128.png" }, "app": { "urls": [ "http://yourwebsitehere.com" ] , "launch": { "web_url": "http://yourwebsitehere.com" } }, "permissions": [ "unlimitedStorage", "notifications" ] }

Then, in the same folder, save a 128x128 png image as "128.png". This will be used as the web app's icon.

After this is done, go to chrome://extensions/. Open up the developer mode (top right) and "Load unpacked extension". Navigate to the folder you created and hit OK.

Alternatively, you can "Pack extension" by clicking the option and navigating to the folder. This will create an installable .crx file.

Dropbox can keep your personal Chrome web apps in sync between computers.

WATCH MORE: Tech News & Life Hacks

Comments

    Hi,
    Thanks for the post!
    I've tried to follow the instuctions, but I'm seeing this message:
    "Could not load extension from '/Users/Miki/Desktop/IMDb'. Manifest is not valid JSON. Line: 2, column: 1, Dictionary keys must be quoted."

    Any idea on how to correct this?

    This is the code I saved in the manifest.json text file:

    {
    “name”: “IMDb”,
    “description”: “IMDb”,
    “version”: “1.0″,
    “icons”: {
    “128″: “128.png”
    },
    “app”: {
    “urls”: [
    "http://www.imdb.com"
    ],
    “launch”: {
    “web_url”: “http://www.imdb.com”
    }
    },
    “permissions”: [
    "unlimitedStorage",
    "notifications"
    ]
    }

      If you copy/pasted the code from the article, the quote types aren't all the same; their software probably reformatted it. Replace every quote in here with a true double quote and it works perfectly.

      I'll also note that you really don't need the urls line in app if you remove the permissions (and most sites probably won't try to provide you with desktop notifications or need local storage. If they do, then yes, those are needed). So I'd simplify it down even further:

      {
      "name": "iGoogle",
      "description": "A simple web app for iGoogle",
      "version": "1.0",
      "icons": {
      "128": "google.png"
      },
      "app": {
      "launch": { "web_url": "https://www.google.com/ig" }
      }
      }

        Yeah, this system definitely reformats the quotes. Definite problem is the quotes needing to be replaced by double quotes.

    Try http://chromepowered.com/ ... build that app automagically.

    Unsupported Enconding. JSON must be UTF-8.
    this is my code:
    {
    “name”: “Reddit MLP”,
    “description”: “Reddit MLP”,
    “version”: “1.0”,
    “icons”: {
    “128”: “128.png”
    },
    “app”: {
    “urls”: [
    "http://reddit.com/r/mylittlepony"
    ] ,
    “launch”: {
    “web_url”: “http://reddit.com/r/mylittlepony”
    }
    },
    “permissions”: [
    "unlimitedStorage",
    "notifications"
    ]
    }

    Did anyone manage to fix this, saved as UTF8 and made sure it was quoted everywhere but still get the dictionary

    Yes I managed to do this . I opened the file manifest.json in sublime text2 and retyped the quotes, then saved in utf-8.

    Guys, if you did not get it to work then you didn't do what Richard said. Go through it and replace all the quotes with ones you typed. That is what I did and it worked.

    Does anyone know how I can add multiple "apps" with one manifest.json file?

    I just learned that you must now include a manifest version

    "manifest_version": 2,

    Per http://developer.chrome.com/extensions/manifestVersion.html

    I had the same problems, here's the two things fixed those issues:

    1. Make sure to replace the quotes as the editor may not recognize them when you copy and paste.
    2. Since Chrome made it mandatory to mention manifest version a new line with manifest version need to be added like this:

    "manifest_version":2,

    http://developer.chrome.com/extensions/manifestVersion.html

    That should fix the issue.

    If you guys are getting a manifest error, then just add this line after the version line -
    "manifest_version": 2,

    "Make a new folder and create a new text file called “manifest.json” inside it."

    Where do I have create this new folder? In the root chrome folder it didn't work...

    This code worked for me! Good luck!

    {
    "name": "Website name",
    "description": "Description",
    "version": "1.0",
    "manifest_version": 2,
    "icons": {
    "128": "128.png"
    },
    "app": {
    "launch": { "web_url": "http://my_url.com" }
    }
    }

Join the discussion!

Trending Stories Right Now