This extension adds number badges to tabs when CTRL-ALT is pressed.

Latest Version

Version
1.5.2
Update
February 19, 2013
Size
5.55MiB
Developer
Category
Users
52
Rating
2.33333 ★
Manifest Version
2
Web Store Status
Languages Support
English
See more
Permissions
Tabs
See more

Tab Badges Extension

Tabs a great resource that let you have all your pages consolidated into one window. However, tabs get tedious to navigate when there are a lot open. This extension will add number badges to the tabs' title as such: \" {#} - original_title \". The purpose of the number badges is to easily identify the index of the tab you would like to navigate to by using keyboard shortcuts, such as CMD-# on MAC and CTRL-# on WINDOWS.

To use this extension:
--------------------------------
1. Download the extension.
2. Open a couple of tabs and navigate to web pages.
3. Click on the badge icon next to the address bar to enable tab badges.
4. Press CTRL-ALT while on any of the tabs to toggle state of badges on all tabs.
5. Click on the badge icon next to the address bar to disable tab badges if you want to disable CTRL-ALT to toggle badge state.
Tab badge states can be toggled. If you press CTRL-ALT while the badges are not visible, they will be displayed. If the badges are visible, they will be hidden.

Note: This extension only works on tabs that have a web page loaded (so if you create a new tab but do not navigate to a website, CTRL-ALT will not show badges on that page).
Also make sure to close the open tabs before downloading the extension to have badges show up on them :)

Further development
-----------------------------

Please let me know if you would like to add anything to this extension! I would be glad to help out. Feel free to email me at [email protected]

Improvements
-------------------

Version 1.1 :
The badge state is disabled initially as indicated by a red badge color. To enable click on the extension, changing its color to the original black badge. Then the alt-ctrl keys are activated to toggle between badged and unbadged tab titles. Remember, to activate click on the *extension* (the black badge next to the address bar). To disable re-click on the extension.

Version 1.2 :
Bug Fix: When multiple instances of browser windows are open, turning the extension off/on may or may not disable/enable the keyboard shortcut (ctrl-alt) to show/hide badges in other windows. Now, if the extension is off or on, all browser windows will have the same behavior.

Version 1.3 :
Feature addition: keeps tabs persistent when opening a new tab and refreshing an existing tab.

Version 1.4 :
Adds a new badge state (temporary) that will allow you to see the badges as long as the ctrl key is pressed. When the ctrl key is released the badges wil disappear. You can activate this badge state by clicking on the extension icon twice until it turns blue. The red (off) state and the black (on) state still have the same behavior as version 1.3. Please see the new attached picture for more information on the different states.

Also, this version fixes some race conditions in which tab titles did not change when you activate/de-activate badge using ctrl-alt quickly. In order to fix this, I had to lag the change in the tab title by a fraction of a second. Thus, when you activate the badges using ctrl-alt (in the persistent case, black badge color) and ctrl in the temporary badge state (blue badge color) you will have to do it a little slower (specifically 350 ms ;)) than usual. Patience is a virtue :D

Any feedback is highly appreciated!

Version 1.5 :
Bug fix: Temporary badge state didn't use to work well on Windows platform because of the way the keydown events are fired in chrome.

Version 1.5.1 :
Bug fix: Much more efficient way of handling keydown events that used to caused inconsistent behavior in showing/hiding badges.

Version 1.5.2 :
Bug Fix : Store badge state when chrome is closed and reopened so that the image of badge state reflects correct keyboard interaction. Thanks to Pablo Cantero for pointing this out.
Read more

Source Manifest.json

{"update_url":"http://clients2.google.com/service/update2/crx", "name": "Tab Badges", "version": "1.5.2", "manifest_version": 2, "description": "This extension adds number badges to tabs when CTRL-ALT is pressed.", "icons": { "128": "images/icon.png" }, "browser_action": { "default_title": "CTRL-ALT to see your badges!", "default_icon": "images/off.png" }, "background": { "scripts": ["js/badges.js"] }, "web_accessible_resources": [ "images/icon.png", "images/off.png", "images/temporary.png" ], "content_scripts":[ { "matches": [""], "js": ["js/capture_keyboard_events.js"] } ], "permissions": [ "tabs" ]}
Read more

How to download and manually install Tab Badges extension for Chrome

