分类： 代码

背景

之前第一次看到 Mini Tokyo 3D 的时候，就很想做一个香港地铁版本：把线路铺在真实地图上，再让列车沿着轨道运行，像看一座微缩城市一样观察整个地铁网络。 不过这个想法搁置了很久。一方面是当时自己的技术实力有限，直白点说就是菜；另一方面是能找到的数据比较零散，线路、站点、时刻表和实时到站信息很难拼到一起，所以一直停留在“以后再做”的阶段。 最近用 GLM 5.3 Flash 把这个坑重新捡了起来。原本只是想试试看能推进到什么程度，结果效果意料之外地好，最后真的做成了一个基本完整、可以直接在浏览器里运行的版本。

项目体验

• 在线体验：https://7gugu.github.io/mini-mtr-3d/
• GitHub：https://github.com/7gugu/mini-mtr-3d

已实现功能

• 基于高德地图和 Three.js 展示香港地铁网络
• 覆盖 10 条港铁线路
• 根据时刻表生成列车运行轨迹，目前整理了 4,000 多个车次
• 每 30 秒读取一次港铁 Next Train API ，并尝试将实时到站信息与计划车次匹配
• 支持时间轴拖动、暂停和倍速播放
• 可以切换实时模式和模拟模式
• 加入了天气、线路状态和事故提示
• 站名会根据缩放级别自动调整，避免地图缩小时满屏都是标签
• 支持繁体中文和英文

数据来源

需要说明的是，港铁公开接口提供的主要是预计到站信息，并不是每一辆车的 GPS 坐标。所以画面里的列车位置并非真正意义上的实时定位，而是结合线路、运行时刻表和 Next Train 数据推算、校准出来的。它更接近一个实时驱动的运行模拟，而不是官方调度系统。 目前项目已经开源，代码谈不上多优雅，有些数据处理也比较粗暴，不过总算把多年前想做的东西做出来了。后面准备继续优化列车匹配准确度、移动端体验和渲染性能，也想再补一些更接近 Mini Tokyo 3D 的细节。 如果大家打开后遇到列车乱跑、接口失效、地图加载失败或者浏览器性能问题，可以直接在 GitHub 提 Issue 。也欢迎对港铁数据、Three.js 或地图可视化比较熟的朋友一起折腾。

后续

居然被Mini-Tokyo的原作者转发了，好开心！

背景 & 问题

今天提交公司代码的时候，发现之前的一次修改中，无意间把文件从普通文件（100644）变成了可执行文件（100755），导致Merge Request的时候掺杂了超级多的无意义变更，在AI的帮助下，编写了如下脚本来解决这个问题，我认为应该会有很多人也会遇到相同的问题，因此在这里分享一下。

脚本

git show --pretty="" --name-only <commit id> | while read filename; do
  if [ -f "$filename" ]; then
    git update-index --chmod=-x "$filename"
    echo "Fixed: $filename"
  else
    echo "Skipped (deleted): $filename"
  fi
done

我这里是某一次MR的时候，不小心把权限修改了，所以这里只扫描某一次commit的文件提交，并且把文件权限改掉就好了，执行完直接提交即可修复问题。

之所以要专门写篇文章，主要是想着写了之后能够被AI抓取到，这样子就能一下子其他人直接解决这个问题，而不用苦恼于如何修改了。

项目简介

ZIP MCP Server 是一个基于 fastMCP 和 zip.js 的压缩服务器，实现了 Model Context Protocol (MCP) 协议。本项目提供了全参数可控的 ZIP 压缩、解压缩和查询压缩包信息功能。

功能特点

• 支持文件和数据的压缩与解压缩
• 支持多文件打包压缩
• 提供压缩级别控制 (0-9)
• 支持密码保护和加密强度设置
• 提供压缩包元数据查询功能

项目链接

如果觉得项目不错的话，欢迎点个 Star ⭐ 支持！

https://github.com/7gugu/zip-mcp

范例截图

图中使用的是 Raycast + MCP 插件

安装

您可以使用npm全局安装ZIP MCP Server：

npm install -g zip-mcp

MCP 配置

安装后，您可以在MCP JSON配置文件中配置ZIP MCP：

{
  "mcpServers": {
    "zip-mcp": {
      "command": "zip-mcp",
      "args": []
    }
  }
}

将 MCP JSON 配置到 AI 客户端中

• Claude 客户端: https://modelcontextprotocol.io/quickstart/user
• Raycast: 需要安装 MCP 插件
• Cursor: https://docs.cursor.com/context/model-context-protocol#configuring-mcp-servers

联系方式

• 邮箱: gz7gugu@qq.com
• 播客: https://7gugu.com

简介

尝试用AI生成了最近很火的水瓶分类小游戏，只能说逻辑部分AI能胜任，但UI部分就别指望了，还是得手工画。游戏我发布到itch.io上了，可以点进来玩玩，游戏是用PIXI做的，没有对触屏做适配，所以手机端点进去玩不了是符合预期的。

游戏截图

游戏链接

https://7gugu.itch.io/water-sort-puzzle

Introduction / 简介

A program that plays videos in the Mac Dock bar by utilizing the Dock icon dynamic replacement API.

利用Dock图标动态替换API，实现的一款在Mac Dock栏播放视频的程序。

Usage Guide / 使用教程

