Deri Kurniawan

Overview

Sessify is a browser extension built to make managing browser sessions effortless. It allows you to save and restore sessions so you don't have to log in repeatedly. Whether you need to switch between personal and work accounts, test different user roles, or maintain multiple accounts across platforms, Sessify makes it simple with just a few clicks.

The extension is especially useful for developers or testers and power users who frequently juggle multiple accounts. Before Sessify, sometimes I relied on incognito windows or even temporary code changes to test different sessions—an error-prone and time-consuming workflow. Sessify was created to solve this frustration by offering a cleaner, more reliable way to handle sessions.

Built with React(opens in a new tab) for UI components, CRXJS(opens in a new tab) for streamlined Chrome extension development, Sessify combines functionality with a modern, intuitive design.

Features

Chromium browser support (Chrome, Edge, Brave, Opera, and more)
One-click session save & restore
Seamless account switching without logging out
Persistent session state across restarts and crashes
Clean, responsive UI optimized for productivity
Detailed session list (name, URL, timestamp, and storage snapshot)
Dynamic badge indicator showing saved sessions for the active tab
Popup & sidepanel UI with synchronized state
Wide range of supported sites (social media, e-commerce, SaaS platforms, etc. — see limitations below)

Limitations

While Sessify simplifies session management, there are some important limitations to note:

Browser support: Currently works only with Chromium-based browsers (e.g., Chrome, Edge, Brave, Opera).
Storage limits: Extension storage is capped at 5MB by default(opens in a new tab), though it can be increased with user permission.
Third-party cookies: Sessions may not fully restore if a site depends on third-party cookies, as these are often blocked by default.
High-security sites: Platforms like banking or government services often use anti-session-replay protections, which may prevent session restoration.
Clearing all current site data: When adding a new session, all current site data (cookies, localStorage, sessionStorage) will be cleared to ensure a fresh login. This means we start with a clean slate, which may not be ideal for all users.

Core concepts

The core functionality of Sessify revolves around capturing, storing, and restoring browser session data. Here’s how it works under the hood:

Detect the active tab

The extension identifies the currently active tab and extracts its domain.

/**
 * Get the active tab in the current window
 * @see https://developer.chrome.com/docs/extensions/reference/api/tabs
 */
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
const url = new URL(tab.url ?? "");

Capture session data

Sessify collects the site’s storage data (localStorage, sessionStorage, and cookies) and saves it in the extension’s local storage.

// Get local storage for the active tab
const local = await chrome.scripting.executeScript({
  target: { tabId: tab.id! },
  func: () => Object.entries(localStorage),
});

// Get session storage for the active tab
const session = await chrome.scripting.executeScript({
  target: { tabId: tab.id! },
  func: () => Object.entries(sessionStorage),
});

// Get cookies for the active tab URL
const cookies = await chrome.cookies.getAll({ url: url.origin });

// Store the local, session, and cookies data in extension local storage
await chrome.storage.local.set({
  [url.hostname]: { local, session, cookies },
});

Add a new session

To create a new session, Sessify clears the site’s storage, allowing the user to log in with fresh credentials without interference from existing data.

//  Clear existing session data for the active tab
await chrome.cookies.remove({ url: url.origin, name: "sessions" });

//  Clear local and session storage for the active tab
await chrome.scripting.executeScript({
  target: { tabId: tab.id! },
  func: () => {
    localStorage.clear();
    sessionStorage.clear();
  },
});

// Reload the tab to reflect the cleared session
await chrome.tabs.reload(tab.id!);

// After user login → capture session again (go back to step 2)

Switch between sessions

To switch accounts, Sessify restores the saved storage data back into the specific site context.

// Retrieve saved session data from extension local storage
const { local, session, cookies } = await chrome.storage.local.get(
  url.hostname
);

await chrome.scripting.executeScript({
  target: { tabId: tab.id! },
  func: (data) => {
    // Clear existing active tab storage
    localStorage.clear();
    sessionStorage.clear();
    // Restore local, session and cookie storage for the active tab
    for (const [k, v] of data.local) localStorage.setItem(k, v);
    for (const [k, v] of data.session) sessionStorage.setItem(k, v);
  },
  args: [{ local, session }],
});

// Restore cookies for the active tab URL
for (const cookie of cookies) {
  await chrome.cookies.set({ ...cookie, url: url.origin });
}