Attack on Life ⚔️

最近在做WebShell自定义热键，遇到的问题是网页热键受限于浏览器和操作系统，有些热键无法捕获，比如command t。

经过调查发现navigator.keyboard.lock可以解决这个限制问题，这里记录下使用过程中的一些问题和心得

不可拦截热键

以Mac为例，实际测试比如以下几个热键不支持拦截。即JS层面我们无法捕获这类按键，也就阻止默认行为

1
2
3
4
5

⌘ N 创建新window
⌘ T 创建新Tab
⌘ W 关闭Tab
⌘ ⇧ [ 左Tab
⌘ ⇧ [ 右Tab

这个似乎无解，但有了lock api 这些就有可能解决了

GPTs 6号发布距今有几天了，玩了下觉得非常不错，熟悉后对于个人使用GPT还是很方便的。这里记录下使用过程中的一些问题和心得

GPTs

GPTs即每个人可以自定义创建个性化的GPT可以根据自己的需求进行配置，比如聊天助手、知识库助手、API助手等等。这里的GPTs是基于ChatGPT的，所以可以理解为ChatGPT的升级版，可以自定义更多的功能。

要求

使用GPTs需要满足以下条件

终端可以显示图片吗？当然，这里就总结下基于xterm.js实现图片显示

效果

实现

最近WebShell开发时，遇到一个动态调整样式的需求即当终端开启上下分屏，上侧出现编辑器的时候，下侧的终端需要调整样式，具体来说是调整最小高。这里考虑走css实现。

分析

has函数可以使用css选择器来判断后面或者子后代是否存在某个元素，因此这样利用has可以捕获到上下分屏的情况下的编辑器元素，之后就可以正常使用+获取兄弟元素，再实际调整样式了。当然JS也可以实现，但CSS实现更加简单

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<style>
  .terminal {
    width: 100%;
    min-height: 200px;
    background-color: #4bd58d;
  }
  .editor{
    width: 100%;
    height: 100px;
    background-color: #003dfd;
  }

  .editor:has(+.terminal) +.terminal{
    background-color: #ff0000;
  }
</style>

最近WebShell在支持各Shell函数钩子时遇到了些问题，针对各Shell的安装使用做个记录，以便后续使用。

这里以Ubuntu为例

Bash

1
2
3

chsh -s $(which bash)
# 版本 
bash --version

Zsh

目前个人观看电影多数时候是使用Infuse+阿里云盘方案，但找资源这种事有时还是麻烦了些，因此这里考虑搞下Netflix会员。

前置条件

1. 代理，无论是拼车还是自己注册/支付/使用都需要解决代理

2. 注册区对应国家代理IP/支付手段

注意

之前入手的小狗D531已用5年，千元的价格使用这么长时间算值了。目前电池续航也还行，但电动地刷经常坏。

这次决定换成戴森。

成本考虑，这次买最便宜的款式v8，新款比如v12相较v8也只多1k成本，但这里还是维持下预算及预期，够用即可。因此走JD 1989CNY入手了v8。在使用了2周后，这里总结下优缺点

优点

1. 外观满分

   开箱之后，看到整个设备的外观真的是很漂亮，实际上手发现是塑料的，但还是很好看的，手持也并不重。

2. 用户体验好

   • 首次使用时微信扫码，进行注册，小程序中查看使用教程和保修服务，快速学习各个配件的使用
   • 之前小狗吸尘器还需要取下电池单独充电，而戴森可以直接放到挂座里即可
   • 过滤器/吸头等很好拆卸清洁，大吸头使用硬币/一字螺丝刀打开，再用刷子清洁即可

3. 配件实用

   之前小狗的几个配件都没用上，但戴森的使用起来效果不错，并且更换配件时，个人觉得比小狗的更流畅，因此也就用的频次高些。

4. 吸尘效果可以

userAgent再熟悉不过了，但具体怎么用，能做到和做不到哪些呢，这里Mark下。

访问方式

• 前端网页的话，可以使用alert(window.navigator.userAgent);

• 服务端的话，可以使用req.heades[user-agent]

推荐工具包

userAgent是个字符串，从中解析出浏览器版本，操作系统等信息的话，需要使用正则。这里推荐个常用包

WebShell终端给了用户网页形式操作终端的能力后，还需要提供可视化的文件管理，具体来说就是文件上下载，权限修改，在线编辑等。

这里总结下关于这块的实现。

ssh2+ssh2-sftp-client

使用ssh2模块进行解决终端连接后，继续使用ssh2-sftp-client来实现文件的相关操作

1. list方法实现文件列表获取
   • 返回值中可以拿到文件类型，文件名称，文件所属用户id，文件所属用户组id，文件大小，访问时间，修改时间
   • 需要说明，如果是软链接，返回的type是l，硬连接的话会是-
2. get/put方法实现流方式的上下载
3. rename方法实现文件重命名
4. delete方法实现文件删除
5. stat方法实现文件信息获取
6. mkdir方法实现文件夹创建
7. rename方法实现文件重命名

如上使用这些方法可以解决了文件管理的一些基本问题，但还有些问题需要处理

最近搬家了，也重新换了下主路由器，为了解决下家里部分设备的访问问题，这里重新搞下N1作为旁路由。

这里Mark下

1. 新路由器下先确定N1的固定内网IP，比如我这里设置为192.168.5.200

2. 在老路由器连接N1的情况下，访问N1，修改IP地址，网关，自定义DNS即主路由IP信息

3. N1连接新路由器，访问新的IP地址

4. N1下配置openclash

5. 对应设备比如NS，选择手动配置IP地址/子网掩码/网关/DNS信息即可

这样如果是需要科学上网的设备，如上进行手动配置即可。当然走Surge DHCP也不错，这里因为考虑稳定性，我还是选择走N1-旁路由方案了。

相关文档