React repository discovery extension and web app

I went looking for a Chrome New Tab extension with React related content and found none, so I decided to create my own. An easy and obvious source of related data is the GitHub API, so I decided to show popular, new and fresh public repos tagged with the react topic.

Not too advanced or complex, but a nice little side project.

Since a New Tab in Chrome is basically a web page, I also decided to host it. This also gave me a chance to test out the free SPA hosting provider surge.sh, which was a smooth operation! Definitely worth checking out if you need a quick and free way to host an SPA. Even custom domains are supported in the free version!

Get it here

• Chrome New Tab Extension
• Live web app

Source code

Check out the GitHub repository.

New Tab How To

Creating a Chrome New Tab extension with React is really easy. Just add a manifest.json file overriding the newtab url to index.html.

{
  // ...
  "chrome_url_overrides": {
    "newtab": "index.html"
  },
  // ...
}

If you're using Create-React-App, you can add the manifest.json file in the public folder. Your build folder can then be loaded as a Chrome Extension locally, or zipped and published in the Chrome Web Store.

Custom sub-domain for surge.sh

When publishing via surge, enter your own sub-domain URL instead of the provided one. In my case react.jnystad.no.

Then add a CNAME record matching the sub-domain in your DNS settings pointing at na-west1.surge.sh. Done!