Add Custom Web Apps To Chrome’s New Tab Page

9
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{
“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 128×128 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.

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” }
      }
      }

  • 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”
    ]
    }

  • 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.

  • “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” }
    }
    }

Log in to comment on this story!