Organize your tabs with tab groups in Google Chrome

Status
Published
date
Jan 11, 2024
slug
google-chrome-tab-groups-for-developers
status
Published
tags
chrome
organization
summary
Google Chrome tab groups my way
type
Post

Intro

Since the Google Chrome update of tab groups, I use them always. I use the whole default available palette which draws like this:
XGreyXBlueXRedXYellowXGreenXPinkXPurpleXTealXOrange\colorbox{#e2e3e5}{\color{#e2e3e5}{X}} \colorbox{#fff}{\color{#000000}{Grey}} \colorbox{#3871e0}{\color{#3871e0}{X}} \colorbox{#fff}{\color{#000000}{Blue}} \colorbox{#c84031}{\color{#c84031}{X}} \colorbox{#fff}{\color{#000000}{Red}} \colorbox{#eeae3c}{\color{#eeae3c}{X}} \colorbox{#fff}{\color{#000000}{Yellow}} \colorbox{#3c7e40}{\color{#3c7e40}{X}} \colorbox{#fff}{\color{#000000}{Green}} \colorbox{#bf3082}{\color{#bf3082}{X}} \colorbox{#fff}{\color{#000000}{Pink}} \colorbox{#9648eb}{\color{#9648eb}{X}} \colorbox{#fff}{\color{#000000}{Purple}} \colorbox{#357981}{\color{#357981}{X}} \colorbox{#fff}{\color{#000000}{Teal}} \colorbox{#EC9550}{\color{#EC9550}{X}} \colorbox{#fff}{\color{#000000}{Orange}}
I organize my tabs based on colors and a title (if necessary) which works well in my daily work routine. Let’s talk about the details.

Groups

XGrey (tools)\colorbox{#e2e3e5}{\color{#e2e3e5}{X}} \colorbox{#fff}{\color{#000000}{Grey (tools)}}- If you need to organize tools you use daily put them there. It can be for example Github.

XBlue (infra)\colorbox{#3871e0}{\color{#3871e0}{X}} \colorbox{#fff}{\color{#000000}{Blue (infra)}}- Is reserved for infrastructure, e.g Google Cloud.

XRed (watch)\colorbox{#c84031}{\color{#c84031}{X}} \colorbox{#fff}{\color{#000000}{Red (watch)}}- This color is for watching things or recent bugs that you have to look into. To be more precise use them for example for grouping things that you have to look at the corner of your eye e.g. Slack or Gmail. You can always collapse them if you need a full focus.
It’s the first use case for this group, but the second one is for grouping a list of issues that you are or might be working on. If your regular job is interrupted by reports from users it’s a good time to keep them more organized.

XYellow (feat)\colorbox{#eeae3c}{\color{#eeae3c}{X}} \colorbox{#fff}{\color{#000000}{Yellow (feat)}}- If you are working on regular features that’s the right place for that group. Additionally, if you are working on multiple things you can split one feature into multiple logical groups using the name convention (described below).

XGreen (suite)\colorbox{#3c7e40}{\color{#3c7e40}{X}} \colorbox{#fff}{\color{#000000}{Green (suite)}}- Management is done in this place. It’s all things that are not strictly related to the development of a particular feature. Jira and Google Drive are the right things to move them there.

XPink (meets)\colorbox{#bf3082}{\color{#bf3082}{X}} \colorbox{#fff}{\color{#000000}{Pink (meets)}}- If you need organized meetings, it’s a good place, e.g “daily” meetings.

XPurple (etc)\colorbox{#9648eb}{\color{#9648eb}{X}} \colorbox{#fff}{\color{#000000}{Purple (etc)}}- Designed for internal systems that exists in your company. In my case, there are for example internal CMS systems.

XTeal (incubator)\colorbox{#357981}{\color{#357981}{X}} \colorbox{#fff}{\color{#000000}{Teal (incubator)}}- If you do research which is not a specific work in your ticket system you can do it right there. You’re connecting the dots here. Thanks to that you have a separated group that is not mixed with Xfeat\colorbox{#eeae3c}{\color{#eeae3c}{X}} \colorbox{#fff}{\color{#000000}{feat}}. Important note - it’s not research for a particular Xfeat\colorbox{#eeae3c}{\color{#eeae3c}{X}} \colorbox{#fff}{\color{#000000}{feat}}but during the work, you might have tons of ideas and when you feel there’s a little time for that you can group things and move them here.

XOrange (branch)\colorbox{#EC9550}{\color{#EC9550}{X}} \colorbox{#fff}{\color{#000000}{Orange (branch)}}- Reserved for a branching of a particularXfeat \colorbox{#eeae3c}{\color{#eeae3c}{X}} \colorbox{#fff}{\color{#000000}{feat}}. Sometimes you might have a second hypothesis to test so then move things there.

Order

Order is based on a few factors. Usability and density. An important thing is that density is calculated only for one group. Usability has other factors like where tabs are default created or how ‘Open Link in New Window’ works. By default, new tabs are created on the right sidebar and new link windows grow up from a group where we are.
Sidebars usability with a density of their components
Sidebars usability with a density of their components
The highest density is on the left and on the right it’s because new tabs and “Focus” come from the right and the “Watch” group is on the left.
Note: Thanks to that pattern it will be possible to create an automation using Chrome API for grouping tabs based on that formula.

Group arrangement within the order

Now, if you know what usability and density are, we can go into how you can arrange them based on the groups we mentioned before.
The “Extreme left” is reserved for occasional usage, no matter what this group is. For example, you can put tabs with groups for daily meetings (Xmeetings)(\colorbox{#bf3082}{\color{#bf3082}{X}} \colorbox{#fff}{\color{#000000}{meetings)}}. These groups are always closed until you don’t need them. I recommend not putting many groups on the “Extreme left” because we need space for Xwatch\colorbox{#c84031}{\color{#c84031}{X}} \colorbox{#fff}{\color{#000000}{watch}} group.
After “Extreme left” is a Xwatch\colorbox{#c84031}{\color{#c84031}{X}} \colorbox{#fff}{\color{#000000}{watch}}. Keep them as small as possible but have every tab you need in your daily work.
“Middle” is for every group you don’t want to use it heavily at the moment. Keep them ordered as you like.
“Focus” is designed for things that you’re currently working on. This area is very close to the extreme right sidebar side where new tabs are added.
Note: In my case, it’s very often for a Xfeat\colorbox{#eeae3c}{\color{#eeae3c}{X}} \colorbox{#fff}{\color{#000000}{feat}}.

Name convention

Use short names and sometimes shortcuts. For example, if you have many tabs you can use shortcuts to not expand the sidebar even more. The modifier name convention is also helpful here. It’s something that helps if your group expands quickly and you would like to create a new related one. Then I suggest using the formula <name>:<modifier>, e.g. promotion:docs.

Conclusion

I love tabs, I love tab groups even more. Google Chrome didn’t have tab groups for a long time and none of Chrome Extensions works simple and well. Since this update, my productivity has increased a lot, and keep my mind more orderly. Thank you Google Chrome Team!
Please remember it’s a framework that works in my case and I still looking to improve that one, but if you feel it can help you then that’s cool!
Finally framework used
Finally framework used
Ok,TimetoCraft!\textit {Ok,\hspace{1mm}Time\hspace{1mm}to\hspace{1mm}Craft!}
 
 
 

© Patryk Zdunowski 2021 - 2025