zakariaelas / SessionTab

Easy-to-use Chrome extension to save, manage, and restore tabs

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

SessionTab

SessionTab is a chrome extension built to help you manage your open tabs.

Motivation

I always find myself in front of an excessive amount of open tabs and windows. The way I structure my browsing sessions is by keeping relevant tabs under a specific window. Whatever I do, I usually keep at least 2 windows open, one for miscellaneous tabs (social media, music, netflix, etc.), and another one for a specific task I am doing. I am not sure about you, but personally, I almost never work on a task until completion. Most of the time, I interleave tasks. For example, one day I could be working on a programming project and having tabs open for docs, for stackoverflow, github issues, etc. Then the following day, I find myself working on a course assignment or reviewing for an exam. The result is 3 windows open with a ton of tabs in each. I don't like to close the window because I don't want to lose my "browsing progress".

One solution is using bookmarks to save all open tabs in different windows. This could work, however, i'm not a big fan of chrome bookmarks. I always get lost trying to find, add, or deleting bookmarks. In addition, I wanted to be only a few clicks away from "saving" and "retrieving" my sessions.

I briefly looked for a chrome extension online, but most of them were too complicated for what I needed, so I created an opportunity to build my own chrome extension.

A chrome extension easily hooks into the browsing experience. It wouldn't require me to open a new window, which makes the experience smoother.

This extension was built with React, emotion, reach-ui, and formik.

Installation

If you wish to play around with the source code, simply download or git clone the repository.

git clone git@github.com:zakariaelas/SessionTab.git
cd SessionTab
yarn install

Once you finish hacking, you should run the following command:

yarn build

Usage

If you wish to use SessionTab in your Chrome browser, follow these instructions:

  1. Download and extract the repository.
  2. Open your Chrome browser, and then go to options -> More tools -> Extensions :

screenshot1

  1. Click on "Load unpacked" on the upper left corner. Make sure the developer mode is activated:

screenshot3

  1. Open your SessionTab build folder.

  2. Notice the SessionTab icon added to the right of the search bar:

screenshot4

  1. Start Saving!
  • The top right button icon is used to create a new group. A group is simply a collection of tabs.

add_group

  • Group added! The "X" button icon on the right can be used to remove tabs in a group.

group_list_view

  • The three dots open a menu. You can either open all the tabs of a group in a separate window, edit a group (change the name or bulk edit the tabs), or remove a group.

screenshot8

  • If you try to remove a group, you get a confirmation dialog to avoid deleting a group mistakenly.

screenshot9

That's it. It's definitely not the most impressive chrome extension you'll come across, but it's simple and does the job quickly. If it solved my problem, it might solve yours.

About

Easy-to-use Chrome extension to save, manage, and restore tabs


Languages

Language:JavaScript 92.4%Language:HTML 6.5%Language:CSS 1.1%