- how to start the project
- what it can do
- how it's made
- what's the logic behind
- Contribution & License
first clone the project
git clone https://github.com/mahdi-mallaee/flow.gitthen install the packages
npm idev server command
npm run devbuilding an unpacked chrome extenstion
npm run buildextension should be loaded in chrome dev mode afterward by clicking on load unpacked button and selecting on of the below directories in extensions page
./build/chrome-mv3-dev./build/chrome-mv3-prod- making a new session that reperesnts a window in chrome and saving tabs automaticly
- opening the session will create a new chrome window and open saved tabs
- showing open windows as unsaved window for saving them as a new session
- automatic or manual backups
- main session that will open no matter last closed window and also detecting the opened session on startup
I used plasmo for hot reloading and also it's storage api for data sync between background and popup scripts and it's other cool features like out of pocket react and typescript support and automatic manifest builds.
For UI i used react and react-router for navigation and framer-motion for animations.
first of all background and popup scripts run as different instances.
most of data is saved in local storage so scripts lifecycle doesn't wipe our data.
most important thing that is saved is sessions but for being able to prevent different instances of code to manipulate outdated data, sessions are saved in three parts basicSessions, sessionsOpenStatus and sessionsTabs.
other data are saved normally as their scheme is saved in types file.
in popup there is the UI and buttons and all that and after playing with those if something needs to happen it wall call one of the actions and their name should tell you what they do. in action file we work with two other api first one is chrome api for manipulating chrome tabs and windows and other one is store api in store directory so that means an action doesn't change local storage directly and store api does that. action only works with browser directly and if it needs to save something it calls store api.
all files in store directory work directly with local storage for getting and setting data.they make sure data is in correct format and it's not like undefined. as we know sessions are saved in different parts so funtions related to sessions make sure action files get correctly what they requested. also after each store manipulation related to sessions, sessionsStatusId will change and UI will be refreshed with new data.
data is synced across all instances with plasmo storage api and custom hooks in hooks directory.
background script runs after tabs and windows events like onCreated and onRemoved and other ones to refresh saved data.
refreshTabs and refreshUnsavedWindows actions make sure that saved data is updated and fresh so sudden events like browser closing and computer shut downs dont wipe the data.
refreshTabs gets all the tabs from all open windows and save them in their session and refreshUnsavedWindows get all open windows and by comparing their ids to sessions window ids sets usnaved windows.
webstore link : https://chromewebstore.google.com/detail/flow-tab-manager/ddmmamibgihlgejeklfopeebcnobmfeb
Flow is your ultimate solution for managing tabs and windows in Chrome. Whether you’re a power user or just someone who wants to keep things tidy, Flow streamlines your browsing experience. Here’s why you’ll love it:
Effortless Tab Management • Create Sessions: Start fresh by initiating a new session. A dedicated Chrome window opens, marking the beginning of your focused browsing journey. • Automatic Saving: Flow takes care of your tabs in the background. Close a window without hesitation; your tabs are securely saved. • Resume Seamlessly: Reopen any session whenever you need to pick up where you left off. • Unsaved Windows: Add any open window to your sessions directly from the ‘Unsaved Windows’ section.
Boost Your Workflow with Additional Features • Main Session: Designate a session as your ‘Main Session.’ When you launch Chrome, all other windows close, leaving only your essential workstream active. • Backups: Create local backups of your sessions. Flow auto-generates a backup before deleting any session, ensuring you never lose your work. • Dark Mode: Enjoy a sleek dark mode that’s easy on the eyes during late-night browsing. • Resizable Interface: Customize the extension’s size by simply dragging the bottom right corner to fit your screen and preferences.
Why Flow?
• Simplicity: Flow keeps things straightforward. • Speed: It’s fast and reliable. • Organization: Say goodbye to tab overload.
Give Flow a try and experience a clutter-free browsing environment. Your feedback is invaluable in making Flow even better!
What's new? 1.2.8 • Added session badge • Removed the unsaved window popup
1.2.7 • Added sessions details to view tabs and move tabs between sesssoin • Added move tabs to session in chrome context menu • Added permission view to review optional permissions for certain settings
1.2.6 • Added window positions saving. • Bug fixes.
1.2.5 • Now Discarding tabs after title is load to improve search and visibility. • Clicking on the open sessions will bring them to front. • Bug fixes.
1.2.4 • Bug fixes.
1.2.3 • Added search in sessions. • Added session reordering ( holding two horizontal lines in session menu). • Added session color change ( click on tab count in session menu).
1.2.2 • Added session freeze. • Code improvements.
1.2.1 • Organizing settings and added a few more settings in additional settings • Bug fixes
1.2.0 • Two new themes : deepBlue, magicalPurple • Performance improvements. • Fixed some bugs.
1.1.0 • Sessions can be opened in the current window. • Project is open source now. see about us in extension settings for more info. • Pinned tabs will be saved now. • Alert will be shown if a window is not saved as session. • Performance improvements.
#tab-manager #session #tab-groups #flow
For contibuting see CONTRIBUTION.md file. This project is licensed under the GPL v3 License - see the LICENSE.md file.