N-Tab

背景介绍

改名N-Tab，方便口头传播，之前的名字太中二了，Orz
本项目是一个Chrome插件
经过4年时间自用，敢保证永不丢失数据，速度超快，可存储数据超多，绝对是效率提升工具！
说说OneTab插件，刚开始使用的童鞋估计都会跟我一样感觉相见恨晚，惊叹怎么那么好用呢！特别是对于那些喜欢开很多tab但是就不想关的童鞋，鼠标一点就所有tab全部关闭并收集到后台管理页了，方便后面慢慢看，简直不要太舒服。但是呢，如果长时间使用，有几率触发bug，所有保存的tab的记录都不见了。找不回来的那种痛！本人经历了至少三次了Orz:sob:！OneTab的数据是存储在浏览器的storage里的，丢了后真的就找不回来了，~~而且OneTab已经好久好久没更新了，作者也联系不上~~，已经有更新了，但还不如不更新，会有同步bug，直接丢失所有数据。痛定思痛，本插件实现了类似OneTab的功能，并且利用了GitHub和Gitee的gist来实时远程保存，本地+远程=双保存双保险，妈妈再也不用担心我丢了收集了好久的数据了。那些历史久远的，想等等再看，然后几年都没去看的那些网址:flushed:，一切都有记录在案。甚至可以帮助回忆某年某日做了什么，为什么会打开这些网址！

支持多款浏览器

谷歌 Chrome 浏览器：Chrome商店
微软 Edge 浏览器：Edge商店

快速使用

PS： 不想看长篇大论的介绍和功能说明，直接看安装方法
点击插件图标，会打开后台管理页
在任何打开的网页（包括本地打开的文件，如PDF，视频，照片），空白处直接右键点击，找到N-Tab，有多种功能可选
在任何打开的网页（包括本地打开的文件，如PDF，视频，照片），按快捷键Ctrl+Q，可以发送所有标签
在任何打开的网页（包括本地打开的文件，如PDF，视频，照片），按快捷键Alt+Q，可以发送当前标签
如需要定时同步功能，请配置GitHub或Gitee的token，可二选一或全配置
关于暗黑模式，折腾了一下发现，Chrome浏览器自带的暗黑模式效果就很不错，就没有另外添加了。暗黑模式开启方法

实现功能

划词翻译
- 支持配置是否启用，自动检测中文还是英文，互译
插件图标显示当前一共打开了多少个tab，多个窗口也能统计
类似OneTab的功能
- 支持发送所有标签并关闭页面
- 支持发送当前标签并关闭页面
- 支持发送其他标签并关闭页面
- 支持发送左侧所有标签并关闭页面
- 支持发送右侧所有标签并关闭页面
- 支持右键菜单，上面所有功能
- 支持快捷键Ctrl+q，触发发送所有标签
- 支持快捷键Alt+q，触发发送当前标签
- 支持手动多选标签后，快捷键Alt+q，触发发送当前标签，而实现一次性发送多个标签
- 支持在新增标签和删除标签的时候自动同步到Gitee的gist（使用这个功能请先手动同步一次，然后查看日志，检查链路是否通顺），ps：基于某个墙和网络的原因，只会实时自动同步到Gitee，定时自动同步功能2个平台都可以
- 支持把从OneTab导出的内容直接导入本插件
- 支持导出本插件格式的内容
- 支持把从本插件导出的内容重新导入
- 支持配置，单个tab和tab组打开后是删除还是保留
- 支持配置，发送当前标签后是否打开后台管理页
- 后台管理页支持超级拖曳tab组和单个tab
- 支持显示当前已用存储空间storage/总存储空间storage或已用百分比
- 支持手动push或pull到GitHub的gist
- 支持自动push到GitHub的gist，即自动定时同步到GitHub的gist
- 支持手动push或pull到Gitee的gist
- 支持自动push到Gitee的gist，即自动定时同步到Gitee的gist
- 支持查看跟gist操作有关的log记录，日志记录只保存最新100条
- 支持单击标签组显示的标签个数时，收起或展开效果
- 支持锁定或解锁整个标签组，即锁定后标签组和标签不能删除，不能拖曳，但能被占位
- 支持置顶或取消置顶整个标签组，即置顶后会上浮到最上面，不能拖曳，但能被占位
- 支持命名标签组
- 支持回收站，所有在管理页面被删掉的东西，都会存到回收站里，回收站里的标签可以恢复，也可以彻底删除
中英国际化切换，渣渣英语，渣渣翻译，包涵包涵

安装方法

