BTC-Mini-Terminal：摸鱼盯盘两不误的浏览器小插件

想法#

盯盘这件事，有两个矛盾：

打开交易所 → 太显眼，不适合”摸鱼”
不打开交易所 → 不知道行情，心如猫抓

BTC-Mini-Terminal 是第三个选项——一个驻扎在浏览器左下角的小面板，刷新任何网页时它都在那里，安安静静显示 BTC 实时价格。点一下弹出迷你 K 线图，再点一下收回去。

架构设计#

为什么是油猴脚本#

方案	优点	缺点
Chrome 扩展	权限大、独立运行	开发成本高、审核慢
独立网页	简单	不能”跨站”显示
油猴脚本	零配置、全站运行、用户一键安装	受 GM API 限制

油猴脚本的方案是最轻量的——用户只需点一下”安装脚本”，之后访问任何网站都能看到 BTC 面板。

数据流#

1
Binance API ──┬── 成功 → 更新价格 + K 线数据
2
              │
3
              └── 失败 → CoinGecko API (fallback)
4
                         │
5
                         └── 失败 → 显示"API 不可用"
6
                                    上次成功的数据继续展示

双 API 备份 + 优雅降级。币安被墙时自动切 CoinGecko，两个都挂了就用缓存数据，面板不白屏。

核心实现#

面板注入与隔离#

1
// 创建 Shadow DOM 隔离，避免与宿主页面样式冲突
2
const host = document.createElement('div');
3
host.id = 'btc-terminal-host';
4
document.body.appendChild(host);
5

6
const shadow = host.attachShadow({ mode: 'closed' });
7
// 所有 CSS 在 Shadow DOM 内部，100% 隔离

为什么用 Shadow DOM？ 油猴脚本运行在任意网站上。如果不隔离样式，GitHub 的 CSS 可能会把你的面板搞成一团糟。{ mode: 'closed' } 防止宿主页面的 JS 意外操作面板 DOM。

K 线图渲染#

1
// Lightweight-Charts — 28KB gzipped
2
import { createChart } from 'lightweight-charts';
3

4
const chart = createChart(container, {
5
  width: 320,
6
  height: 200,
7
  layout: {
8
    background: { color: 'transparent' },
9
    textColor: '#d1d5db',
10
  },
11
  grid: {
12
    vertLines: { color: 'rgba(255,255,255,0.05)' },
13
    horzLines: { color: 'rgba(255,255,255,0.05)' },
14
  },
15
  crosshair: { mode: 0 }, // 禁用十字线（小面板不需要）
16
});
17

18
const candleSeries = chart.addCandlestickSeries({
19
  upColor: '#22c55e',
20
  downColor: '#ef4444',
21
  borderVisible: false,
22
  wickUpColor: '#22c55e',
23
  wickDownColor: '#ef4444',
24
});

选择 lightweight-charts 而非 TradingView Widget：

体积小 10 倍
无 iframe（性能更好）
完全可控的样式

价格轮询策略#

1
let pollInterval = 5000;  // 默认 5 秒
2

3
function smartPoll() {
4
  const now = Date.now();
5
  const lastUpdate = localStorage.getItem('btc_last_update');
6

7
  // 如果用户刚切回来，立刻刷新
8
  if (!lastUpdate || now - Number(lastUpdate) > pollInterval * 2) {
9
    fetchPrice();
10
  } else {
11
    // 正常轮询
12
    setTimeout(fetchPrice, pollInterval);
13
  }
14
}
15

16
// 页面可见性变化时优化
17
document.addEventListener('visibilitychange', () => {
18
  if (!document.hidden) smartPoll();
19
  // hidden 时不轮询，省流量省 CPU
20
});

持久化配置#

1
键名                | 用途
2
btc_widget_candles  | K 线点数 (50/100/200)
3
btc_widget_collapsed| 折叠状态 (1/0)
4
btc_widget_proxy    | 可选 CORS 代理前缀

优先使用 GM_getValue/GM_setValue（油猴专用存储），回退到 localStorage。这样即使脚本被重新安装，用户设置也不会丢失。

设计决策#

左下角而非右上角: 右下角已经被系统通知/输入法占据；左下角是视觉”盲区”，放面板最不突兀
折叠默认: 首次安装后面板是折叠的——用户适应后再展开，降低骚扰感
无声音通知: 价格波动提醒用颜色闪烁，不打断用户。摸鱼的黄金法则——不引人注目

安装方式#

油猴脚本发布在 GreasyFork，一键安装。

源码: github.com/CHN-DST/BTC-Mini-Terminal · ⭐ 2