Giter VIP home page Giter VIP logo

tab-manager-v2's Introduction

Tab Manager v2

Download links

Chrome Web Store: https://xcv58.xyz/tabs

Firefox Add-ons: https://addons.mozilla.org/en-US/firefox/addon/tab-manager-v2

Microsfot Edge Addons: https://microsoftedge.microsoft.com/addons/detail/idoifhgklnblomgoohijchjignpiddpb

Chrome Web Store Mozilla Add-on

CircleCI Build Status Node CI Renovate

Maintainability Test Coverage codecov Coverage Status

Tab Manager v2 is Chrome Extension that helps you manage your Chrome tabs easily. It's a forked version of https://github.com/joshperry/Tab-Manager. But the Tab Manager v2 is completely rewritten by React, MobX, TypeScript, and has different features with original Tab Manager.

Usage

There is a playlist contains how to videos: https://www.youtube.com/playlist?list=PLtWVZzutpoqLdwaoAVhQPGCXU9sLwT3S7

Development

You should be familiar with React, MobX, and Chrome Extension API to develop this extension.

You should run below commands after clone this repo:

pnpm install
pnpm start

Then you can load the build_chrome/ or build_firefox/ folder in chrome://extensions page, please follow the instructions for Chrome or Firefox.

There is a storybook link for component: https://tab-manager.vercel.app

Test

pnpm test

Packaging

pnpm run deploy

Distribute

Follow the official guide to distribute extension: https://developers.chrome.com/extensions/hosting.

You can download older versions from https://crx.dam.io/ext/nimllkpgmmbdglnjneeakdgcpkbgbfbp.html.

Thanks

The default fav icon is made by Lyolya from https://www.flaticon.com is licensed by Creative Commons BY 3.0

tab-manager-v2's People

Contributors

dependabot[bot] avatar dpkagrawal avatar nicknish avatar renovate-bot avatar renovate[bot] avatar samuelsimoes avatar xcv58 avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

vikibeta akai1831 chrome-extension dpkagrawal kooshu gregorynative zxhycxq eps1lon hondoukosuke 0tabs youralginis wang1986one vu1seek justaigithub crazycoderx2

tab-manager-v2's Issues

Refactor Tab scrollTo action to MobX store instead of do it in Tab component

Tab-Manager-v2/src/js/components/Tab/Tab.js

Lines 96 to 114 in 95db367

componentDidUpdate () {
const {
faked, id, searchStore: { focusedTab }
} = this.props
if (!faked && id === focusedTab) {
const { shadowScrollbars } = this.props.getWindowList().refs
const containmentRect = shadowScrollbars.node.getBoundingClientRect()
const { top, bottom } = this.node.getBoundingClientRect()
const height = bottom - top
const topGap = top - height - containmentRect.top
const bottomGap = containmentRect.bottom - bottom - height
if (bottomGap < 0) {
shadowScrollbars.scrollTo(-bottomGap)
}
if (topGap < 0) {
shadowScrollbars.scrollTo(topGap)
}
}
}

Refactor Tab component to create HOC works with Scrollbars

The code should be standalone HOC with Scrollbars, even automatically wrap children if use Scrollbars.

Tab-Manager-v2/src/js/components/Tab/Tab.js

Lines 80 to 98 in 4a28597

componentDidUpdate () {
const {
faked, tab: { id }, searchStore: { focusedTab }
} = this.props
if (!faked && id === focusedTab) {
const { shadowScrollbars } = this.props.getWindowList().refs
const containmentRect = shadowScrollbars.node.getBoundingClientRect()
const { top, bottom } = this.node.getBoundingClientRect()
const height = bottom - top
const topGap = top - height - containmentRect.top
const bottomGap = containmentRect.bottom - bottom - height
if (bottomGap < 0) {
shadowScrollbars.scrollTo(-bottomGap)
}
if (topGap < 0) {
shadowScrollbars.scrollTo(topGap)
}
}
}

Features list

  • Fuzzy Search for all tab and enter/select jump to the tab
  • Shortcut to active the popup
  • Drag and drop to organize tabs
  • Multiple selection
  • Group same URL/title tab together
  • Drag to create new window
  • Filter tabs and batch action (pin, delete, move together)
  • Shortcut for the batch action
  • Honor incognito settings

DEPRIORITIZED

  • DEPRIORITIZED Close window
  • DEPRIORITIZED Deduplicate tabs (directly remove, now we are moving same tabs together)
  • DEPRIORITIZED Add new tab in a window
  • DEPRIORITIZED Sort a window of Tabs

Change shortcuts for sort and group tabs

We use Ctrl+S to group and sort tabs.

But we also have the ability to only sort tabs in a window. It's probably better to have the shortcuts:

  1. Sort all tabs [need one more feature]
  2. Group and sort all tabs
  3. Sort tabs in this window

Fix incorrect peer dependency 

warning "[email protected]" has incorrect peer dependency "eslint@>=3.19.0".
warning "[email protected]" has incorrect peer dependency "eslint-plugin-import@>=2.2.0".
warning "[email protected]" has incorrect peer dependency "eslint-plugin-node@>=4.2.2".
warning "[email protected]" has incorrect peer dependency "eslint-plugin-promise@>=3.5.0".
warning "[email protected]" has incorrect peer dependency "eslint-plugin-standard@>=3.0.0".
warning "[email protected]" has incorrect peer dependency "eslint@>=3.19.0".
warning "[email protected]" has incorrect peer dependency "eslint-plugin-react@>=6.10.3".
warning "[email protected]" has incorrect peer dependency "[email protected] - 3.x".
warning "[email protected]" has incorrect peer dependency "eslint@>=3.1.0".
warning "[email protected]" has incorrect peer dependency "eslint@^2.0.0 || ^3.0.0".
warning "[email protected]" has incorrect peer dependency "eslint@>=3.19.0".
warning "[email protected]" has incorrect peer dependency "ajv@>=4.10.0".
warning "[email protected]" has incorrect peer dependency "ajv@>=5.0.0".

Change the drag to move drop target indicator

Right now it's green background color + border top/bottom.

It seems more intuitive if we can just put a linear background from top to bottom or in opposite direction to indicate where the tabs would be inserted.

The last active tab should skip tab switched by Chrome shortcut

For example, if you have tab history 1, 2, 3, 4, 5
And you continually use Ctrl+B to switch active tab to 1 the history tab looks like:
2, 3, 4, 5, 1 which is desired.
But if you use ⌘+number or Ctrl+Tab/Shift+Tab in between. The tab history messes up because it doesn't honor the system shortcut switch.

Keyboard shortcut for switching to last active tabs

Is it possible to add in the shortcut functionality to go back and forth between two recently visited tabs? For instance, if previous tab is A and current tab is B, then a keyboard shortcut would enable users to go B -> A and, when pressed a second time, go A -> B. There are some extensions available in Chrome App store, but the one I used had performance issue and froze a lot.

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.