做了一个可以让大家视奸我的网站

缘起#

没别的，之前就看到有类似的项目了，不过那个项目是部署在Docker上的，需要依赖服务器运行，我就在想能不能前后端分离，将项目直接部署到EdgeOne或者Vercel上。

于是有了这个项目：Looking-me

Flygeon

Looking-me

Waiting for api.github.com...

00K

Waiting...

效果预览#

架构设计#

1
flowchart LR
2
    subgraph A["本地采集端"]
3
        A1[Python]
4
        A2[win32gui 捕获窗口]
5
        A3[每 30s 心跳]
6
    end
7

8
    subgraph B["云端服务"]
9
        B1[Supabase]
10
        B2[PostgreSQL]
11
        B3[Storage 图标]
12
    end
13

14
    subgraph C["前端展示"]
15
        C1[EdgeOne 静态页面]
16
        C2[HTML/CSS]
17
        C3[supabase-js]
18
    end
19

20
    A -->|REST API 写入 + 图标上传| B
21
    B -->|Realtime 订阅变更| C

1. 本地采集端 (Python)#

用 win32gui 获取当前活动窗口标题，psutil 获取进程名，通过 Supabase REST API 写入：

1
# 获取活动窗口
2
hwnd = win32gui.GetForegroundWindow()
3
title = win32gui.GetWindowText(hwnd)
4

5
# 通过 REST API 写入 Supabase
6
rest_post("windows", {
7
    "id": 1,
8
    "title": title,
9
    "process": exe_name,
10
    "updated_at": "now()",
11
})
12

13
# 同时累积使用时长
14
usage[prev_process] += elapsed
15
rest_post("usage_stats", {"process": proc, "seconds": secs})

每 30 秒轮询一次，窗口变化时立即推送，同时每轮发送心跳保持在线状态。

2. 前端 (HTML + supabase-js)#

前端是一个纯静态 HTML 文件，通过 supabase-js 的 Realtime 功能订阅数据库变更：

1
// 订阅 realtime 变更
2
sb.channel('w')
3
  .on('postgres_changes', {
4
    event: '*',
5
    schema: 'public',
6
    table: 'windows',
7
    filter: 'id=eq.1'
8
  }, (payload) => {
9
    show(payload.new);   // 实时更新界面
10
  })
11
  .subscribe();

窗口切换时毫秒级响应，离线超过 60 秒自动显示 “似了” 骷髅。

部署教程#

第一步：创建 Supabase 项目#

打开 supabase.com，注册/登录
点击 New Project，填写名称和密码，完成创建

第二步：建表#

在 SQL Editor 执行：

1
-- 当前窗口表
2
CREATE TABLE public.windows (
3
  id          INTEGER PRIMARY KEY DEFAULT 1,
4
  title       TEXT NOT NULL DEFAULT '',
5
  process     TEXT NOT NULL DEFAULT '',
6
  updated_at  TIMESTAMPTZ NOT NULL DEFAULT now()
7
);
8

9
-- 使用统计表
10
CREATE TABLE public.usage_stats (
11
  process    TEXT PRIMARY KEY,
12
  seconds    INTEGER NOT NULL DEFAULT 0,
13
  icon_url   TEXT,
14
  updated_at TIMESTAMPTZ NOT NULL DEFAULT now()
15
);
16

17
-- Realtime
18
ALTER PUBLICATION supabase_realtime ADD TABLE public.windows;
19
ALTER PUBLICATION supabase_realtime ADD TABLE public.usage_stats;
20

21
-- RLS
22
CREATE POLICY "allow_anon" ON public.windows FOR ALL USING (id = 1) WITH CHECK (id = 1);
23
CREATE POLICY "allow_anon" ON public.usage_stats FOR ALL USING (true) WITH CHECK (true);
24

25
INSERT INTO public.windows (id, title, process) VALUES (1, '', '');

然后执行 github里的 migration_icons.sql 创建图标存储桶。

第三步：获取 API 凭据#

Supabase 控制台 → Settings → API Keys，记下：

Project URL（形如 https://xxxx.supabase.co）
anon public key（以 eyJhbGci... 开头）

第四步：配置本地采集端#

打开 window_monitor.py，修改第 5-6 行：

1
SUPABASE_URL = "https://你的项目.supabase.co"
2
SUPABASE_KEY = "你的anon key"

第五步：上传前端#

将生成的 index.html 、 styles.css 以及 icon.png 上传到 EdgeOne Pages：

第六步：启动#

1
python window_monitor.py

看到 [OK] Connected, tracking... 即表示成功。打开 EdgeOne 地址即可实时查看窗口活动。

访问 me.flygeon.top即可看到我在干啥~~（如果我还没似的话）~~