Hugging Face's logo

Spaces:
Kraft102
/
widgettdc-api
Paused

App Files Community
Kraft102 commited on
Commit
70a16d8
·
1 Parent(s): 038a1a3

fix(extension): fix utf-8 encoding and relax auth check for guest fallback

Browse files
Files changed (2) hide show
  1. browser-extension/popup.html +44 -15
  2. browser-extension/popup.js +13 -10
browser-extension/popup.html CHANGED
@@ -1,6 +1,8 @@
1
  <!DOCTYPE html>
2
  <html>
 
3
  <head>
 
4
  <style>
5
  body {
6
  width: 320px;
@@ -10,19 +12,22 @@
10
  padding: 0;
11
  margin: 0;
12
  }
 
13
  .header {
14
  background: linear-gradient(90deg, #0000BF 0%, #000090 100%);
15
  padding: 16px;
16
  display: flex;
17
  align-items: center;
18
  gap: 10px;
19
- border-bottom: 1px solid rgba(255,255,255,0.1);
20
  }
 
21
  .logo {
22
  font-weight: bold;
23
  font-size: 16px;
24
  letter-spacing: 1px;
25
  }
 
26
  .status-dot {
27
  width: 8px;
28
  height: 8px;
@@ -30,20 +35,24 @@
30
  background-color: #dc2626;
31
  margin-left: auto;
32
  }
 
33
  .status-dot.connected {
34
  background-color: #22c55e;
35
  box-shadow: 0 0 8px #22c55e;
36
  }
 
37
  .content {
38
  padding: 16px;
39
  }
 
40
  .card {
41
- background-color: rgba(255,255,255,0.05);
42
- border: 1px solid rgba(255,255,255,0.1);
43
  border-radius: 8px;
44
  padding: 12px;
45
  margin-bottom: 12px;
46
  }
 
47
  .url-display {
48
  font-size: 11px;
49
  color: #94a3b8;
@@ -51,6 +60,7 @@
51
  word-break: break-all;
52
  font-family: monospace;
53
  }
 
54
  button {
55
  width: 100%;
56
  padding: 10px;
@@ -66,52 +76,68 @@
66
  gap: 8px;
67
  margin-bottom: 8px;
68
  }
 
69
  .btn-primary {
70
  background-color: #0000BF;
71
  color: white;
72
  }
 
73
  .btn-primary:hover {
74
  background-color: #000090;
75
  }
 
76
  .btn-secondary {
77
- background-color: rgba(255,255,255,0.1);
78
  color: #e2e8f0;
79
  }
 
80
  .btn-secondary:hover {
81
- background-color: rgba(255,255,255,0.15);
82
  }
 
83
  .options {
84
  margin-bottom: 12px;
85
  }
 
86
  .range-container {
87
  margin-top: 12px;
88
  }
 
89
  label {
90
  font-size: 12px;
91
  color: #94a3b8;
92
  display: block;
93
  margin-bottom: 4px;
94
  }
 
95
  input[type="range"] {
96
  width: 100%;
97
  accent-color: #0000BF;
98
  }
 
99
  .status-msg {
100
  font-size: 11px;
101
  margin-top: 8px;
102
  text-align: center;
103
  min-height: 16px;
104
  }
105
- .success { color: #22c55e; }
106
- .error { color: #ef4444; }
 
 
 
 
 
 
107
  </style>
108
  </head>
 
109
  <body>
110
  <div class="header">
111
  <div class="logo">WidgeTDC</div>
112
  <div id="statusDot" class="status-dot" title="Disconnected"></div>
113
  </div>
114
-
115
  <div class="content">
116
  <!-- Auth Status -->
117
  <div id="authSection" class="card" style="display:none; border-color: #3b82f6;">
@@ -129,18 +155,19 @@
129
 
130
  <div class="card" id="mainControls" style="opacity: 0.5; pointer-events: none;">
131
  <div id="currentUrl" class="url-display">Loading...</div>
132
-
133
  <button id="btnIngest" class="btn-primary">
134
  <span>📥</span> Ingest Current Page
135
  </button>
136
-
137
  <div style="margin: 12px 0; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 12px;">
138
  <label style="color: #60a5fa; font-weight: bold; margin-bottom: 8px;">Advanced Crawl</label>
139
-
140
  <!-- Mode Selection -->
141
  <div style="margin-bottom: 10px;">
142
  <label>Mode</label>
143
- <select id="crawlMode" style="width: 100%; padding: 6px; background: rgba(0,0,0,0.3); color: white; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px;">
 
144
  <option value="single">Single Page</option>
145
  <option value="directory">This Directory Only</option>
146
  <option value="recursive">Recursive (Deep)</option>
@@ -150,7 +177,8 @@
150
  <!-- Keywords -->
151
  <div style="margin-bottom: 10px;">
152
  <label>Keywords (comma separated)</label>
153
- <input type="text" id="crawlKeywords" placeholder="e.g. documentation, api, guide" style="width: 100%; padding: 6px; background: rgba(0,0,0,0.3); color: white; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; box-sizing: border-box;">
 
154
  </div>
155
 
156
  <!-- Depth -->
@@ -159,7 +187,7 @@
159
  <input type="range" id="depthRange" min="1" max="5" value="1">
160
  </div>
161
  </div>
162
-
163
  <button id="btnCrawl" class="btn-secondary">
164
  <span>🕸️</span> Start Crawl
165
  </button>
@@ -177,4 +205,5 @@
177
 
178
  <script src="popup.js"></script>
179
  </body>
180
- </html>
 
 
1
  <!DOCTYPE html>
2
  <html>
3
+
4
  <head>
5
+ <meta charset="UTF-8">
6
  <style>
7
  body {
8
  width: 320px;
 
12
  padding: 0;
13
  margin: 0;
14
  }
15
+
16
  .header {
17
  background: linear-gradient(90deg, #0000BF 0%, #000090 100%);
18
  padding: 16px;
19
  display: flex;
20
  align-items: center;
21
  gap: 10px;
22
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
23
  }
24
+
25
  .logo {
26
  font-weight: bold;
27
  font-size: 16px;
28
  letter-spacing: 1px;
29
  }
30
+
31
  .status-dot {
32
  width: 8px;
33
  height: 8px;
 
35
  background-color: #dc2626;
36
  margin-left: auto;
37
  }
38
+
39
  .status-dot.connected {
40
  background-color: #22c55e;
41
  box-shadow: 0 0 8px #22c55e;
42
  }
43
+
44
  .content {
45
  padding: 16px;
46
  }
47
+
48
  .card {
49
+ background-color: rgba(255, 255, 255, 0.05);
50
+ border: 1px solid rgba(255, 255, 255, 0.1);
51
  border-radius: 8px;
52
  padding: 12px;
53
  margin-bottom: 12px;
54
  }
55
+
56
  .url-display {
57
  font-size: 11px;
58
  color: #94a3b8;
 
60
  word-break: break-all;
61
  font-family: monospace;
62
  }
63
+
64
  button {
65
  width: 100%;
66
  padding: 10px;
 
76
  gap: 8px;
77
  margin-bottom: 8px;
78
  }
79
+
80
  .btn-primary {
81
  background-color: #0000BF;
82
  color: white;
83
  }
84
+
85
  .btn-primary:hover {
86
  background-color: #000090;
87
  }
88
+
89
  .btn-secondary {
90
+ background-color: rgba(255, 255, 255, 0.1);
91
  color: #e2e8f0;
92
  }
93
+
94
  .btn-secondary:hover {
95
+ background-color: rgba(255, 255, 255, 0.15);
96
  }
97
+
98
  .options {
99
  margin-bottom: 12px;
100
  }
101
+
102
  .range-container {
103
  margin-top: 12px;
104
  }
105
+
106
  label {
107
  font-size: 12px;
108
  color: #94a3b8;
109
  display: block;
110
  margin-bottom: 4px;
111
  }
112
+
113
  input[type="range"] {
114
  width: 100%;
115
  accent-color: #0000BF;
116
  }
117
+
118
  .status-msg {
119
  font-size: 11px;
120
  margin-top: 8px;
121
  text-align: center;
122
  min-height: 16px;
123
  }
124
+
125
+ .success {
126
+ color: #22c55e;
127
+ }
128
+
129
+ .error {
130
+ color: #ef4444;
131
+ }
132
  </style>
133
  </head>
134
+
135
  <body>
136
  <div class="header">
137
  <div class="logo">WidgeTDC</div>
138
  <div id="statusDot" class="status-dot" title="Disconnected"></div>
139
  </div>
140
+
141
  <div class="content">
142
  <!-- Auth Status -->
143
  <div id="authSection" class="card" style="display:none; border-color: #3b82f6;">
 
155
 
156
  <div class="card" id="mainControls" style="opacity: 0.5; pointer-events: none;">
157
  <div id="currentUrl" class="url-display">Loading...</div>
158
+
159
  <button id="btnIngest" class="btn-primary">
160
  <span>📥</span> Ingest Current Page
161
  </button>
162
+
163
  <div style="margin: 12px 0; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 12px;">
164
  <label style="color: #60a5fa; font-weight: bold; margin-bottom: 8px;">Advanced Crawl</label>
165
+
166
  <!-- Mode Selection -->
167
  <div style="margin-bottom: 10px;">
168
  <label>Mode</label>
169
+ <select id="crawlMode"
170
+ style="width: 100%; padding: 6px; background: rgba(0,0,0,0.3); color: white; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px;">
171
  <option value="single">Single Page</option>
172
  <option value="directory">This Directory Only</option>
173
  <option value="recursive">Recursive (Deep)</option>
 
177
  <!-- Keywords -->
178
  <div style="margin-bottom: 10px;">
179
  <label>Keywords (comma separated)</label>
180
+ <input type="text" id="crawlKeywords" placeholder="e.g. documentation, api, guide"
181
+ style="width: 100%; padding: 6px; background: rgba(0,0,0,0.3); color: white; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; box-sizing: border-box;">
182
  </div>
183
 
184
  <!-- Depth -->
 
187
  <input type="range" id="depthRange" min="1" max="5" value="1">
188
  </div>
189
  </div>
190
+
191
  <button id="btnCrawl" class="btn-secondary">
192
  <span>🕸️</span> Start Crawl
193
  </button>
 
205
 
206
  <script src="popup.js"></script>
207
  </body>
208
+
209
+ </html>
browser-extension/popup.js CHANGED
@@ -21,24 +21,27 @@ document.addEventListener('DOMContentLoaded', async () => {
21
 
22
  let currentUser = null;
23
 
 
24
  // 1. Check Identity
25
  chrome.identity.getProfileUserInfo({ accountStatus: 'ANY' }, (userInfo) => {
26
- if (userInfo.email) {
27
  currentUser = userInfo;
28
  authSection.style.display = 'block';
29
  userEmail.textContent = userInfo.email;
30
  loginWarning.style.display = 'none';
31
- mainControls.style.opacity = '1';
32
- mainControls.style.pointerEvents = 'auto';
33
- monitorControls.style.opacity = '1';
34
- monitorControls.style.pointerEvents = 'auto';
35
  } else {
36
- // Not logged in
37
- mainControls.style.opacity = '0.5';
38
- mainControls.style.pointerEvents = 'none';
39
- monitorControls.style.opacity = '0.5';
40
- monitorControls.style.pointerEvents = 'none';
41
  }
 
 
 
 
 
 
42
  });
43
 
44
  // 2. Get current tab
 
21
 
22
  let currentUser = null;
23
 
24
+ // 1. Check Identity
25
  // 1. Check Identity
26
  chrome.identity.getProfileUserInfo({ accountStatus: 'ANY' }, (userInfo) => {
27
+ if (userInfo && userInfo.email) {
28
  currentUser = userInfo;
29
  authSection.style.display = 'block';
30
  userEmail.textContent = userInfo.email;
31
  loginWarning.style.display = 'none';
 
 
 
 
32
  } else {
33
+ // Fallback to Guest - Enables controls even if API fails (common in dev extensions)
34
+ currentUser = { email: 'guest@local' };
35
+ authSection.style.display = 'block';
36
+ userEmail.textContent = "Guest (Auth Skipped)";
37
+ loginWarning.style.display = 'none';
38
  }
39
+
40
+ // Always enable controls
41
+ mainControls.style.opacity = '1';
42
+ mainControls.style.pointerEvents = 'auto';
43
+ monitorControls.style.opacity = '1';
44
+ monitorControls.style.pointerEvents = 'auto';
45
  });
46
 
47
  // 2. Get current tab