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

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.

1
2
3
4
5
6
7
{
// ...
"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!