deepDiverPaul/memos-chrome-extension
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

Refactor settings.js to replace shorthand DOM lookups with explicit element references for improved readability and maintainability.

Browse Source
This commit is contained in:
Paul Spenke
2026-03-15 14:46:32 +01:00
parent a2f0a0e262
commit 0f278399e6
1 changed files with 39 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/settings.js
View File

@@ -1,62 +1,75 @@
// settings.js // settings.js
const $ = (id) => document.getElementById(id);
// DOM refs
const memosUrlInput = document.getElementById("memos-url");
const apiTokenInput = document.getElementById("api-token");
const visibilitySelect = document.getElementById("visibility");
const clipModeSelect = document.getElementById("clip-mode");
const includeImagesCheck = document.getElementById("include-images");
const includeTagsCheck = document.getElementById("include-tags");
const saveBtn = document.getElementById("save-btn");
const saveDefaultsBtn = document.getElementById("save-defaults-btn");
const testBtn = document.getElementById("test-btn");
const statusEl = document.getElementById("status");
const defaultsStatusEl = document.getElementById("defaults-status");
async function load() { async function load() {
const s = await chrome.storage.sync.get([ const s = await chrome.storage.sync.get([
"memosUrl", "apiToken", "visibility", "clipMode", "includeImages", "includeTags" "memosUrl", "apiToken", "visibility", "clipMode", "includeImages", "includeTags"
]); ]);
if (s.memosUrl) $("memos-url").value = s.memosUrl; if (s.memosUrl) memosUrlInput.value = s.memosUrl;
if (s.apiToken) $("api-token").value = s.apiToken; if (s.apiToken) apiTokenInput.value = s.apiToken;
if (s.visibility) $("visibility").value = s.visibility; if (s.visibility) visibilitySelect.value = s.visibility;
if (s.clipMode) $("clip-mode").value = s.clipMode; if (s.clipMode) clipModeSelect.value = s.clipMode;
if (s.includeImages !== undefined) $("include-images").checked = s.includeImages; if (s.includeImages !== undefined) includeImagesCheck.checked = s.includeImages;
if (s.includeTags !== undefined) $("include-tags").checked = s.includeTags; if (s.includeTags !== undefined) includeTagsCheck.checked = s.includeTags;
} }
function showStatus(el, ok, msg) { function showStatus(el, ok, msg) {
el.textContent = msg; el.textContent = msg;
el.className = `status ${ok ? "ok" : "err"}`; el.className = `status ${ok ? "ok" : "err"}`;
el.classList.remove("hidden");
} }
$("save-btn").addEventListener("click", async () => { saveBtn.addEventListener("click", async () => {
const url = $("memos-url").value.trim().replace(/\/$/, ""); const url = memosUrlInput.value.trim().replace(/\/$/, "");
const token = $("api-token").value.trim(); const token = apiTokenInput.value.trim();
if (!url || !token) { if (!url || !token) {
showStatus($("status"), false, "URL and token are required."); showStatus(statusEl, false, "URL and token are required.");
return; return;
} }
await chrome.storage.sync.set({ memosUrl: url, apiToken: token }); await chrome.storage.sync.set({ memosUrl: url, apiToken: token });
showStatus($("status"), true, "✓ Saved."); showStatus(statusEl, true, "✓ Saved.");
}); });
$("save-defaults-btn").addEventListener("click", async () => { saveDefaultsBtn.addEventListener("click", async () => {
await chrome.storage.sync.set({ await chrome.storage.sync.set({
visibility: $("visibility").value, visibility: visibilitySelect.value,
clipMode: $("clip-mode").value, clipMode: clipModeSelect.value,
includeImages: $("include-images").checked, includeImages: includeImagesCheck.checked,
includeTags: $("include-tags").checked, includeTags: includeTagsCheck.checked,
}); });
showStatus($("defaults-status"), true, "✓ Defaults saved."); showStatus(defaultsStatusEl, true, "✓ Defaults saved.");
}); });
$("test-btn").addEventListener("click", async () => { testBtn.addEventListener("click", async () => {
const url = $("memos-url").value.trim().replace(/\/$/, ""); const url = memosUrlInput.value.trim().replace(/\/$/, "");
const token = $("api-token").value.trim(); const token = apiTokenInput.value.trim();
$("test-btn").textContent = "Testing…"; testBtn.textContent = "Testing…";
try { try {
const res = await fetch(`${url}/api/v1/memos?pageSize=1`, { const res = await fetch(`${url}/api/v1/memos?pageSize=1`, {
headers: { Authorization: `Bearer ${token}` } headers: { Authorization: `Bearer ${token}` }
}); });
if (res.ok) { if (res.ok) {
showStatus($("status"), true, `✓ Connected! (HTTP ${res.status})`); showStatus(statusEl, true, `✓ Connected! (HTTP ${res.status})`);
} else { } else {
const txt = await res.text(); const txt = await res.text();
showStatus($("status"), false, `✗ HTTP ${res.status}: ${txt.slice(0, 120)}`); showStatus(statusEl, false, `✗ HTTP ${res.status}: ${txt.slice(0, 120)}`);
} }
} catch (e) { } catch (e) {
showStatus($("status"), false, `✗ ${e.message}`); showStatus(statusEl, false, `✗ ${e.message}`);
} finally { } finally {
$("test-btn").textContent = "Test Connection"; testBtn.textContent = "Test Connection";
} }
}); });