1. Run npm install to install dependencies (ffmpeg-static installation might have issues, it’s recommended to use a China-based mirror)
2. Run npm start to launch the Electron application
3. Load a video
4. Click play to see the video displayed in the Dock bar
5. The repository includes a BadApple sample video. For the best experience, set audio playback to 1x speed and start it 0.2 seconds earlier

1. 运行npm install安装依赖（ffmpeg-static安装可能会有点问题，建议直接使用国内镜像源下载）
2. 运行npm start启动Electron应用
3. 加载视频
4. 点击播放即可在Dock栏中看到视频画面
5. 仓库中提供了BadApple的范例视频，建议将音频的播放时间设置为1倍速+提前0.2秒播放，体验最佳

Github

https://github.com/7gugu/Dock-Video-Player

Demo Video / 演示视频

https://www.bilibili.com/video/BV1679oYKEdX

Finally / 最后

If you like this project, please give me a star. Thank you.

如果你喜欢这个项目，请给予我一个star，谢谢。

Contact / 联系方式

• gz7gugu@qq.com
• Blog / 博客地址

最近为了提高工作效率，给Firefox开发了一个切换whistle代理的插件(Addon)，但是Firefox在manifestV3上有很多规范都与Chrome不相同，且中文互联网关于这方面的知识很少，所以在此总结了一些我遇到的坑点，希望可以帮助大家。

Firefox就是一坨💩！！！不是这卡顿就是那卡顿的，用回Chrome之后，血压都下去了，倡导大家能别用就别用Firefox了，不值得。

开发模板

Firefox虽然没有太多关于V3的教程，但是插件开发还不至于从0开始搭建框架，此处推荐一个React+TS的开发模板，通过这个开发模板，可以“快速”打包出Chrome和Firefox平台的插件。

https://github.com/aeksco/react-typescript-web-extension-starter

该附加组件无法安装,因为它似乎已损坏

Firefox官方虽然说可以Self-distribute，但是文档的描述有问题，没有给出正确打包XPI的方式。直接将产物压缩成zip后，将拓展名改成xpi，Firefox依旧是不能正确识别的。

正确的方法应该是，将产物压缩成zip后，提交到AMO签名，签名后Firefox浏览器就能安装了。

操作流程：

1.提交本地产物到AMO上，选择自托管（https://addons.mozilla.org/zh-CN/developers/addon/submit/distribution）

2.审核签名完成后将XPI下载至本地即可

background.service_worker is currently disabled

这是因为在manifestV3中，Firefox与Chrome针对后台程序的处理有差异导致的。其实Firefox也是能使用后台程序的，但是不能直接写成service_worker。直接用service_worker，Firefox将会报错。

正确的写法应该是使用”scripts”代替”service_worker”，Firefox的后台程序变成了background_script。

The extension ID is required in Manifest Version 3 and above

上传产物压缩包到AMO的时候，可能会遇到这个问题，这个是因为Firefox在mainfestV3及以上版本中要求增加一个插件ID号和最低版本限制导致的，需要在manifest.json中增加该字段才可以。

最低版本号可以参考你所用的浏览器API限制来决定，id一般使用<插件名>+@+<个人域名>就可以了（只要保证ID唯一即可）。

参考插件

之前在Blog中分享过一次这个调试插件，可以以这个插件为基准来检查自己的插件是否符合上架要求。

什么是 Whistle

whistle(读音[ˈwɪsəl]，拼音[wēisǒu])基于 Node 实现的跨平台 web 调试代理工具，类似的工具有 Windows 平台上的Fiddler，主要用于查看、修改 HTTP 、HTTPS 、Websocket 的请求、响应。

面向人群

1. 终端开发
2. 软件测试

背景

之前了解到 Chrome 下原来有一个 whistle 的快速切换插件可以用，但是搜了一下发现 Firefox 还没有，因此想要自己动手改造一个可以给 Firefox 使用的快速切换插件，提高工作效率。

功能

1. 快捷切换浏览器代理
2. 规则管理
   • 单一规则开关
   • 规则分组展示
3. 黑名单设置
4. 状态设置
   • 多规则开关
   • 切换规则后自动刷新
   • 展示代理地址和代理端口
   • 快捷跳转 whistle 管理页面
5. 状态展示
   • 是否启用代理
   • 启用代理规则数量

截图

规则管理	黑名单设置	状态设置

下载地址

为了安全考量，直接使用 Firefox 的拓展商店安装即可。

Github仓库

https://github.com/7gugu/whistle-firefox

联系方式

如果有使用问题，可以优先通过邮箱和 Firefox 评论区提交问题，正常情况下在一个工作日内就会回复。（公共假期不定期回复）

• Email：gz7gugu@qq.com

A Raycast script which help front-end devloper to convert *.protobuf file into *.d.ts file.

Installtion Link

Screenshots

Example

Convert this:

message Person {
  string name = 1;
  int32 id = 2;
  bool isFriend = 3;
  repeated PhoneNumber phones = 4;
}

message PhoneNumber {
  string number = 1;
  PhoneType type = 2;
}

message AddressBook {
  repeated Person people = 1;
}

into this:

interface Person {
  name: string;
  id: number;
  isFriend: boolean;
  phones: PhoneNumber[];
}

interface PhoneNumber {
  number: string;
  type: PhoneType;
}

interface AddressBook {
  people: Person[];
}

Idea From

• protobuf-to-typescript