Looking for a way to install Tab Badges extensions for Chrome, you can search for them in the Chrome Web Store, clicking the "Add to Chrome" button, and following the straightforward process.

However, you may need to install Tab Badges extensions manually, this article outlines two simple methods to effortlessly install Tab Badges extensions, whether they come as unpacked folders in compressed formats like .zip or as .crx files.

Method 1: Download Tab Badges extension and manually install through Drag &Drop

If you ever need to manually install a Tab Badges extension for Chrome, don't worry, it's a simple process. Just follow these easy steps, and you will have your extension ready to use in no time.

Step 1: Download the Tab Badges Extension by clicking the "Download CRX" button on the website.

Look for the Tab Badges extension you wish to install. Go to the website and download the Tab Badges extension package, which is usually a .CRX file and comes in a zipped file. Here ".crx" file is the format for Tab Badges extension that contains all the data.

Step 2: Extract &Arrange Files

Once the file is downloaded, extract that file into its own folder. Similarly, give that extension files a permanent home. In other words, keep it in a folder that you don't accidentally delete it because these files will be needed to make that extension work.

Step 3: Go to the Chrome Extensions Page

Open Google Chrome and in the address bar, type chrome://extensions; it will open the Google Chrome extensions page. Make sure that "My extensions" is selected in the sidebar.

Step 4: Drag and Drop the Extension

Now, go to the folder where you extracted the Tab Badges extension and drag &drop the extension file from there anywhere onto the extension page within Google Chrome.

Step 5: Complete the Installation

Once you drag and drop the extension file, follow the steps that Google Chrome takes you through. Similarly, if the extension file is of .crx file format, you will be required to review the permissions and then add the extension.

Now, you can manage that added extension as you would like to with any other Chrome extension that you added through Chrome Webstore. Its icon will also appear in the Google Chrome Menu on the right side of the address bar once you activate it.

Method 2: Download Tab Badges extension for Chrome and install in Developer Mode

This is another method to install Tab Badges extension manually, but the twist is that here, you install by enabling the developer mode option provided in Google Chrome. This mode is commonly used for testing extensions or running unpublished tools.

Step 1: Download the Tab Badges extension file

Select and download the Tab Badges extension by clicking the 'Download CRX' button on the website.

Step 2: Extract the downloaded contents

Convert the file to a ZIP file if it is in CRX format then extract the Tab Badges extension zip file or folder that you downloaded. Make sure you extract it using the same folder name and keep it safely in another folder, so you don't delete it by mistake. The extracted folder will be needed to keep your Tab Badges extension running.

Step 3: Open Chrome Extension Setting Page

In the address bar of Google Chrome, type chrome://extensions and open the Chrome Extension Page.

Step 4: Enable Developer Mode

After opening the Chrome Extension page, look at the top right side, and you will find the toggle option of "Developer mode."Simply enable that developer mode option.

Step 5: Load the Unpacked Extension

Once you enable the developer mode option, you will see the menu of Load Unpacked, Pack Extensions and Update. From that, select the option "Load unpacked."

Step 6: Select the Extension Folder

Once the pop-up opens upon clicking Load unpacked, select the Tab Badges extension directory and click on the "Select Folder "button.

Step 7: Confirm and Install

After you select an extension folder of a Google Chrome extension you're installing manually, confirm its installation for the final time and let the installation complete.

Conclusion

Here we've made a step-by-step guide on How to manually install Tab Badges extension in 2 ways. We hope this guide proves helpful.

Similar Extensions

User reviews

icon

the slunch (ID: 000000a81ddc7cda) Voted 1 ★ - Updated 08/07/2018 Does not work.

icon

Darrell Davis (ID: 000000d83d80d57b) Voted 3 ★ - Updated 03/27/2013 Does not work on pinned tabs. Also, as already stated ctrl/alt does not work. A good start. Wouls like to see red circles (like most other badges) that appear in open tabs and pinned tabs. Keep up the good work and I'll update my rating.

icon

Pablo Cantero (ID: 000000b152101e8f) Voted 3 ★ - Updated 01/27/2013 It would be awesome if the extension keeps the state when I close and open Chrome. Now, if I close Chrome then open it, I have to click in extension badge until the black color appears (CTRL + ALT doesn't work properly). Keep the good working! Cheers