Giter Club home page Giter Club logo

nicetab's Introduction

NiceTab

NiceTab

扩展安装

  • 谷歌 Chrome 应用商店:Chrome Web Store
  • 微软 Edge 商店:Microsoft Edge Addons ((由于审核周期比较长,版本发布会比Chrome版本慢))
  • Firefox 暂未发布。

基础介绍

  • 本项目是一个方便快捷管理浏览器标签页的浏览器插件。
  • 取名 NiceTab 是希望它是一个用起来很 nice 的 tab 标签页管理工具(不过本人的UI和交互设计太差,只能凑合凑合了)。
  • 类似于 OneTabN-Tab 等标签页管理插件,支持谷歌ChromeFirefox微软Edge等浏览器。
  • 采用 react 语言,基于wxt框架开发(wxt框架内置 vanilla | vue | react | svelte | solid 语言的初始化模板)。
  • UI直接使用了 Ant Design 这个常用的 UI 框架。

项目初衷

我本人有点强迫症,浏览器标签页开多了就会焦虑,而且想要在众多标签页中切换到指定的页面也比较费劲儿。
后来用上 OneTab 之后,管理标签页方便了不少,提升了效率也节省了内存。因此很长一段时间一直使用 OneTab 插件来管理浏览器标签页。

经过一段时间对 OneTab 的使用体验,个人感觉有几个点不是特别顺手:

  • 标签组虽然能重命名,但是导出后再导入就会丢失。
  • 由于标签组重命名会丢失,所以我懒得花时间重命名,当标签组积累多了之后,很难找到指定的标签组。
  • 插件图标右键菜单经常会出现好几个重复的菜单组,其中只有一个菜单组是能用的,但是你得挨个试才知道。
  • 有时候我只是想要将一些标签页收藏进列表,并不想关闭它们,但是 OneTab 没有对应的设置项(这个只是我个人体验)。
  • 还有就是,我想将某个标签组中的标签页移动到新的标签组,但是又没办法创建标签组,只能通过插件图标发送标签页到 OneTab 列表来创建新标签页。
  • 。。。

另外,N-Tab 插件是开源的,当我看了它的源码后发现技术栈相对比较老旧,想参与共建有心无力了。

基于上面几点原因,最终促使我开发了 NiceTab 这个插件,在借鉴 OneTabN-Tab 等插件现有部分功能的基础上,添加了一些其他的功能。

功能介绍

  • 支持分类、标签组、标签页管理,包括一键收集保存、恢复、星标、锁定、增删改查、拖拽排序等功能。
  • 分类支持展开/收起,支持创建分类和标签组,方便移动其他标签组/标签页到新分类/新标签组。
  • 支持多种插件格式的 导入/导出 功能,支持导出到本地。目前支持 NiceTabOneTab 格式的交叉导入导出(比如:可选择导入OneTab格式并导出为NiceTab格式;或者将NiceTab格式导出为OneTab格式),后续可根据需求增加其他插件格式的导入导出功能。
  • 支持远程同步,您可根据需求将标签页同步到自己的 github 和 gitee 账号,只需要配置自己的 access token 即可(注意 token 权限只勾选 gists 操作),后期看看能否扩展配置其他平台方案。
  • 支持皮肤主题切换,目前暂时设置了有限的几种主题色提供选择,后续可根据需求扩大选择范围。
  • 支持多语言,目前暂时支持中英文切换 (非地道英语,期待英语大佬帮忙校正)。
  • 支持回收站功能,回收站中的标签页可还原到标签列表或者彻底删除。标签列表和回收站支持根据分类和标签组归类合并,方便管理。
  • 支持设置 发送标签页时-是否自动关闭标签页
  • 支持设置 发送标签页时-是否打开NiceTab管理后台
  • 支持设置 发送标签页时-是否发送固定标签页到NiceTab
  • 支持设置 恢复标签页/标签组时-是否保留或删除标签页/标签组
  • 支持设置 是否固定NiceTab管理后台
  • 支持设置 删除标签页时, 是否自动删除空标签组
  • 支持设置 发送标签组/标签页时是否去重
  • 支持标签页手动去重。
  • 支持一键发送 所有标签页、当前标签页、其他标签页、左侧标签页、右侧标签页。
  • 支持发送新版浏览器自带的标签组到NiceTab, 支持以标签组形式打开到浏览器。
  • 支持快捷键(目前只添加了分类、标签组的上下移动排序的快捷键操作,后续可根据需求添加其他功能的快捷键操作)。
  • 标签页支持自定义编辑修改标题和url。
  • 添加固定置顶的特殊分类-中转站,发送标签页/标签组时自动收集到中转站中。
  • 添加标签组按字母排序功能

