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

Dima Vishnevetsky — Mon, 01 Jun 2020 08:47:33 +0000

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

Chrome Tab Hover Card Images

Dima Vishnevetsky — Tue, 07 Apr 2020 11:14:27 +0000

You can see a preview of the page by hovering on its tab.

Yes, you read it correctly.

This is the thing you didn't know you always wanted.

If you are like me and have at least 34 tabs open at any given time, you probably find it somewhat challenging to navigate between them.
About a year ago, Google added a new experimental feature (flag) to Chrome that shows an image preview of a site when you hover its tab. These "Tab Hover Card Images" are similar to how Microsoft implements them in the Edge browser on Windows 10.
This functionality is pretty stable now, and I have been using it for about half a year already.

So let's get straight to the tutorial because I know you want it.

First, enable the cards

Fire up Chrome
Type "chrome://flags" into the address bar, then press the "Enter" key
type "Tab Hover Cards" in the search bar

Or you can enter the following command
chrome://flags/#tab-hover-cards
in the address bar of the browser and hit "Enter".

Here we have our flag setting.

From the drop-down menu, a list appears on the right side of the screen and choose either Enabled to turn it on or Disable to turn it off.

You might wonder what those "Enabled B" and "Enabled C" options. They are in charge of the time it takes for the card to appear after hovering the pointer over the tab.

If you decide to use only this flag, It will look something like this.

But we are here for the cool stuff, so let's add the image preview as well.

enter the following command
chrome://flags/#tab-hover-card-images
in the address bar of the browser and hit `"Enter".

Here we have our flag setting again.

From the drop-down menu, a list appears on the right side of the screen and choose either Enabled to turn it on or Disable to turn it off.

Finally, tap on the "Relaunch" button to reopen the Chrome browser.

And here we have it, a preview of every tab we have in a hover of a mouse.

The current tab will not show a preview image in Tab Hover Cards since it is already showing in the browser window.

DEV Community: Dima Vishnevetsky

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

Chrome Tab Hover Card Images

You can see a preview of the page by hovering on its tab.

Yes, you read it correctly.