Better NewTab

Table of Contents

1. About The Project
   • Built With
2. Usage
3. Roadmap
4. Contribute
5. Report a Bug

Built With

md-block and spotify-github-profile.

Please Checkout these Amazing Repos of @leaverou and @kittinan.

Back to top

About The Project

Just a simple Chromium extension for a custom New Tab page displaying your currently playing song in Spotify, with the ability to set a custom background image and without unnecessary elements seen on Google's New Tab page.

I originally developed this extension back in 2021/22 and recently rediscovered it on my old HDD, deciding to publish it.

Note

Since I wrote this back in 2021/22, the code is a bit messy and not well-written. There are certainly better ways to write something like this.

If you have any questions about the extension, DM me on Discord: jettcodey.

Back to top

Usage

1. Download the repo:
   • Clone via git clone https://github.com/Jettcodey/Better-NewTab
   • Or download as a zip file.
2. Open your Chromium-based browser and navigate to the Extension Settings. Enable Developer Mode.
3. Visit this repo and click the Connect With Spotify button.
4. After connecting your Spotify account, you will be redirected to a site to create your custom Markdown theme.
5. Select the options Cover Image, Interchange Artist with Song name, and Open in Spotify for the best results.
6. Choose any theme you like; the recommended theme is natemoo-re.
7. Open the newtab.html file in any editor and replace the links in these lines with the appropriate ones from the Markdown text provided by the website:

   <div id="playingnow">
     <md-block rendered="content">
       <a href="https://spotify-github-profile.kittinanx.com/api/view?uid=SPOTIFY_USERID&redirect=true">
         <img id="spotifyImage"
           src="https://spotify-github-profile.kittinanx.com/api/view?uid=SPOTIFY_USERID&cover_image=true&theme=natemoo-re&show_offline=true&background_color=121212&interchange=true&bar_color=00ffe1&bar_color_cover=false"
           alt="Spotify Now Playing">
       </a>
     </md-block>
   </div>

8. Open the newtab.js file in any editor and replace the link in these lines with the appropriate one:

   function refreshSpotifynowPlaying() {
     var img = document.getElementById('spotifyImage');
     var currentTime = new Date().getTime();
     img.src = 'https://spotify-github-profile.kittinanx.com/api/view?uid=SPOTIFY_USERID&cover_image=true&theme=natemoo-re&show_offline=true&background_color=121212&interchange=true&bar_color=00ffe1&bar_color_cover=false&_=' + currentTime;
   }
   setInterval(refreshSpotifynowPlaying, 10000); 

9. Select Load Unpacked and navigate to the downloaded repo folder. Select it.
10. Open a new tab. You'll receive a popup informing you that the extension has made changes and giving you the option to revert those changes (i.e., to keep Google search). Click Keep changes to proceed.

Note

After adding the extension, an error occurs in the md-block.js file, which can be ignored.

Back to top

Roadmap

• Clean up the code.
• More...

Back to top

Contribute

Contributions are welcome and needed.

Back to top

Report a Bug

See the open issues for a full list of proposed features (and known issues).

Always report bugs and issues in English! If you report in any other language, your issue will be ignored and closed.

Back to top