功能截图

点击扩展图标

  • 点击扩展图标,弹出popup面板。
  • popup面板,可快速访问 列表页,设置页面,导入导出页面,回收站页面。
  • popup面板,可快捷切换主题色。
  • popup面板,可快捷访问和关闭当前打开的标签页。

NiceTab-扩展图标点击

右键菜单

右击扩展图标,展示右键菜单,可打开扩展管理后台页面。支持 一键发送 所有标签页、当前标签页、其他标签页、左侧标签页、右侧标签页。

NiceTab-扩展图标右键菜单.png

扩展管理后台-列表页

  • 管理发送到NiceTab的标签页,支持分类,标签组管理。
  • 左侧列表支持拖拽和快捷键排序,右侧面板展示当前分类中的所有标签组和标签页,可进行相应的操作。
  • 支持标签组删除和跨分类移动,以及多选标签页删除和跨标签组移动。

NiceTab-列表页

扩展管理后台-偏好设置页

您可根据自己的喜好,作相应的偏好设置。

NiceTab-偏好设置页.png

扩展管理后台-导入导出

导入导出功能目前支持 NiceTabOneTab 格式的交叉导入导出。

  • 可导入 OneTab 格式的列表并解析为 NiceTab 格式。
  • 可将 NiceTab格式的列表导出为 NiceTabOneTab 格式。

NiceTab-导入导出.png

扩展管理后台-回收站

  • 分类、标签组、标签页删除后,会保留到回收站,您可将回收站的分类、标签组等还原到列表页或者彻底删除。

NiceTab-回收站.png

切换主题色

插件支持主题切换,您可以在扩展管理后台页或者 popup 弹窗中进行切换。

NiceTab-切换主题色.png

切换语言

插件支持语言切换,您可以在扩展管理后台页进行切换。

NiceTab-切换语言.png

使用

  • 点击扩展图标,打开popup面板,显示当前已打开的标签页列表,可快速访问扩展管理后台,快速切换主题。
  • 右击扩展图标,展示快捷操作菜单,可发送标签页到扩展管理后台。
  • 打开管理后台,可进行语言切换和主题切换。
  • 打开管理后台 > 标签列表页,查看已发送的标签页列表,支持分类和标签组管理。
  • 打开管理后台 > 设置页,可保存扩展的偏好设置。
  • 打开管理后台 > 导入导出页,可进行NiceTab和OneTab格式的标签页导入导出操作。
  • 打开管理后台 > 同步页,可根据需求将标签页同步到自己的 github 和 gitee 账号,只需要配置自己的 access token 即可(注意 token 权限只勾选 gists 操作)。
  • 打开管理后台 > 回收站页,可查看和管理从标签列表页中删除的分类、标签组、标签页,并进行还原和删除操作。

