Initial commit: OP Extension Chrome Extension

2026-01-27 10:50:29 +01:00
commit aa67a890e7
9 changed files with 938 additions and 0 deletions
--- a/popup.html
+++ b/popup.html
@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <style>
+    body {
+      width: 280px;
+      padding: 12px;
+      font-family: monospace;
+      background: #1a1a1a;
+      color: #ddd;
+      margin: 0;
+    }
+
+    h2 {
+      margin: 0 0 12px 0;
+      color: #888;
+      font-size: 14px;
+      font-weight: normal;
+    }
+
+    .form-group {
+      margin-bottom: 10px;
+    }
+
+    label {
+      display: block;
+      margin-bottom: 3px;
+      font-size: 11px;
+      color: #666;
+    }
+
+    input {
+      width: 100%;
+      padding: 6px;
+      border: 1px solid #333;
+      border-radius: 2px;
+      background: #111;
+      color: #ddd;
+      font-size: 11px;
+      font-family: monospace;
+      box-sizing: border-box;
+    }
+
+    input:focus {
+      outline: none;
+      border-color: #444;
+    }
+
+    .btn-group {
+      display: flex;
+      gap: 6px;
+      margin-top: 12px;
+    }
+
+    button {
+      flex: 1;
+      padding: 8px;
+      border: 1px solid #333;
+      border-radius: 2px;
+      cursor: pointer;
+      font-size: 11px;
+      font-family: monospace;
+      transition: all 0.2s;
+    }
+
+    .btn-save {
+      background: #2a2a2a;
+      color: #aaa;
+    }
+
+    .btn-save:hover {
+      background: #333;
+    }
+
+    .btn-disable {
+      background: #1a1a1a;
+      color: #666;
+    }
+
+    .btn-disable:hover {
+      background: #222;
+    }
+
+    .status {
+      margin-top: 10px;
+      padding: 6px;
+      border-radius: 2px;
+      text-align: center;
+      font-size: 10px;
+      display: none;
+    }
+
+    .status.success {
+      background: #1a2a1a;
+      color: #0f0;
+      border: 1px solid #0f0;
+    }
+
+    .status.error {
+      background: #2a1a1a;
+      color: #f00;
+      border: 1px solid #f00;
+    }
+
+    .info {
+      margin-top: 12px;
+      padding: 8px;
+      background: #111;
+      border: 1px solid #222;
+      border-radius: 2px;
+      font-size: 10px;
+      color: #666;
+      line-height: 1.4;
+    }
+
+    .debug {
+      margin-top: 12px;
+      padding: 8px;
+      background: #111;
+      border: 1px solid #222;
+      border-radius: 2px;
+      font-size: 10px;
+      line-height: 1.4;
+    }
+
+    .debug.checking {
+      color: #888;
+    }
+
+    .debug.ok {
+      color: #0f0;
+      border-color: #0f0;
+    }
+
+    .debug.error {
+      color: #f00;
+      border-color: #f00;
+    }
+
+    .auto-detected {
+      color: #0f0;
+      font-size: 9px;
+      margin-top: 2px;
+    }
+  </style>
+</head>
+<body>
+  <h2>spawn tracker</h2>
+  
+  <div class="form-group">
+    <label for="serverUrl">server</label>
+    <input type="text" id="serverUrl" placeholder="wss://op.lopensed.dev">
+  </div>
+
+  <div class="form-group">
+    <label for="roomId">room (share with friends)</label>
+    <input type="text" id="roomId" placeholder="default">
+  </div>
+
+  <div class="form-group">
+    <label for="playerName">name</label>
+    <input type="text" id="playerName" placeholder="auto-detected">
+    <div class="auto-detected" id="autoDetected"></div>
+  </div>
+
+  <div class="btn-group">
+    <button class="btn-save" id="saveBtn">save</button>
+    <button class="btn-disable" id="disableBtn">disable</button>
+  </div>
+
+  <div class="status" id="status"></div>
+
+  <div class="debug" id="debug">checking server...</div>
+
+  <script src="popup.js"></script>
+</body>
+</html>