Chrome 扩展

1. 打开 Chrome，前往 chrome://extensions。
2. 启用开发者模式 (右上角) 。
3. 点击加载已解压的扩展程序。
4. 选择你克隆的 hyperdx-chrome-extension 目录。

扩展安装后会以 HyperDX Browser Extension 的形式出现在工具栏中。

如果你已经有 ClickStack 或 HyperDX 摄取端点，请跳到 配置扩展。

如果是本地 ClickStack 环境，请启动 OpenTelemetry collector。将 {{CLICKHOUSE_ENDPOINT}} 和 {{CLICKHOUSE_PASSWORD}} 替换为你的 ClickHouse 连接信息：

export CLICKHOUSE_ENDPOINT={{CLICKHOUSE_ENDPOINT}}
export CLICKHOUSE_PASSWORD={{CLICKHOUSE_PASSWORD}}

docker run \
  -e CLICKHOUSE_ENDPOINT=${CLICKHOUSE_ENDPOINT} \
  -e CLICKHOUSE_USER=default \
  -e CLICKHOUSE_PASSWORD=${CLICKHOUSE_PASSWORD} \
  -p 8080:8080 \
  -p 4317:4317 \
  -p 4318:4318 \
  clickhouse/clickstack-otel-collector:latest

打开 http://localhost:8080 上的 HyperDX，确认 UI 已正常运行。

如需在本地完整部署 ClickHouse 和 HyperDX UI，请参阅 ClickStack 入门。

对于本地 ClickStack，可能不需要 API key——如果将遥测数据发送到 http://localhost:4318 上的自托管 collector，请将扩展中的该字段留空。

对于 ClickStack Cloud 或 HyperDX Cloud 摄取，请打开 HyperDX，前往 Team Settings → API Keys，然后复制你的摄取 API key。

点击 Chrome 工具栏中的 HyperDX Browser Extension 图标，并填写以下设置：

点击 Save Configuration，然后重新加载你想要插桩的任意标签页。

上面的截图展示了一个典型的本地配置：已启用监控，已设置服务名称，collector 指向 http://localhost:4318，并且 trace 传播仅限 API 和 localhost URL。

在 Chrome 中打开任意网站或本地应用——例如前端开发服务器的 http://localhost:3000。

像平常一样与页面交互：点击链接、提交表单、触发错误，以及在不同视图之间切换。只要配置有效，扩展就会在每次页面加载时自动注入 Browser SDK。

返回 http://localhost:8080 上的 HyperDX，并从左侧边栏进入 Client Sessions。

你应该能看到自己的会话已显示在列表中，包括其耗时和事件数。点击 ▶️ 按钮即可回放。

在 Highlighted 和 All Events 模式之间切换，以调整时间线显示的详细程度。