更新计划

  • NiceTab 和 OneTab 格式导入导出功能
  • 回收站功能
  • 切换皮肤功能
  • 支持多语言(目前暂时支持中英文切换)
  • 标签页支持自定义编辑修改标题和url
  • 版本检测,提示更新
  • 发送标签页支持浏览器自带的标签组单独成组,打开NiceTab标签组时支持以浏览器自带标签组形式打开。
  • 新增设置项:删除标签页时, 是否自动删除空标签组
  • 新增设置项:发送标签组/标签页时是否去重
  • 远程同步功能:由于 Chrome Api限制,远程同步有数据大小和频次限制,大小限制 100K,频次限制 1次/2秒。所以采用将标签页同步到自己的 github 和 gitee 账号,只需要配置自己的 access token 即可(注意 token 权限只勾选 gists 操作)
  • 发送标签页操作添加快捷键
  • 扩展图标右键菜单支持按需配置
  • 其他

参考链接

插件开发

  • 依赖安装:npm install
  • 启动插件服务:npm run dev

注意:每个js文件都必须有 export default 默认导出,否则本地启动服务时会报错。

nicetab's People

Contributors

web-dahuyou avatar

Stargazers

Jun Xie avatar Sophia avatar  avatar  avatar ACKMOX avatar acvv_khalil avatar  avatar  avatar rainea avatar 陈广良 avatar ChenDY2233 avatar gavin avatar kuaizai avatar BPY avatar cxqeric avatar Jaya avatar  avatar

Watchers

陈广良 avatar  avatar

nicetab's Issues

bug report

UP你好,我的issue被关闭了,怕你看不到, 只好开个新的。
首先感谢你的辛勤劳动和快速响应!
试用了1.5.1,发现还是有问题,可能是我没有表达清楚。
我想要的去重功能,不是只针对发送的页面和组,而是将发送的页面或组与仓库已有的比较, 如果有重复的页面,就舍弃不再重复入仓,如果是组同名,就把发送组内的页面与仓库组内的页面比较,只入仓那些没有的页面到仓库同名组里面。这样仓库就不会像目前这样出现多个同名组。
还有,对仓库已有的组进行排序,这个功能应该是还没有添加吧?

感谢信

终于 ,nicetab进化到了个人期望的理想状态,得偿所愿,普大喜奔。毫不夸张的说,该插件在功能、易用、稳定方面绝对是同类的榜一大哥了,即使后续不更新,也足以支撑我的长久使用。
对忽悠哥的无私分享与支持,表示由衷的感谢。

产品交流

问题描述:

最近在工作中,我遇到了一个需求:我有两台设备,分别在公司和家里。下班时未完成的工作(如文档和重要页面)可能会被遗忘,回家继续或第二天继续时,历史记录会变得非常庞杂,不容易找到需要的页面。因此,我开发了一个功能,用于一键收集当前标签,并将数据POST到服务器,以便在其他设备上访问。

现状:

目前,这个功能还没有实现用户鉴权和云空间分配,服务器地址是硬编码的,不需要密码,只有我自己在使用。

需求:

  1. 用户鉴权: 我希望在功能中加入用户鉴权机制,以确保数据的安全性和私密性。
  2. 云空间分配: 目前没有针对云空间的分配方案。我希望找到一个无需成本的云空间,能够支持扩展其他用户的使用。
  3. 开源计划: 我计划将这个项目开源,因此希望减少实际的经济成本,并且提供给更多用户使用。

问题:

  • 如何实现用户鉴权并且在功能中有效集成?
  • 有没有推荐的免费云存储服务,可以支持开源项目,并满足上述需求?

希望收到建议和帮助!

tag功能, 希望允许有一个不带tag的标签组.

目前所有标签组都必须带tag, 这个对标签组不是太多的时候不是很方便, 一定强制3级标签, 大部分时候可能二级标签就够了. 或者有些标签组比较重要的, 我也希望它和默认折叠起来的带tag的标签组区分开, 让它成为顶层的标签组, 不知道这个feature作者大大是否认可.

迫切需要“一键转移中转站所有标签组到其他分类”的功能!

