Tab-Tree

Simple Chrome extension, React, React Flow, Framer Motion, manifest v3 (published on chrome web store)

Tab history flow chart

Daily open tab

Tracking the each tab history and capture the moment when you first loading on tab, in the little map you can check out the tab history by previw image and click it to re-enter/navigate.

Tab sorting group

In any page right click to call the menu

Sorting the tab by checking the tab if open in new window manually or fire by other tab. ex. create a new tab for google new stuffs

Summary

Maintain an object to draw a map of chrome tab generated in popup page

Base on Chrome running mechanism

Pure Javascript, Good for the beginner

Extension Link

Installation

• From Chrome Web Store
• Github

git clone https://github.com/Kennnnnnneth/Tab-Tree.git

npm i

npm run build

Then put it on chrome

Check out the link of how to use local extension package Chrome Extension Developer Tutorial

Concept

Chrome API

manifest V3 basic

captureVisibleTab

Chrome extension memory management and storage

React

Simple build

React Flow

v10 basic

CustomNode Handle

Framer Motion

Basic

Webpack

Basic