A Chrome extension to quickly capture URLs into Semble Collections at https://semble.so
semble.so
renderg.host
at-proto
semble
chrome-extension
Compare changes
Choose any two refs to compare.
+5
-3
README.md
+5
-3
README.md
···
2
3
A Chrome extension for quickly capturing and organizing URLs into Semble Collections using your Bluesky account.
4
5
-
> [!WARNING]
6
-
> This extension currently only supports accounts hosted by **Bluesky**
7
-
8
## About
9
10
Save interesting web pages directly into your Semble Collections. Simply click the extension icon, add an optional note, select a collection, and save—all without leaving your current page.
···
13
14
- **One-Click Capture**: Save the current tab's URL with a single click
15
- **Bluesky Integration**: Secure authentication using Bluesky App Passwords
16
- **Collection Management**: Choose from your existing Semble Collections
17
- **Add Notes**: Include optional notes with your captured URLs
18
- **Clean Interface**: Simple, intuitive design that stays out of your way
···
45
2. Sign in with your Bluesky handle and App Password
46
- Don't have an App Password? Generate one at [Bluesky Settings](https://bsky.app/settings/app-passwords)
47
- Don't have a Bluesky account? [Sign up here](https://bsky.app)
48
49
### Capturing URLs
50
···
2
3
A Chrome extension for quickly capturing and organizing URLs into Semble Collections using your Bluesky account.
4
5
## About
6
7
Save interesting web pages directly into your Semble Collections. Simply click the extension icon, add an optional note, select a collection, and save—all without leaving your current page.
···
10
11
- **One-Click Capture**: Save the current tab's URL with a single click
12
- **Bluesky Integration**: Secure authentication using Bluesky App Passwords
13
+
- **Custom PDS Support**: Works with both Bluesky and custom PDS servers
14
- **Collection Management**: Choose from your existing Semble Collections
15
- **Add Notes**: Include optional notes with your captured URLs
16
- **Clean Interface**: Simple, intuitive design that stays out of your way
···
43
2. Sign in with your Bluesky handle and App Password
44
- Don't have an App Password? Generate one at [Bluesky Settings](https://bsky.app/settings/app-passwords)
45
- Don't have a Bluesky account? [Sign up here](https://bsky.app)
46
+
3. (Optional) If you use a custom PDS server, enter your PDS server URL
47
+
- For Bluesky accounts, leave this blank (defaults to `bsky.social`)
48
+
- For custom PDS: enter the full URL (e.g., `https://my-pds.example.com`)
49
+
- The extension supports both HTTP (localhost only) and HTTPS servers
50
51
### Capturing URLs
52
+14
-3
background/background.js
+14
-3
background/background.js
···
60
61
/**
62
* Authenticate with Semble using Bluesky credentials
63
*/
64
-
async function authenticate(identifier, password) {
65
try {
66
-
const sessionData = await createSession(identifier, password);
67
await saveSession(sessionData);
68
return { success: true, session: sessionData };
69
} catch (error) {
70
console.error('Authentication failed:', error);
···
148
149
switch (request.action) {
150
case 'authenticate':
151
-
authenticate(request.identifier, request.password)
152
.then(sendResponse);
153
return true; // Keep channel open for async response
154
···
60
61
/**
62
* Authenticate with Semble using Bluesky credentials
63
+
* @param {string} identifier - User handle
64
+
* @param {string} password - App password
65
+
* @param {string} [service] - Optional PDS service URL
66
*/
67
+
async function authenticate(identifier, password, service) {
68
try {
69
+
console.log('Authenticating with:', {
70
+
identifier,
71
+
hasPassword: !!password,
72
+
service: service || 'default (bsky.social)'
73
+
});
74
+
75
+
const sessionData = await createSession(identifier, password, service);
76
await saveSession(sessionData);
77
+
78
+
console.log('Authentication successful');
79
return { success: true, session: sessionData };
80
} catch (error) {
81
console.error('Authentication failed:', error);
···
159
160
switch (request.action) {
161
case 'authenticate':
162
+
authenticate(request.identifier, request.password, request.service)
163
.then(sendResponse);
164
return true; // Keep channel open for async response
165
+29
-6
lib/atproto.js
+29
-6
lib/atproto.js
···
10
* Login with Bluesky app password to get Semble tokens
11
* @param {string} identifier - User handle (e.g., user.bsky.social)
12
* @param {string} password - Bluesky app password
13
* @returns {Promise<{accessToken: string, refreshToken: string}>}
14
*/
15
-
async function createSession(identifier, password) {
16
const response = await fetch(`${SEMBLE_API_URL}/api/users/login/app-password`, {
17
method: 'POST',
18
headers: {
19
'Content-Type': 'application/json',
20
},
21
-
body: JSON.stringify({
22
-
identifier,
23
-
appPassword: password,
24
-
}),
25
});
26
27
if (!response.ok) {
28
const error = await response.json().catch(() => ({}));
29
-
throw new Error(`Authentication failed: ${error.message || response.statusText}`);
30
}
31
32
return await response.json();
···
10
* Login with Bluesky app password to get Semble tokens
11
* @param {string} identifier - User handle (e.g., user.bsky.social)
12
* @param {string} password - Bluesky app password
13
+
* @param {string} [service] - Optional PDS service URL (e.g., https://bsky.social)
14
* @returns {Promise<{accessToken: string, refreshToken: string}>}
15
*/
16
+
async function createSession(identifier, password, service) {
17
+
const payload = {
18
+
identifier,
19
+
appPassword: password,
20
+
};
21
+
22
+
// Include service parameter if provided (for custom PDS servers)
23
+
if (service) {
24
+
payload.service = service;
25
+
}
26
+
27
const response = await fetch(`${SEMBLE_API_URL}/api/users/login/app-password`, {
28
method: 'POST',
29
headers: {
30
'Content-Type': 'application/json',
31
},
32
+
body: JSON.stringify(payload),
33
});
34
35
if (!response.ok) {
36
const error = await response.json().catch(() => ({}));
37
+
38
+
// Enhanced error handling
39
+
let errorMessage = error.message || response.statusText;
40
+
41
+
// Provide more specific error messages
42
+
if (response.status === 401) {
43
+
errorMessage = 'Invalid identifier or password';
44
+
} else if (response.status === 400) {
45
+
errorMessage = error.message || 'Invalid request. Please check your inputs.';
46
+
} else if (response.status === 500) {
47
+
errorMessage = 'Server error. Please try again later.';
48
+
} else if (response.status === 503) {
49
+
errorMessage = 'Service temporarily unavailable. Please try again later.';
50
+
}
51
+
52
+
throw new Error(`Authentication failed: ${errorMessage}`);
53
}
54
55
return await response.json();
+11
-1
popup/popup.html
+11
-1
popup/popup.html
···
38
</p>
39
</div>
40
41
+
<div class="form-group">
42
+
<label class="form-label">PDS Server (optional)</label>
43
+
<input type="text" id="loginService" placeholder="https://bsky.social" class="input-filled"
44
+
autocomplete="off">
45
+
<p class="form-hint">
46
+
Leave blank for default (bsky.social). Only change if you use a custom PDS server.
47
+
</p>
48
+
</div>
49
+
50
<button id="loginButton" type="button" class="btn btn-primary">
51
+
<span id="loginButtonText">Sign in</span>
52
+
<span id="loginButtonSpinner" class="btn-spinner hidden"></span>
53
</button>
54
55
<div id="loginError" class="alert alert-error hidden"></div>
+106
-8
popup/popup.js
+106
-8
popup/popup.js
···
5
6
// DOM elements
7
let loginScreen, captureScreen, loadingScreen;
8
-
let loginHandle, loginPassword, loginButton, loginError;
9
let currentUrl, noteInput, collectionSelect, submitButton, statusMessage, logoutButton;
10
11
// State
···
23
loadingScreen = document.getElementById('loadingScreen');
24
loginHandle = document.getElementById('loginHandle');
25
loginPassword = document.getElementById('loginPassword');
26
loginButton = document.getElementById('loginButton');
27
loginError = document.getElementById('loginError');
28
currentUrl = document.getElementById('currentUrl');
29
noteInput = document.getElementById('noteInput');
···
177
submitButton.disabled = !collectionSelect.value;
178
}
179
180
/**
181
* Handle login
182
*/
183
async function handleLogin() {
184
const handle = loginHandle.value.trim();
185
const password = loginPassword.value.trim();
186
187
if (!handle || !password) {
188
showLoginError('Please enter both handle and password');
189
return;
190
}
191
192
loginButton.disabled = true;
193
-
loginButton.textContent = 'Signing in...';
194
hideLoginError();
195
196
try {
···
198
action: 'authenticate',
199
identifier: handle,
200
password: password,
201
});
202
203
if (result.success) {
204
// Authentication successful
205
await loadCaptureScreen();
206
} else {
207
-
showLoginError(result.error || 'Authentication failed');
208
-
loginButton.disabled = false;
209
-
loginButton.textContent = 'Sign In';
210
}
211
} catch (error) {
212
console.error('Login error:', error);
213
-
showLoginError('An error occurred. Please try again.');
214
-
loginButton.disabled = false;
215
-
loginButton.textContent = 'Sign In';
216
}
217
}
218
219
/**
220
* Handle logout
221
*/
···
225
showScreen('login');
226
loginHandle.value = '';
227
loginPassword.value = '';
228
} catch (error) {
229
console.error('Logout error:', error);
230
}
···
5
6
// DOM elements
7
let loginScreen, captureScreen, loadingScreen;
8
+
let loginHandle, loginPassword, loginService, loginButton, loginButtonText, loginButtonSpinner, loginError;
9
let currentUrl, noteInput, collectionSelect, submitButton, statusMessage, logoutButton;
10
11
// State
···
23
loadingScreen = document.getElementById('loadingScreen');
24
loginHandle = document.getElementById('loginHandle');
25
loginPassword = document.getElementById('loginPassword');
26
+
loginService = document.getElementById('loginService');
27
loginButton = document.getElementById('loginButton');
28
+
loginButtonText = document.getElementById('loginButtonText');
29
+
loginButtonSpinner = document.getElementById('loginButtonSpinner');
30
loginError = document.getElementById('loginError');
31
currentUrl = document.getElementById('currentUrl');
32
noteInput = document.getElementById('noteInput');
···
180
submitButton.disabled = !collectionSelect.value;
181
}
182
183
+
/**
184
+
* Validate URL format
185
+
*/
186
+
function isValidUrl(string) {
187
+
try {
188
+
const url = new URL(string);
189
+
return url.protocol === 'http:' || url.protocol === 'https:';
190
+
} catch (_) {
191
+
return false;
192
+
}
193
+
}
194
+
195
+
/**
196
+
* Validate and normalize PDS service URL
197
+
*/
198
+
function validateAndNormalizePDS(service) {
199
+
if (!service) {
200
+
return null; // Use default
201
+
}
202
+
203
+
const trimmed = service.trim();
204
+
205
+
// If it's just a domain without protocol, add https://
206
+
let normalized = trimmed;
207
+
if (!trimmed.startsWith('http://') && !trimmed.startsWith('https://')) {
208
+
normalized = 'https://' + trimmed;
209
+
}
210
+
211
+
// Validate URL format
212
+
if (!isValidUrl(normalized)) {
213
+
throw new Error('Invalid PDS server URL format');
214
+
}
215
+
216
+
const url = new URL(normalized);
217
+
218
+
// Must be https (or http for localhost/127.0.0.1)
219
+
if (url.protocol === 'http:') {
220
+
const hostname = url.hostname.toLowerCase();
221
+
if (hostname !== 'localhost' && hostname !== '127.0.0.1' && !hostname.startsWith('192.168.')) {
222
+
throw new Error('PDS server must use HTTPS (except for localhost)');
223
+
}
224
+
}
225
+
226
+
return normalized;
227
+
}
228
+
229
/**
230
* Handle login
231
*/
232
async function handleLogin() {
233
const handle = loginHandle.value.trim();
234
const password = loginPassword.value.trim();
235
+
const service = loginService.value.trim();
236
237
+
// Validation
238
if (!handle || !password) {
239
showLoginError('Please enter both handle and password');
240
return;
241
}
242
243
+
// Validate handle format
244
+
if (!handle.includes('.')) {
245
+
showLoginError('Invalid handle format. Use format: user.domain.com');
246
+
return;
247
+
}
248
+
249
+
// Validate and normalize PDS service URL
250
+
let normalizedService = null;
251
+
try {
252
+
normalizedService = validateAndNormalizePDS(service);
253
+
} catch (error) {
254
+
showLoginError(error.message);
255
+
return;
256
+
}
257
+
258
+
// Show progress indicator
259
loginButton.disabled = true;
260
+
loginButtonText.textContent = 'Signing in...';
261
+
loginButtonSpinner.classList.remove('hidden');
262
hideLoginError();
263
264
try {
···
266
action: 'authenticate',
267
identifier: handle,
268
password: password,
269
+
service: normalizedService,
270
});
271
272
if (result.success) {
273
// Authentication successful
274
await loadCaptureScreen();
275
} else {
276
+
// Provide helpful error messages
277
+
let errorMessage = result.error || 'Authentication failed';
278
+
279
+
// Enhanced error messaging
280
+
if (errorMessage.includes('Invalid identifier or password')) {
281
+
errorMessage = 'Invalid handle or app password. Please check your credentials.';
282
+
} else if (errorMessage.includes('Network')) {
283
+
errorMessage = 'Network error. Please check your connection and try again.';
284
+
} else if (errorMessage.includes('timeout')) {
285
+
errorMessage = 'Request timeout. The PDS server may be slow or unreachable.';
286
+
} else if (normalizedService && errorMessage.includes('fetch')) {
287
+
errorMessage = 'Cannot reach PDS server. Please verify the server URL.';
288
+
}
289
+
290
+
showLoginError(errorMessage);
291
+
resetLoginButton();
292
}
293
} catch (error) {
294
console.error('Login error:', error);
295
+
let errorMessage = 'An unexpected error occurred. Please try again.';
296
+
297
+
if (error.message && error.message.includes('Network')) {
298
+
errorMessage = 'Network error. Please check your internet connection.';
299
+
}
300
+
301
+
showLoginError(errorMessage);
302
+
resetLoginButton();
303
}
304
}
305
306
+
/**
307
+
* Reset login button to initial state
308
+
*/
309
+
function resetLoginButton() {
310
+
loginButton.disabled = false;
311
+
loginButtonText.textContent = 'Sign in';
312
+
loginButtonSpinner.classList.add('hidden');
313
+
}
314
+
315
/**
316
* Handle logout
317
*/
···
321
showScreen('login');
322
loginHandle.value = '';
323
loginPassword.value = '';
324
+
loginService.value = '';
325
+
resetLoginButton();
326
} catch (error) {
327
console.error('Logout error:', error);
328
}
+11
popup/styles.css
+11
popup/styles.css
···
386
}
387
}
388
389
+
/* ========== Button Spinner ========== */
390
+
.btn-spinner {
391
+
display: inline-block;
392
+
width: 16px;
393
+
height: 16px;
394
+
border: 2px solid rgba(255, 255, 255, 0.3);
395
+
border-top-color: white;
396
+
border-radius: 50%;
397
+
animation: spin 0.6s linear infinite;
398
+
}
399
+
400
/* ========== Utility Classes ========== */
401
.hidden {
402
display: none !important;