忽悠哥你好,经过这段时间的使用,我愈发觉得 “一键转移中转站所有标签组到其他分类”这个功能太重要了,再次呼吁早日实现。
描述一下我的实际运用场景:
我同时在处理几个项目,不同项目需要查询不同的资料,假设项目1~项目5,我对应的创建了5个分类。
假设我今天计划处理项目3,下班了还没弄完,然后想把所有tabs归档到项目3以便后续继续。这时我需要一键发送所有标签组到中转站,接着从中转站归档到项目3,这时要了我的亲命了,我只能逐个的移动标签组,逐个逐个的点选择点确定(确定按钮还不能打回车只能鼠标点击)。标签组一多,我就吐血了。所以这个功能太迫切需要了。何况现在的拉取合并功能,已经实现了同样的算法。稍微调整一下即可实现这个功能了。叩谢

改进建议:中转站增加 “一键移动所有标签组” 和 “一键移动所有选中标签” 的按钮

UP主你好,经过这一轮改进,NIce-tab已经能作为日用软件了,非常感谢您的劳动。
目前仍有一点大幅提升效率的改进建议,就是如题的 中转站增加 “一键移动所有标签组” 和“一键移动所有选中的标签”的按钮, 而不是像目前1.6.0的挨个标签组去点击移动,希望您能采纳。 谢谢
“一键移动所有选中的标签”是为了满足同时选中若干组内若干标签的情况。
BTW,个人感觉新logo不如原logo好看, 不过无伤大雅 :)

星标后,再取消星标,Group没有按照时间排序了

image

应该需要添加一个根据createTime的sort

{tag.groupList.map((group) => (
<TabGroup
key={group.groupId}
{...group}
canDrag={false}
canDrop={false}
allowGroupActions={['remove', 'recover']}
allowTabActions={['remove', 'recover']}
onChange={(data) => handleTabGroupChange(tag, group, data)}
onRemove={() => handleTabGroupRemove(tag, group)}
onRestore={() => handleTabGroupRestore(group)}
onStarredChange={(isStarred) =>
handleTabGroupStarredChange(tag, group, isStarred)
}
onRecover={() => handleTabGroupRecover(tag, group)}
onTabRemove={handleTabItemRemove}
></TabGroup>
))}

新功能建议

期望尽快增加以下功能: 1. 发送标签页时,如果组名相同,则视为同一个组,在组内进行标签同步,而不是目前1.4.0版本的增加一个新的同名组。 2. 组内标签同步时,拒绝重复添加相同标签(设置可选项)。 3. 列表处增加按首字母排序组的功能。 4. 设置增加可选项:“如果某组未处于锁定状态,则当该组内无标签时,自动删除该组”。

bug report 1.6.0

下列设置并保存,但是在列表中点击单个标签打开时,该标签没有从NiceTab列表中删除

恢复标签页/标签组时-是否自动删除标签页:从NiceTab列表中删除(仍保留固定标签页)

关于“拉取合并推送” 这个同步功能的探讨

忽悠哥,恭喜工程又往前迈进一大步。但我仍想对标题所述功能提点建议,知道你是为了方便用户贴心地把几个动作整合,这对标签增量很有用,然而它应对不了标签减少的场景。
举例说,
用户在家和公司两台电脑办公,早上公司晚上家。假设两台电脑的标签都进行了同步。
早上,用户在公司一打开浏览器即进行“拉取合并推送”,然后经过一天工作,删除了A若干标签,增加了B若干标签,下班关电脑前进行“推送覆盖远程”。
晚上,用户在家电脑,用“拉取合并推送”功能,又把早上删除的A若干标签(在家电脑本地还有存档)同时恢复到本地和远程,违反用户意图。

所以建议:修改“拉取同步推送” 为“拉取覆盖本地” 或者更完美的:再增加一个“拉取覆盖本地”功能。
然后养成以下习惯
早上公司,打开电脑-拉取覆盖本地-工作-“推送覆盖远程”-关电脑
早上家,打开电脑-拉取覆盖本地-工作-“推送覆盖远程”-关电脑
即,不管在哪里,打开浏览器第一时间“拉取覆盖本地”,关电脑前“推送覆盖远程”,方能实现真正的“同步”。

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.