https://github.com/web-dahuyou/NiceTab
浏览器插件：方便快捷的浏览器标签页管理插件，OneTab的升级替代品
https://github.com/web-dahuyou/NiceTab
browser-extension chrome edge onetab react tab-manager typescript
Last synced: 2 months ago
JSON representation
浏览器插件：方便快捷的浏览器标签页管理插件，OneTab的升级替代品
- Host: GitHub
- URL: https://github.com/web-dahuyou/NiceTab
- Owner: web-dahuyou
- License: mit
- Created: 2024-04-24T04:41:34.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-09-15T12:49:43.000Z (8 months ago)
- Last Synced: 2024-09-15T23:59:38.732Z (8 months ago)
- Topics: browser-extension, chrome, edge, onetab, react, tab-manager, typescript
- Language: TypeScript
- Homepage: https://chromewebstore.google.com/detail/fonflmjnjbkigocpoommgmhljdpljain
- Size: 713 KB
- Stars: 27
- Watchers: 2
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# NiceTab
English | 中文
## Extension Installation
- Google Chrome Web Store: [Chrome Web Store](https://chromewebstore.google.com/detail/fonflmjnjbkigocpoommgmhljdpljain)
- Microsoft Edge Add-ons: [Microsoft Edge Addons](https://microsoftedge.microsoft.com/addons/detail/ompjiaelpibiggcnanhbdblkhfdmkgnl)
(Note that due to longer review times, the Edge store release may lag behind the Chrome version.)
- Firefox: Not yet available.
## Overview
- NiceTab is a browser extension that makes managing your browser tabs quick and convenient.
- Named `NiceTab` with the hope that it would be a "nice" tab management tool.
- Similar to other tab management extensions like `OneTab`, `Toby`, `N-Tab`, and `KepTab`. it supports browsers such as Chrome, Firefox, Microsoft Edge, and any Chromium based browser.
- Developed using `React` and based on the [`wxt framework`](https://wxt.dev/), which provides built-in templates for `Vanilla`, `Vue`, `React`, `Svelte`, and `Solid`.
- The UI is powered by the popular [`Ant Design`](https://ant-design.antgroup.com/) library.
## Motivation
I personally get anxious when there are too many tabs open, and switching to a specific tab among them is a hassle. After using OneTab, managing tabs became much easier, improving efficiency and saving memory, so I used it for a long time.
However, I felt a few aspects weren’t quite smooth:
- Group names are lost after exporting and re-importing tabs.
- Because renaming group names isn't persisted, I gave up on renaming them. Once many groups accumulate, locating a specific group is difficult.
- The right-click menu on the extension icon often shows several duplicate menu groups, but only one group of menus actually works, you have to try each to find out.
- Sometimes I just want to bookmark some tabs without closing them, but OneTab lacks an option for that (a personal preference).
- There's no straightforward way to create a new group within OneTab directly and move tabs from an existing group into that new group.
- And a few more smaller issues...
Additionally, the `N-Tab` extension is open-source, but after reviewing it, I found the tech stack a bit outdated, making it difficult to contribute effectively.
Based on the above reasons, I decided to develop the `NiceTab` extension. incorporate additional features upon some features from `OneTab`, `N-Tab`, to enhance the experience.
## Features
- Manage categories, tab groups, and tabs. Includes easy saving, restoring, starring (favorites), locking, adding, deleting, editing, searching, and drag-and-drop reordering, etc.
- Categories support expand/collapse, creation of categories and tab groups, making it easy to move other tab groups/tabs to new categories/groups.
- Offers **import/export** in multiple formats, with local file saving supported. Currently supports cross-import/export for `NiceTab`, `Toby`, `OneTab`, and `KepTab`. (e.g., import OneTab format then export to NiceTab format, or export from NiceTab to OneTab format.) More formats can be added later as needed.
- Supports **remote syncing** (note that merging push do not perform a diff-comparison delete; it merges remote and local, then pushes to remote. To sync deletions, remove them locally and then manually overwrite the remote):
- Gists Sync: You can sync your data to GitHub or Gitee by configuring your personal access token (note, token permissions only check `gists` scope). Potentially more platforms may be supported in the future.
- WebDAV Sync: You can sync your data to a WebDAV service by configuring the WebDAV URL, username, and password (supports multiple WebDAV accounts).
- Auto Sync: Automatic synchronization is supported; you can enable/disable it and set syncing frequency and method.
- Supports manual switch for **Light/Dark** themes.
- Supports **Theme color switch**, currently with several preset theme colors(More can be added later as needed).
- **Multilingual support**, currently Chinese and English (contributions for more natural English or additional languages are welcome).
- Supports **Recycle Bin** feature: deleted tabs, tab groups, and categories go to a recycle bin where you can restore or permanently delete them.
- Supports browser command shortcuts (open the NiceTab-Admin-Page, send all tabs, send the current tab, etc.).
- Option to **Open NiceTab Admin Page after launching the browser**.
- Option to **Pin the NiceTab Admin Page**.
- Option to **Send pinned tabs to NiceTab when sending tabs**.
- Option to **Open NiceTab Admin Page when sending tabs**.
- Option to **Automatically close tabs when sending tabs**.
- Option to **Show "Send To" modal when sending tabs**.
- Option to **Retain duplicate groups when sending tabs**.
- Option to **Retain duplicate tabs when sending tabs**.
- Option to **Show "Send To" modal when sending tabs**. You can send tabs to a specified category or tab group.
- Configurable **Exclude domains for sending tabs** (regex supported) so certain sites or pages are never sent to NiceTab.
- Option to **Open tab group in a new window when opening**.
- Option to **Remove tabs when opening tabs or tab group**.
- Option to **Restore the unnamed group as a browser tab group**.
- Configurable **Modifier key for opening a tab silently (in background)**.
- Configurable **Modifier key for opening a tab in foreground**.
- Option to **Remove empty groups when clearing tabs**.
- Option to **Confirm before removing tabs**.
- Configurable **Copy links format template for tab groups**.
- Option to **Display the number of open tabs on the extension icon**.
- Option to **Display ContextMenu on your webpage**.
- Configurable **popup panel modules**: you can configure which modules to display in the popup. If none are selected, clicking the extension icon sends all tabs to NiceTab by default.
- Option to **Automatically expand the tree list on Home Page**.
- Supports send all tabs, current tab, other tabs, left-side tabs, and right-side tabs in just one click.
- Supports sending native browser tab groups into NiceTab, and re-open them as native tab groups in your browser.
- Supports keyboard shortcuts for certain operations, such as reordering categories or tab groups.
- Tabs support custom editing of title and URL.
- "**Staging Area**" category is fixed at the top; tabs/tab groups sent will be automatically save to the category.
- Supports sorting tab groups by group name or creation time.
- Supports one-click copying of all links in a tab group, with a customizable link template.
- Supports tab and URL search, and jump straight to the result.
- Supports import/export and remote sync for both tabs (existing) and preference settings (newly supported).
- Supports manually hibernate inactive tabs from memory. Hibernated tabs are still visible on the tab strip and will automatically reload when activated.
## Screenshots of Features
### Extension Icon (Popup)
- By default, clicking the `NiceTab` extension icon opens a popup panel where you can quickly access the list page, settings page, import/export page, sync page and recycle bin page.
- You can quickly switch theme colors or view/close the current open tab.
- If none popup modules are configured in preferences, clicking the extension icon will sends all tabs to NiceTab by default.
Screenshots of other actions are not yet updated.
### Right-Click Menu
- Right-clicking the extension icon reveals a quick-access context menu, you can open the `NiceTab Admin Page` (aka `Dashboard`) or try one-click actions to send all tabs, the current tab, other tabs, left-side tabs, or right-side tabs.
### Tab List
- Manage sent tabs in categories and groups.
- The left panel supports drag-and-drop reordering and shortcuts sorting. The right panel displays all tab groups and tabs for the current category, and allows corresponding operations.
- You can easily delete tab groups or move them to other categories. Multiple tabs can also be selected and moved or deleted in bulk.
### Preferences
- Customize various preference settings according to your own preferences.
### Import/Export
- Currently supports cross-import/export for `NiceTab`, `Toby`, `OneTab`, and `KepTab` formats.
- You can import `OneTab`, `Toby` or `KepTab` data, and parsed into `NiceTab` format.
- You can export `NiceTab` data to `NiceTab`, `OneTab`, `Toby` or `KepTab` format.
Screenshots of KepTab and Toby format imports/exports are not yet updated.
### Remote Sync
Supports syncing via Gitee Gists, GitHub Gists, and WebDAV:
- Gists Sync: You can sync your data to your Github and Gitee accounts as needed, just configure your access token.
- WebDAV Sync: You can sync your data to a WebDAV service by configuring the WebDAV URL, username, and password (supports multiple WebDAV accounts).
**Note**:
- For gists, token permissions only check `gists` scope.
- Merging push sync does not perform a diff-comparison delete. It merges remote and local data, then pushes to remote, so tabs increase cumulatively. To sync deletions, remove them locally and then manually overwrite the remote.
Screenshots of WebDAV sync are not yet updated.
### Theme Color Switching
You can easily switch theme colors in the management dashboard or the popup panel.
### Light/Dark Mode
Light and dark themes are available, which can be toggled in the management dashboard.
### Language Switching
Switch between Chinese and English in the management dashboard.
### Recycle Bin
- Deleted categories, tab groups, or tabs go into the recycle bin.
- You can restore them back to the tab list or permanently delete them.
## Usage
- Click the extension icon to open the popup panel displaying the currently open tabs. From there, you can access the Admin Page or quickly switch themes, etc.
- Right-click the extension icon to display context menu items for sending tabs to NiceTab.
- In the Dashboard (Admin Page), you can switch languages and themes, or toggle light/dark mode.
- In `Dashboard > List` page, view all sent tabs organized by category and group.
- In `Dashboard > Settings` page, manage the extension's preferences.
- In `Dashboard > Import & Export` page, import or export tabs in NiceTab, OneTab, Toby or KepTab formats.
- In `Dashboard > Sync` page, sync tabs to your Github and Gitee accounts as needed, just configure your access token (note, token permissions only check `gists` scope).
- In `Dashboard > Recycle Bin` page, view and manage any deleted categories, tab groups, or tabs. You can restore or permanently delete them.
## Community & Feedback
Feel free to join our QQ group: 924270240
## References
- [Chrome for Developers - Extensions API Docs](https://developer.chrome.com/docs/extensions/reference/api?hl=zh-cn)
- [WXT Official Site](https://wxt.dev/)
- [Ant Design](https://ant-design.antgroup.com/)
- [React Router](https://reactrouter.com/)
- [styled-components](https://styled-components.com/)
- [react-intl](https://formatjs.io/docs/react-intl)
- [pragmatic-drag-and-drop](https://atlassian.design/components/pragmatic-drag-and-drop/about)
- [“Complete Guide to Developing Chrome Extensions” (Chinese)](https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html)
## Extension Development
- Install dependencies:
`pnpm install`
- Start the dev server:
`pnpm run dev`
Important: Each `.js .ts .tsx` file must have an `export default` statement. Otherwise, you'll encounter errors when running the local service.