新开发了一款浏览器Tab管理插件,OneTab 的升级替代品, 欢迎品尝!

这是一款用来管理浏览器 Tab 标签页的浏览器插件,主要采用 React + Typescript + antd 等技术栈开发, 目前已经开源。发布插件审核被拒绝多次之后,终于成功发布了。

希望能跟大家一起探讨,期待您的宝贵建议。

项目介绍

  • 项目源码地址: NiceTab
  • 这款浏览器插件名叫 Nice Tab, 取这个名字是希望它是一个用起来很 nice 的 tab 标签页管理工具;不过由于插件在 Chrome 浏览器中发布时,提交审核一直被拒绝,后来咨询 Google 官方支持后,才知道 Nice Tab 这个名字太大众, 所以在扩展商店中的名称改为了 [Nice Tab Manager | 标签页管理器], 审核通过了(针对审核中的一些注意事项,后面有时间了写一篇踩坑笔记)。
  • 本插件功能类似于 OneTabN-Tab 等标签页管理插件,在它们的基础上新增了一些功能。支持谷歌ChromeFirefox微软Edge等浏览器。
  • 项目采用 React + Typescript 语言,基于wxt框架开发(wxt框架内置 vanilla | vue | react | svelte | solid 语言的初始化模板)。
  • UI则直接使用了 Ant Design 框架。

项目初衷

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

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

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

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

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

功能介绍

  • 支持分类、标签组、标签页管理,包括一键收集保存、恢复、星标、锁定、增删改查、拖拽排序等功能。
  • 分类支持展开/收起,支持创建分类和标签组,方便移动其他标签组/标签页到新分类/新标签组。
  • 支持多种插件格式的 导入/导出 功能,支持导出到本地。目前支持 NiceTabOneTab 格式的交叉导入导出(比如:可选择导入OneTab格式并导出为NiceTab格式;或者将NiceTab格式导出为OneTab格式),后续可根据需求增加其他插件格式的导入导出功能。
  • 支持皮肤主题切换,目前暂时设置了有限的几种主题色提供选择,后续可根据需求扩大选择范围。
  • 支持多语言,目前暂时支持中英文切换 (英文版可能翻译的不够专业)。
  • 支持回收站功能,回收站中的标签页可还原到标签列表或者彻底删除。标签列表和回收站支持根据分类和标签组归类合并,方便管理。
  • 支持设置 发送标签页时-是否自动关闭标签页。
  • 支持设置 发送标签页时-是否打开NiceTab管理后台。
  • 支持设置 发送标签页时-是否发送固定标签页到NiceTab。
  • 支持设置 恢复标签页/标签组时-是否保留或删除标签页/标签组。
  • 支持设置 是否固定NiceTab管理后台。
  • 支持一键发送 所有标签页、当前标签页、其他标签页、左侧标签页、右侧标签页。
  • 支持快捷键(目前只添加了分类、标签组的上下移动排序的快捷键操作,后续可根据需求添加其他功能的快捷键操作)

功能截图

点击扩展图标

  • 点击扩展图标,弹出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

扩展商店

目前插件发布到了Chrome 应用商店和 Edge 商店。

其中谷歌的审核会比较严格,在多次修改审核被拒绝后才最终发布成功,如果符合发布规范,一般情况一天时间就审核完成了。

微软 Edge 商店的审核政策比较宽松,只是审核流程时长比较长,一般7天左右。

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

后续计划

插件还有待完善的地方,后续会根据情况优化迭代。

  • 由于 Chrome 政策限制,远程同步有数据大小和频次限制,大小限制 100K,频次限制 1次/2秒。所以目前暂时使用浏览器本地存储+支持导出到本地的方案。后续会添加远程存储同步功能。
  • 目前暂时给分类和标签组的上下移动配置了快捷键,后续根据情况给常用操作添加快捷键。
  • 列表中标签页支持预览功能
  • 扩展图标右键菜单支持按需配置

后面有时间,希望把插件开发过程和功能实现做一些分享。

参考链接

  • 23
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
开发一个Chrome插件来监听浏览器的交互,您可以按照以下步骤操作: 1. 创建一个的文件夹,作为您的插件项目的根目录。 2. 在根目录中创建一个名为“manifest.json”的文件。这是Chrome插件的配置文件,其中包含插件的名称、版本、图标等信息。示例: ``` { "manifest_version": 2, "name": "My Extension", "version": "1.0", "description": "My Chrome Extension", "icons": { "16": "icon16.png", "48": "icon48.png", "128": "icon128.png" }, "background": { "scripts": ["background.js"], "persistent": false }, "permissions": ["tabs", "activeTab"] } ``` 3. 在根目录中创建一个名为“background.js”的文件。这是您的插件的后台脚本,用于监听浏览器的交互事件。示例: ``` chrome.runtime.onInstalled.addListener(function() { console.log("Extension installed"); }); chrome.tabs.onActivated.addListener(function(activeInfo) { console.log("Tab activated: " + activeInfo.tabId); }); chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) { if (changeInfo.status == "complete") { console.log("Tab updated: " + tabId); } }); chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) { console.log("Message received: " + message); }); ``` 4. 在Chrome浏览器中打开“扩展程序”页面(可以在地址栏中输入“chrome://extensions/”打开)。在页面右上角启用“开发者模式”。 5. 点击“加载已解压的扩展程序”,选择您的插件项目的根目录。 6. 您的插件现在已经加载,并在后台监听浏览器的交互事件。您可以在“background.js”中编写适当的代码来响应这些事件。 需要注意的是,您需要在“manifest.json”文件中声明必要的权限,例如“tabs”和“activeTab”,以便您的插件能够访问浏览器的标签页和活动标签页。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值