proxycast/extensions/proxycast-chrome/popup.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Proxycast Browser Bridge</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        width: 420px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        font-size: 13px;
        color: #333;
        background: #f9fafb;
        padding: 16px;
      }
      .header {
        margin-bottom: 16px;
      }
      .header h1 {
        font-size: 16px;
        font-weight: 600;
        color: #111;
        margin-bottom: 4px;
      }
      .header p {
        font-size: 12px;
        color: #6b7280;
      }
      .status-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
      }
      .status-label {
        font-size: 12px;
        color: #6b7280;
      }
      .badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 500;
      }
      .badge-on {
        background: #d1fae5;
        color: #065f46;
      }
      .badge-off {
        background: #fee2e2;
        color: #991b1b;
      }
      .quick-config {
        margin-bottom: 16px;
        padding: 12px;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        border-radius: 6px;
      }
      .quick-config-title {
        font-size: 12px;
        font-weight: 500;
        color: #1e40af;
        margin-bottom: 8px;
      }
      .quick-config-hint {
        font-size: 11px;
        color: #3b82f6;
        margin-bottom: 8px;
      }
      .quick-config-buttons {
        display: flex;
        gap: 6px;
      }
      .form-group {
        margin-bottom: 12px;
      }
      .form-label {
        display: block;
        font-size: 12px;
        font-weight: 500;
        color: #374151;
        margin-bottom: 4px;
      }
      .form-input {
        width: 100%;
        padding: 8px 10px;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        font-size: 13px;
        outline: none;
        transition: border-color 0.15s;
      }
      .form-input:focus {
        border-color: #3b82f6;
      }
      .endpoint-preview {
        font-size: 11px;
        color: #6b7280;
        word-break: break-all;
        margin-top: 8px;
        padding: 8px;
        background: #f3f4f6;
        border-radius: 4px;
      }
      .button-group {
        display: flex;
        gap: 8px;
        margin-top: 12px;
      }
      .btn {
        flex: 1;
        padding: 8px 12px;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.15s;
        background: white;
        color: #374151;
      }
      .btn:hover:not(:disabled) {
        background: #f9fafb;
        border-color: #9ca3af;
      }
      .btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
      .btn-primary {
        background: #3b82f6;
        color: white;
        border-color: #3b82f6;
      }
      .btn-primary:hover:not(:disabled) {
        background: #2563eb;
        border-color: #2563eb;
      }
      .btn-small {
        padding: 6px 10px;
        font-size: 11px;
      }
      .page-info {
        margin-top: 12px;
        padding: 10px;
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
      }
      .page-info-title {
        font-size: 12px;
        font-weight: 500;
        color: #111;
        margin-bottom: 4px;
      }
      .page-info-url {
        font-size: 11px;
        color: #6b7280;
        word-break: break-all;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <h1>Proxycast Browser Bridge</h1>
      <p>连接 Chrome 与 Proxycast 服务</p>
    </div>

    <div class="status-row">
      <span class="status-label">Observer 连接：</span>
      <span id="bridgeStatus" class="badge badge-off">未连接</span>
    </div>

    <div class="status-row">
      <span class="status-label">页面监控：</span>
      <span id="monitorStatus" class="badge badge-off">关闭</span>
    </div>

    <div class="quick-config">
      <div class="quick-config-title">🚀 一键配置</div>
      <div class="quick-config-hint">从剪贴板粘贴配置（在 ProxyCast 页面点击"复制配置"）</div>
      <div class="quick-config-buttons">
        <button id="pasteConfigBtn" class="btn btn-small">粘贴配置</button>
        <button id="clearConfigBtn" class="btn btn-small">清除配置</button>
      </div>
    </div>

    <div class="form-group">
      <label class="form-label" for="serverUrl">Server URL</label>
      <input
        type="text"
        id="serverUrl"
        class="form-input"
        placeholder="ws://127.0.0.1:8999"
      />
    </div>

    <div class="form-group">
      <label class="form-label" for="bridgeKey">Bridge Key</label>
      <input
        type="text"
        id="bridgeKey"
        class="form-input"
        placeholder="输入 Proxycast API Key"
      />
    </div>

    <div class="form-group">
      <label class="form-label" for="profileKey">Profile Key</label>
      <input
        type="text"
        id="profileKey"
        class="form-input"
        placeholder="default"
      />
    </div>

    <div class="endpoint-preview" id="endpointPreview">
      Observer URL: 未配置
    </div>

    <div class="button-group">
      <button id="saveBtn" class="btn btn-primary">保存并重连</button>
      <button id="toggleConnBtn" class="btn">断开</button>
    </div>

    <div class="button-group">
      <button id="toggleMonitorBtn" class="btn">切换监控</button>
      <button id="captureBtn" class="btn">立即抓取</button>
    </div>

    <div class="page-info">
      <div class="page-info-title" id="pageTitle">无页面信息</div>
      <div class="page-info-url" id="pageUrl"></div>
    </div>

    <script src="popup.js"></script>
  </body>
</html>