This is an extension that will replace your new tab into a more productive and useful interface! The interface features an aesthetic dark material theme, a news feed (from the News API), a list of customizable links on a sidebar, a place to jot down quick notes that can sync across devices, and a nice date/time display.

The extension is now on the Mozilla Extensions Workshop! Just go to this link and install the extension :DD

The app requires Nodejs v.16+. To install the app, run yarn install. This should install all dependencies and allow you to run the dev or build scripts.

yarn start runs webpack with a file watcher, which means that all changes will trigger a rebuild. Follow this guide to install a temporary add-on (select the manifest.json file). When webpack rebuilds the app, simply refresh your new tab page and the changes that you have made should show up.

There are certain limitations that you must be aware of when working with an extension! You cannot use any templating engine, which rules out a lot of libraries. There are workarounds, but for my simple app it was more of a hassle than it was worth. That means a lot of the UI modifications I do are using jquery (I know, pretty archaic haha), but I still try to stick to modern coding paradigms and file splitting.

To build the extension, run yarn build. This command should run the production build of webpack and zip the output files into atab.zip, which is the version that is uploaded to the mozilla extensions workshop.

All icons used in this app are from Google Material Icons. The list of icon names that is stored in src/icons.json are from github/google: material-design-icons/font/MaterialIconsOutlined-Regular.codepoints.