How I built a small and productive Scroll Percentage ↕️ Chrome Extension

I created a chrome extension to help myself and others better estimate the time and length of an article.

Here is a quick preview

This chrome extension was inspired by an idea from Chris coyer in his short article How I Put the Scroll Percentage in the Browser Title Bar

I read many articles online. Some are short and some long (like academic papers). While there are websites like medium.com that help me estimate the time it takes me to read an article, there are still improvements I can make to increase my reading efficiency and general productivity.

If I'm reading an article and someone needs my attention, with a short glimpse on the active tab I can see how much do I still left to read and I can decide if I'm pausing to address that person or telling him that I need a few more minutes to finish.

In a different scenario, where I explore some new domain and read multiple articles simultaneously while jumping between them, I can easily see on each tab how much I already read and how much is left. For example, the clear view of how much is left in each article can affect my decision to go to the article that has left the smallest amount of percentage and finish it.

Here are some screenshots of how I planned it to work.

Here is a technical description of how I built it.

The main feature of the extension is a tiny JavaScript block injected into the article page that calculates the scroll position percentage out of the whole page length on each scroll event.

const originalTitle = document.title;

window.addEventListener("scroll", () => {
  let scrollTop = window.scrollY;
  let docHeight = document.body.offsetHeight;
  let winHeight = window.innerHeight;
  let scrollPercent = scrollTop / (docHeight - winHeight);
  let scrollPercentRounded = Math.round(scrollPercent * 100);
  document.title = `(${scrollPercentRounded}%) ${originalTitle}`;
});

The recalculation also works if the page has a lazy loading mechanism.

The page title updated with the number, and as we know, the page title is also seen on the tabs.

I also created a pop-up that I can access with a click on the extension icon on the toolbar. In this pop-up, I can manage a list of websites I want this functionality to be active on. The extension updates the list of websites in the synced chrome storage, so when you log in to a new instance of chrome (On a different computer for example), the list is already there.

Also a small, but essential UX feature is that the extension icon is changing between active and disabled states for every tab, based if the website is in the supported website list.

Download Link:
Scroll Percentage in Tab Title Extension

This project is open-source. I encourage you, junior, and senior developers to participate and contribute to this project. Add feature requests, create pull requests, star ⭐️, fork, and share it to all people you think can benefit from it.

GitHub link:
https://github.com/dimshik100/Scroll-Percentage-in-Tab-Title-Chrome-Extension

More chrome extensions I developed:
Passive Aggressive Email Translator