Giter Club home page Giter Club logo

sessiontab's Introduction

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 [email protected]: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.

sessiontab's People

Contributors

zakariaelas avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.