LabLinks Chrome-Erweiterung im Retro-Look
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
root
co-authored by
Claude Sonnet 5.5
Claude Sonnet 5.5
parent
0955e3e86a
commit
fc9e0e6ecf
Binary file not shown.
|
After Width: | Height: | Size: 387 B |
Binary file not shown.
|
After Width: | Height: | Size: 110 B |
Binary file not shown.
|
After Width: | Height: | Size: 150 B |
@@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"manifest_version": 3,
|
||||||
|
"name": "LabLinks",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Retro-Launcher für deine HomeLab WebUIs.",
|
||||||
|
"permissions": ["storage"],
|
||||||
|
"action": {
|
||||||
|
"default_popup": "popup.html",
|
||||||
|
"default_title": "LabLinks",
|
||||||
|
"default_icon": { "16": "icons/16.png", "48": "icons/48.png", "128": "icons/128.png" }
|
||||||
|
},
|
||||||
|
"icons": { "16": "icons/16.png", "48": "icons/48.png", "128": "icons/128.png" }
|
||||||
|
}
|
||||||
@@ -0,0 +1,107 @@
|
|||||||
|
:root {
|
||||||
|
--bg: #0b0f0c;
|
||||||
|
--panel: #101812;
|
||||||
|
--fg: #ffb000;
|
||||||
|
--fg-dim: #8a6200;
|
||||||
|
--green: #39ff14;
|
||||||
|
--line: #3a2a00;
|
||||||
|
--font: "Courier New", "Lucida Console", ui-monospace, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { box-sizing: border-box; margin: 0; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
width: 340px;
|
||||||
|
min-height: 120px;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--fg);
|
||||||
|
font: 14px/1.4 var(--font);
|
||||||
|
}
|
||||||
|
|
||||||
|
.crt {
|
||||||
|
position: relative;
|
||||||
|
padding: 12px;
|
||||||
|
border: 3px double var(--fg);
|
||||||
|
margin: 4px;
|
||||||
|
background: var(--panel);
|
||||||
|
text-shadow: 0 0 4px rgba(255, 176, 0, .55);
|
||||||
|
}
|
||||||
|
/* Scanlines */
|
||||||
|
.crt::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
background: repeating-linear-gradient(to bottom, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
border-bottom: 2px dashed var(--line);
|
||||||
|
}
|
||||||
|
h1 { font-size: 20px; letter-spacing: 3px; color: var(--green); text-shadow: 0 0 6px rgba(57,255,20,.6); }
|
||||||
|
h1 span { color: var(--fg); }
|
||||||
|
.cursor {
|
||||||
|
display: inline-block; width: 9px; height: 16px; margin-left: 4px;
|
||||||
|
background: var(--green); vertical-align: -2px;
|
||||||
|
animation: blink 1s steps(2, start) infinite;
|
||||||
|
}
|
||||||
|
@keyframes blink { to { visibility: hidden; } }
|
||||||
|
|
||||||
|
button {
|
||||||
|
font: inherit; font-size: 12px; color: var(--fg); background: none;
|
||||||
|
border: 0; cursor: pointer; padding: 2px 4px; text-shadow: inherit;
|
||||||
|
}
|
||||||
|
button:hover, button:focus-visible { background: var(--fg); color: var(--bg); outline: none; text-shadow: none; }
|
||||||
|
button.primary { color: var(--green); }
|
||||||
|
button.primary:hover { background: var(--green); color: var(--bg); }
|
||||||
|
|
||||||
|
input[type="text"], input:not([type]), #form input {
|
||||||
|
width: 100%; font: inherit; color: var(--green); background: var(--bg);
|
||||||
|
border: 2px solid var(--line); padding: 6px 8px; outline: none; margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
input:focus { border-color: var(--fg); }
|
||||||
|
input::placeholder { color: var(--fg-dim); }
|
||||||
|
#search { margin-bottom: 10px; }
|
||||||
|
|
||||||
|
ul { list-style: none; padding: 0; max-height: 320px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--fg) var(--bg); }
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: flex; align-items: center; gap: 4px; margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
li a {
|
||||||
|
flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
|
||||||
|
padding: 7px 9px; color: var(--fg); text-decoration: none;
|
||||||
|
border: 2px solid var(--line); background: var(--bg);
|
||||||
|
box-shadow: 3px 3px 0 var(--line);
|
||||||
|
transition: transform .06s, box-shadow .06s;
|
||||||
|
}
|
||||||
|
li a:hover, li a:focus-visible {
|
||||||
|
border-color: var(--fg); color: var(--green); outline: none;
|
||||||
|
transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--fg-dim);
|
||||||
|
}
|
||||||
|
li a:hover .name::before, li a:focus-visible .name::before { content: "> "; }
|
||||||
|
.ico { font-size: 18px; width: 22px; text-align: center; flex: none; }
|
||||||
|
.txt { min-width: 0; display: flex; flex-direction: column; }
|
||||||
|
.name { font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||||
|
.url { font-size: 11px; color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||||
|
|
||||||
|
.edit-btns { display: none; flex-direction: column; }
|
||||||
|
body.editing .edit-btns { display: flex; }
|
||||||
|
.edit-btns button { padding: 0 4px; font-size: 11px; }
|
||||||
|
.edit-btns .del { color: #ff4b3e; }
|
||||||
|
|
||||||
|
#empty { color: var(--fg-dim); margin: 6px 0 10px; }
|
||||||
|
|
||||||
|
#form { border-top: 2px dashed var(--line); padding-top: 10px; margin-top: 4px; }
|
||||||
|
.row { display: flex; gap: 6px; }
|
||||||
|
.row input:first-child:not(:only-child) { width: 52px; text-align: center; flex: none; }
|
||||||
|
.row button { margin-bottom: 6px; }
|
||||||
|
|
||||||
|
footer { display: flex; gap: 4px; align-items: center; margin-top: 4px; min-height: 22px; }
|
||||||
|
#count { margin-left: auto; font-size: 11px; color: var(--fg-dim); }
|
||||||
|
[hidden] { display: none !important; }
|
||||||
+44
@@ -0,0 +1,44 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>LabLinks</title>
|
||||||
|
<link rel="stylesheet" href="popup.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="crt">
|
||||||
|
<header>
|
||||||
|
<h1>LAB<span>LINKS</span><i class="cursor"></i></h1>
|
||||||
|
<div class="actions">
|
||||||
|
<button id="editToggle" title="Bearbeiten">[EDIT]</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<input id="search" type="text" placeholder="> suche…" autocomplete="off" spellcheck="false">
|
||||||
|
|
||||||
|
<ul id="list"></ul>
|
||||||
|
<p id="empty" hidden>// noch keine links.<br>// klicke [EDIT] → [+ NEU]</p>
|
||||||
|
|
||||||
|
<form id="form" hidden>
|
||||||
|
<div class="row">
|
||||||
|
<input id="fIcon" maxlength="2" placeholder="🖥" title="Emoji / Kürzel">
|
||||||
|
<input id="fName" placeholder="Name (z.B. Proxmox)" required>
|
||||||
|
</div>
|
||||||
|
<input id="fUrl" placeholder="https://192.168.1.10:8006" required>
|
||||||
|
<div class="row">
|
||||||
|
<button type="submit" class="primary">[SPEICHERN]</button>
|
||||||
|
<button type="button" id="cancel">[ABBRUCH]</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<button id="add" hidden>[+ NEU]</button>
|
||||||
|
<button id="export" hidden>[EXPORT]</button>
|
||||||
|
<button id="import" hidden>[IMPORT]</button>
|
||||||
|
<input id="file" type="file" accept="application/json" hidden>
|
||||||
|
<span id="count"></span>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
<script src="popup.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,145 @@
|
|||||||
|
const $ = (id) => document.getElementById(id);
|
||||||
|
const store = chrome.storage.sync;
|
||||||
|
|
||||||
|
let links = [];
|
||||||
|
let editing = false;
|
||||||
|
let editId = null;
|
||||||
|
|
||||||
|
const uid = () => Math.random().toString(36).slice(2, 10);
|
||||||
|
|
||||||
|
function normalizeUrl(raw) {
|
||||||
|
raw = raw.trim();
|
||||||
|
if (!/^[a-z][a-z0-9+.-]*:\/\//i.test(raw)) raw = "http://" + raw;
|
||||||
|
try { return new URL(raw).href; } catch { return null; }
|
||||||
|
}
|
||||||
|
|
||||||
|
async function load() {
|
||||||
|
const data = await store.get("links");
|
||||||
|
links = data.links || [];
|
||||||
|
render();
|
||||||
|
}
|
||||||
|
const save = () => store.set({ links });
|
||||||
|
|
||||||
|
function render() {
|
||||||
|
const q = $("search").value.trim().toLowerCase();
|
||||||
|
const list = $("list");
|
||||||
|
list.textContent = "";
|
||||||
|
|
||||||
|
const shown = links.filter((l) => !q || (l.name + " " + l.url).toLowerCase().includes(q));
|
||||||
|
for (const l of shown) {
|
||||||
|
const li = document.createElement("li");
|
||||||
|
|
||||||
|
const a = document.createElement("a");
|
||||||
|
a.href = l.url;
|
||||||
|
a.target = "_blank";
|
||||||
|
a.rel = "noopener";
|
||||||
|
a.innerHTML = '<span class="ico"></span><span class="txt"><span class="name"></span><span class="url"></span></span>';
|
||||||
|
a.querySelector(".ico").textContent = l.icon || "▣";
|
||||||
|
a.querySelector(".name").textContent = l.name;
|
||||||
|
a.querySelector(".url").textContent = l.url.replace(/^https?:\/\//, "").replace(/\/$/, "");
|
||||||
|
if (editing) a.addEventListener("click", (e) => e.preventDefault());
|
||||||
|
li.append(a);
|
||||||
|
|
||||||
|
const eb = document.createElement("div");
|
||||||
|
eb.className = "edit-btns";
|
||||||
|
eb.append(
|
||||||
|
btn("[✎]", () => openForm(l)),
|
||||||
|
btn("[↑]", () => move(l.id, -1)),
|
||||||
|
btn("[↓]", () => move(l.id, 1)),
|
||||||
|
Object.assign(btn("[✕]", () => remove(l.id)), { className: "del" })
|
||||||
|
);
|
||||||
|
li.append(eb);
|
||||||
|
list.append(li);
|
||||||
|
}
|
||||||
|
|
||||||
|
$("empty").hidden = links.length > 0 || !!editId;
|
||||||
|
$("count").textContent = links.length ? `${links.length} Einträge` : "";
|
||||||
|
document.body.classList.toggle("editing", editing);
|
||||||
|
for (const id of ["add", "export", "import"]) $(id).hidden = !editing;
|
||||||
|
$("editToggle").textContent = editing ? "[FERTIG]" : "[EDIT]";
|
||||||
|
}
|
||||||
|
|
||||||
|
function btn(label, fn) {
|
||||||
|
const b = document.createElement("button");
|
||||||
|
b.textContent = label;
|
||||||
|
b.addEventListener("click", fn);
|
||||||
|
return b;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function move(id, dir) {
|
||||||
|
const i = links.findIndex((l) => l.id === id);
|
||||||
|
const j = i + dir;
|
||||||
|
if (j < 0 || j >= links.length) return;
|
||||||
|
[links[i], links[j]] = [links[j], links[i]];
|
||||||
|
await save();
|
||||||
|
render();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function remove(id) {
|
||||||
|
links = links.filter((l) => l.id !== id);
|
||||||
|
await save();
|
||||||
|
render();
|
||||||
|
}
|
||||||
|
|
||||||
|
function openForm(link) {
|
||||||
|
editId = link ? link.id : "new";
|
||||||
|
$("fIcon").value = link?.icon || "";
|
||||||
|
$("fName").value = link?.name || "";
|
||||||
|
$("fUrl").value = link?.url || "";
|
||||||
|
$("form").hidden = false;
|
||||||
|
$("fName").focus();
|
||||||
|
}
|
||||||
|
function closeForm() {
|
||||||
|
editId = null;
|
||||||
|
$("form").hidden = true;
|
||||||
|
render();
|
||||||
|
}
|
||||||
|
|
||||||
|
$("form").addEventListener("submit", async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const url = normalizeUrl($("fUrl").value);
|
||||||
|
if (!url) { $("fUrl").focus(); return; }
|
||||||
|
const entry = { name: $("fName").value.trim(), url, icon: $("fIcon").value.trim() };
|
||||||
|
if (editId === "new") links.push({ id: uid(), ...entry });
|
||||||
|
else Object.assign(links.find((l) => l.id === editId), entry);
|
||||||
|
await save();
|
||||||
|
closeForm();
|
||||||
|
});
|
||||||
|
|
||||||
|
$("cancel").addEventListener("click", closeForm);
|
||||||
|
$("add").addEventListener("click", () => openForm());
|
||||||
|
$("search").addEventListener("input", render);
|
||||||
|
$("editToggle").addEventListener("click", () => {
|
||||||
|
editing = !editing;
|
||||||
|
if (!editing) { editId = null; $("form").hidden = true; }
|
||||||
|
render();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Enter im Suchfeld öffnet den ersten Treffer
|
||||||
|
$("search").addEventListener("keydown", (e) => {
|
||||||
|
if (e.key === "Enter" && !editing) $("list").querySelector("a")?.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
$("export").addEventListener("click", () => {
|
||||||
|
const blob = new Blob([JSON.stringify(links, null, 2)], { type: "application/json" });
|
||||||
|
const a = Object.assign(document.createElement("a"), { href: URL.createObjectURL(blob), download: "lablinks.json" });
|
||||||
|
a.click();
|
||||||
|
URL.revokeObjectURL(a.href);
|
||||||
|
});
|
||||||
|
$("import").addEventListener("click", () => $("file").click());
|
||||||
|
$("file").addEventListener("change", async (e) => {
|
||||||
|
const file = e.target.files[0];
|
||||||
|
if (!file) return;
|
||||||
|
try {
|
||||||
|
const arr = JSON.parse(await file.text());
|
||||||
|
links = arr
|
||||||
|
.filter((x) => x && x.name && x.url)
|
||||||
|
.map((x) => ({ id: uid(), name: String(x.name), url: normalizeUrl(String(x.url)) || String(x.url), icon: x.icon || "" }));
|
||||||
|
await save();
|
||||||
|
render();
|
||||||
|
} catch { alert("Ungültige JSON-Datei."); }
|
||||||
|
e.target.value = "";
|
||||||
|
});
|
||||||
|
|
||||||
|
load();
|
||||||
|
$("search").focus();
|
||||||
Reference in New Issue
Block a user