直接在Chrome插件商店下载安装，地址
或者直接下载最新的crx或zip文件，右键选择解压缩到文件名，不要解压缩到当前目录，或者直接下载源码；
打开Chrome浏览器或其他支持Chrome内核的浏览器，找到并点开“扩展程序”项；
在打开的新页面中，勾选“开发者模式”，点击“加载已解压的拓展程序”按钮；
从打开的“浏览文件夹”窗口中，选择第1步解压缩的的文件夹，点击“确定”按钮；
此时该插件就正式启动了，观察浏览器右上角是否有新的插件图标，新版Chrome浏览器要手动固定才会显示。
建议插件安装成功后，关闭开发者模式。
现在就可以正常使用了，假如需要同步功能，先获取GitHub和Gitee的token，在“其他功能”-“查看配置”里对应的地方填写token，然后在“同步功能”-“是否自动同步”选是；
2个同步平台，可以同时配置，也可以只配置1个，不冲突，假如选了自动同步，会自动无感知的定时同步到2个平台里，注意：Gitee特别设置了只要有修改就无感知自动实时同步，也就是说只要有修改，删除，移动等动作，就自动实时同步到Gitee，选Gitee更保险，真.理论上永不丢失数据。

获取token方法

Gitee

打开Gitee，登录后
打开私人令牌
右上角生成新令牌，输入一个看起来有意义能明白啥用途的名字，比如： my-onetab-syncing-settings ，注意只勾选gist(可Ctrl+F搜索一下)，其他的不要勾选，
提交后，输入密码，生成后，要把显示的token另外找地方备份记录一下，只有在第一次创建的时候才会显示的，错过了只能重来。

GitHub

打开GitHub，登录后
打开私人令牌
右上角选择Generate new token (classic)，输入一个看起来有意义能明白啥用途的名字，比如： my-onetab-syncing-settings ，注意只勾选gist(可Ctrl+F搜索一下)，其他的不要勾选，
提交后，输入密码，生成后，要把显示的token另外找地方备份记录一下，只有在第一次创建的时候才会显示的，错过了只能重来。

暗黑模式开启方法

(可选)Win10本身变成暗黑模式

Windows 设置--个性化--颜色--选择颜色(自定义)--选择默认应用模式(暗)--这就是系统级别的暗黑模式，所有支持暗黑模式的软件都会自动变成暗黑模式

只是网页内容变成暗黑模式

打开Chrome浏览器，输入 Chrome://flags，在搜索框输入Auto Dark Mode for Web Contents，在找到的设置右边改成Enabled
重启Chrome浏览器，这样本插件就自动变成暗黑模式了！

使用方法

打开某个网页，文字翻译，用法如下：
- 在后台管理页菜单其他功能，是否划词翻译，配置是否启用，默认关闭
- 双击或是鼠标滑动选择文字，自动弹框，得到翻译结果，弹框有2种方式消除，一种是鼠标在页面再点一下就直接消除，一种是等3秒自动消除。
左键点击插件图标，会打开后台管理页；
右键点击插件图标
- N-Tab，点击会打开GitHub项目地址；
- 发送当前标签，点击会发送当前标签到后台管理页并关闭当前页面
- 打开后台管理页，点击会打开后台管理页；
- 发送所有标签，点击会发送所有标签到后台管理页并关闭所有页面
- 发送其他标签，点击会发送除了当前标签的其他标签到后台管理页并关闭其他页面
- 发送左侧所有标签，点击会发送除了当前标签的左侧标签到后台管理页并关闭其他页面
- 发送右侧所有标签，点击会发送除了当前标签的右侧标签到后台管理页并关闭其他页面
在任何打开的网页（包括本地打开的文件，如PDF，视频，照片），空白处直接右键，找到N-Tab，可以点击3里的所有功能
在任何打开的网页（包括本地打开的文件，如PDF，视频，照片）
- 按快捷键Ctrl+Q，会触发发送所有标签
- 按快捷键Alt+Q，会触发发送当前标签
超级拖曳tab组和单个tab，互斥

进入后台管理页，点击菜单其他功能，有拖曳tab组和拖曳单个tab的配置项，这2个是互斥的，一次只能配置一种
从OneTab导出的数据直接导入本插件

进入后台管理页，点击菜单其他功能，导入OneTab格式，把从OneTab导出的地址直接复制过来，点导入。PS：导入的数据和最后生成的tab组的关系，下空一行表示是一个tab组的，即用空行来分割。
导出本插件格式的内容

进入后台管理页，点击菜单其他功能，导出，会导出本插件格式的内容，包括标签组标题，是否锁定等。
导入本插件格式的内容

进入后台管理页，点击菜单其他功能，导入默认格式，把导出的本插件格式的内容复制过来，点导入。
手动push或pull到GitHub或者Gitee的gist

