How to Correct Tab Snooze Extension Display

The current version of the Chrome Tab Snooze Extension (version 2.0.17 at this writing) was released in June of 2019, and even though it is over two years old, appears to have worked in all of that time.

However, a recent update to Google Chrome – perhaps to Chromium, as it appears to also affect Microsoft Edge – seems to mean that the extension has gone a bit off the rails.

Unfortunately, though the developer web site seems to be online, and even asks for contributions to a Pro version, there does not seem to be any response. Luckily, it’s not all that difficult to make it usable again, though it does take a bit of work.

The problem with this version of the extension is that it does not display the entire popup/popout when clicking on the toolbar icon. Typically you would see a grid of icons, which would normally show rather nicely formatted, something like this…

Tab Snooze Full Screen
Tab Snooze Full Screen

Unfortunately, they are instead showing like this…

Tab Snooze Cropped Screen
Tab Snooze Cropped Screen

Not only does it not look great, it’s not terribly useful. It is worth noting that the functions you can see do work, but if you want to use the middle column, they are difficult to access, and the right column? Not a chance. Also, that bottom section is just a mess.

The solution is to make a couple of small edits to the source code for the extension that will make it display better on your screen. At least, it works on my screen, and hopefully it will on yours as well.

To make these changes, we need to access the dangerous-sounding (and yes, potentially damaging) Developer Mode.

To get there, click on the settings menu, which is the three dots in the upper right corner of your browser. These are vertical in Chrome and Horizontal in Edge. In Chrome, select More Tools and then select Extensions. In Edge, select Extensions. This opens a new tab that allows you to Manage Extensions. You can also click the small icon that looks like a puzzle piece in your toolbar or just enter chrome://extensions/ or edge://extensions/ in the address bar.

Now that we are there, look for the option that says Developer Mode. In Chrome, it is in the top right, while in Edge it is in the lower left. Make sure this is “on”, which means the little slider is to the right. However, you probably want to turn it “off” when done and everything is working, as that is a more secure option.

Having the Developer Mode on allows you to see an option to “Load Unpacked”, which is just a fancy term that means to load an extension from your disk, rather than from the Chrome store, and that is what we will need to do. But first, you will need to install the extension from the store.

This process – really any process of installing an extension into a Chrome-based browser – installs it to disk. By default in Windows, that means you can then find the extension and if needed (which we now need) can make changes to it, and using the “Load Unpacked” option, we can reload it, and that is what we will do next. After loading the extension from the store, you need to locate the extension on disk. Note that these instructions are specific to Google Chrome. If you use Microsoft Edge, replace Google\Chrome with Microsoft\Edge instead, but the rest of the path should be the same.

Once you have done that, you will need to find the directory containing this version (in this case 2.0.17_0), and under that the static directory, and within that the js directory, which contains the file we need to modify, specifically main.b5e01f6e.chunk.js. It is this file you will want to open in a text editor. Do not use a Word Processor such as Microsoft Word, as it will add formatting that you do not want in the file. Use something like Notepad++ instead.

Now that you have the correct file, there are two sections that need updating.

First, search for width: 50px. This is the section that changes the width of the popup/popout. In order to change this, all you need to change is the number (that is, 50). Do not change or remove anything else. It should instead read something like width: 165px. I prefer 165px for my display, you may like something else, but feel free to make it whatever you like to suit your needs, after all I don’t have to look at your system and you don’t have to look at mine.

Second, search for font-size: 17px;\n flex: 1;\n. This is the section that affects the last line, and specifically the part that displays the text Sleeping Tabs. By removing the at the flex: 1;\n end it should then display properly.

Finally, save this file. Do not Save As, do not change the name and do not change the location. Once saved, go back to your Manage Extension screen in your browser (Chrome or Edge) and Load Unpacked. From here, you will need to navigate to the directory that you are loading. This should be the version – that is 2.0.17_0 – and choose that in order to load the extension from there. At that point, you should start seeing the changes.

If you have any problems you can always remove the extension entirely, or make more changes and reload again, either from the disk or simply start over from the store. And don’t forget to turn off Developer Mode when you are done, since it is a security risk.

As always, there is no guarantee that this will work. It works on my system. In fact, those images up top are from my own browser, and all functions appear to work correctly, including date and time selection and snoozed tabs coming back up as they should. But no other changes are made, and no warranty is expressed or implied.


Posted

in