Using Chrome’s built in developer tools to customize Gmail’s priority inbox

I have found a quick and simple way to organize Gmail's  Priority Inbox to have special sections showing only unread messages organized by label. Now mine looks like this:

Now I have an easy, minimal and efficient way to manage my different accounts from one screen.

How this works is that I have separate accounts for work, school and personal email. Both my work and school accounts automatically forward to my personal email, so that I only have to check one inbox.

Before this hack,  my inbox was a cluttered mess, my work and school emails were mixed in with promotions and mailing lists and my other personal emails. This was a nightmare, because I tend to use my inbox as a sort of "to-do list," with my unperformed tasks staying unread. I don't need to see my promotional and personal messages mixed up with my work and school mail.

My forwarded messages are automatically labeled and "archived" so that they do not show up in my main inbox. I then set up the priority inbox to display a section that has the label.  The problem is that in this view, both read and unread messages are displayed in the order they are received. This is messy and very unorganized, if I leave a message unread, which I typically do if I need to get to it later, new read messages will stack on top.

But now, with this hack discovered by Ben at stackexchange.com, only unread messages are shown in the inbox, allowing me quickly see my priority messages. The hack involves using Chrome's built in Developer Tools to apply additional filters to the sections.

After your labels and priority in-boxes have been set up, apply a filter to "archive" the labels, so they won't show up in your main inbox.

Next, use Chrome's "Inspect Element" (right click or ctrl+shift+c) to change the code in Gmail's settings to have the sections show all unread messages in the section.

Here are Ben's steps to set it up:

1. Go to the priority inbox settings tab.
2. Click the options next to the section you want to show your work mail.
3. Click "More Options..."
4. Inspect the element for the "Work" Label
5. You will notice on the surrounding div there is an attribute cfg="^all,Work", change the value to "^u,^all,Work"
6. Select the label on the page as you normally would

Here are some screenshots to help with the setup process: 

Inspect the element by right clicking the label after clicking "More Options…"

 Here is where you will edit the code:

Here is Ben's list of alternative commands you can use. You can chain commands together with a comma.

^i = Inbox
^u = Unread
^io_im = Important
^t = starred
^f = sent
^r = drafts
^all = All mail (include archive)
ie. ^i,^u,Work = all emails in your inbox, that are unread with the label "Work".

To set the inbox up the way we want it, we need to display "all" and "unread" if you only display unread (^u), the messages will not show in the section because they have been "archived". We want to have "^u,^all,Work" in the quotes after cfg=. Replace "Work" with whatever label you are using for that section. For my School label, I had cfg= "^u,^all,Work".

After following these steps, and clicking on the label to apply it to the section, you will immediately know that it is working because the section will display Unread,Work for the section, as shown below:

The best part is that after you apply these settings, your inbox will be the same in all of your browsers! No plug-ins required!