进入后台管理页，点击同步功能，有五个选项，推送到GitHub的gist里，从GitHub的gist里拉取，推送到Gitee的gist里，从Gitee的gist里拉取，按字面意思选择功能，这里面会有个token的强制要求，这个token用于授权，获取GitHub和Gitee的token
自动定时同步功能

点击同步功能，勾选了自动同步后，（使用这个功能请先手动同步一次，然后查看日志，检查链路是否通顺）
- 会定时自动同步到GitHub(每隔90分钟)和Gitee(每隔70分钟)，目前是写死的时间间隔，同步操作记录会写在日志里(就算选了不自动同步也会有日志)
- 2个同步平台，可以同时配置，也可以只配置1个，不冲突
- 注意：Gitee特别设置了只要有修改就无感知自动实时同步，也就是说只要有修改，删除，移动等动作，就自动实时同步到Gitee，选Gitee更保险，真.理论上永不丢失数据。
日志功能

点击其他功能，查看日志，日志页面显示操作GitHub和Gitee的过程，日志记录只保存最新100条
配置功能
- 点击其他功能，查看配置，进入配置页，配置单个tab和tab组恢复后是删除还是保留
- 点击其他功能，查看配置，进入配置页，配置"发送当前标签"后，是否打开后台管理页
- 可手动修改配置GitHub和Gitee的token
中英文国际化切换

切换英文chrome的方法：如果打开了chrome，先关闭，然后新建一个chrom浏览器快捷方式，右键快捷方式，属性，在目标栏的最后面加上，（--前面有空格）
```
 --args --lang=en
```
通过这个快捷方式打开的chrome就是英文版的。

PS： 假如不生效，检查是否chrom真的关闭，查看任务管理器，进程是否还在，这是chrome的一个设置选项，关闭 Google Chrome 后继续运行后台应用，关闭这个选项就能真正关闭chrome，再尝试切换英文chrome。
后台管理页，点击已使用，可以切换百分比和已用具体数据，2种显示
回收站，点击后台管理页的回收站，可以看到所有被删掉的tab组，可以恢复，也可以彻底删除，跟后台管理页一样，只是多了恢复功能

一些总结

万丈高楼平地起，感谢小茗同学的这个博文，看完这个就懂怎么开发插件了，《Chrome插件开发全攻略》配套完整Demo
本插件存的网址是放在浏览器的storage里的，chrome的storage分sync storage和local storage，顾名思义，一种是可同步的，一种是只本地的，sync storage需要登录chrome的设备之间才会同步。但是呢，sync storage的总存放空间太小了，只有102400字节=100kb，而local storage，总大小有5242880字节=5mb，所以本插件使用的是local storage，如果想实现tab同步的话，可以push到gist，再从另一台机子pull下来。
不明来历的插件不要随便装，插件的权限太高了，很危险，比如可以直接替换原来的js里的function，可以直接获取原来js里定义的变量，可以直接覆盖掉原来的html结构，可以直接使用cookies，可以在对方没有公开api的情况下直接模拟，可以随便跨域，可以直接对http请求做拦截，注入，加Referer等等。
终于搞明白了，如何让异步回调的代码按顺序for循环，asyc+await+promise，promise的话推荐这个博文，看完就懂了，JS如何让异步回调的代码在for循环里按顺序一个执行完再执行下一个，使用asyc+await+promise
学了个超简单的前端框架，名字很拗口，Mithril 是一个现代化的 JavaScript 框架，用于构建单页面应用。它非常小巧（< 8kb gzip），且内置了路由和 XHR 工具。源码，中文教程，非常简单，看一下例子就懂了。
学了超级拖曳，Sortable是一个功能强大，简单，还有动画效果的工具，官方多种demo，源码，主要关注一下事件处理，还有就是嵌套拖曳的时候，数据保存问题。
学习了momentjs，用于时间日期处理。
学习了boostrap，用于响应式布局，英文官网，中文网
Gitee用的数据库是mysql，而且是不支持保存emoji表情的，:weary:，可能是版本太低也可能是字符集问题。
GitHub的api，如果返回的数据太大，会进行截断，需要注意，而Gitee的就不会，可能没考虑过这个问题
翻译用的是腾讯交互翻译api，腾讯交互翻译，自己扒的api
GitHub的根据gistId获取gist，居然不用token也能获取私有的，理论上存在被人撞到私有gist的可能，Gitee则需要
已测试过，后台管理页存放1w+标签都支持，只是渲染的时候开始卡了，应该很少人有1w+保存的标签吧，虽然在chrome插件商店看过有人的OneTab有1w+标签，:joy: ,如果需要，后面再加分页。
百度统计不支持chrome-extension协议和file协议，找到一个开源的轮子，辅助生成百度统计插件