Inspiration
It all started with eight different browser windows, each packed with up to ten tabs to juggle all my tasks, projects, and random internet rabbit holes. Jumping between them was already stressful, but trying to remember which tab had that one keyword, or the webtoon I was halfway through, was the final straw. Every click felt like playing a high-stakes game of tab roulette. I needed a way to visually distinguish my tabs—to turn this homogeneous mess into an organized system that matched the beautiful, chaotic workflow inside my head. Thus, Tabify was born: a Chrome extension to rename tabs and customize their favicons with emojis or your own images.
What it does
Tabify transforms your browser tabs into a personalized, visual workspace: Custom Tab Titles: Rename any tab to whatever makes sense to you—"Do Now", "Client XYZ", or "THE Recipe" Emoji Favicons: Choose from curated emoji icons (⭐ ❤️ ⚡, etc.) or upload your own custom images Toggle between session-only and persistent storage: Choose between session-only changes (perfect for temporary organization) or persistent customizations that survive browser restarts Save Presets: Save your favorite title/favicon combinations for use across different tabs One-Click Reset: Always return to the original state with a single click
The extension works seamlessly across most websites, turning your browser into a personalized chaos that actually makes sense.
How it was built
Building Tabify was built using Chrome Extensions API (Manifest V3). The architecture is built on three core pillars: The Popup (popup.js & popup.html): The is the user's control panel. It uses chrome.tabs.query() to get the active tab and presents a clean interface for editing titles and selecting favicons.
The Background Service Worker (background.js): The central event handler. It listens for tab updates (chrome.tabs.onUpdated) and applies saved customizations by injecting content scripts. It also manages the storage layer, deciding whether to save settings per-tab (session) or per-URL (persistent).
The Content Script (content.js): Injected into every web page, it's responsible for the real-time manipulation of the document.title and the elements.
The core technical challenge was persistence and synchronization - managing state across multiple contexts.. I used a dual-layer storage system to handle this: chrome.storage.session: For temporary, tab-specific changes that vanish when the tab closes. chrome.storage.local: For persistent, URL-based profiles that survive browser restarts. This lets users experiment temporarily or commit changes permanently.
Challenges
Favicon Persistence - Getting custom favicons to stick after page refreshes was incredibly challenging as they are aggressively cached, so updates didn’t always show. I solved this by: Removing all existing elements Adding both icon and shortcut icon Appending a timestamp to bypass caching
Storage Access Limitations - Chrome’s storage.session API doesn’t allow access from all contexts. I had to explicitly grant access:
accessLevel: 'TRUSTED_AND_UNTRUSTED_CONTEXTS'
});
Preserving the Original Tab State - If a user wanted to reset their changes, I needed a true snapshot of the tab’s original state. The trick was capturing this the first time I touched the tab:
await chrome.storage.session.set({
[`original_${tabId}`]: {
title: document.title,
favicon: getOriginalFavicon()
}
});
Avoiding Memory Leaks - Ensuring custom uploaded images were properly saved and retrieved from presets required significant debugging. The dynamically generated preset buttons were losing event handlers. Switching to proper event delegation fixed it.
Accomplishments
- Built a clean, easy-to-use interface so customizing tabs feels simple and fast.
- Finally cracked the favicon problem—got custom icons to actually stick, even with tricky browser caching and site restrictions.
- Made a preset system that works for both emoji favicons and uploaded images.
- Created a storage setup that lets users pick if changes are temporary or saved forever.
What we learned
Chrome Extension Architecture – Migrating to Manifest V3, message passing, and CSP (Content Security Policies) State Management – Building a system that spans multiple browser contexts. Debugging Browser Quirks – Like favicon caching and restricted storage APIs. Product Thinking – Feature creep was tempting, but focusing on a polished MVP was key.
What's next for Tabify - Organize Your Browser Chaos
Image URL - Allow users to upload images using image URL instead of uploads. Keyboard Shortcuts - Quick-access keys for power users. Customizations - Let users tweak the popup and overall interface design. Groups - Group tabs together and customize entire sets for workflows.
Stop losing tabs in the void. Turn your chaos into your chaos. Go try Tabify on the Chrome Store now.
Log in or sign up for Devpost to join the conversation.