diff --git a/popup/popup.css b/popup/popup.css
index 2fc266e..f4fc37a 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -1,7 +1,12 @@
* { margin: 0; padding: 0; box-sizing: border-box; }
body { width: 300px; font: 13px/1.4 system-ui, sans-serif; color: #e0e0e0; background: #1e1e2e; }
h1 { padding: 10px 12px 6px; font-size: 15px; font-weight: 600; border-bottom: 1px solid #333; }
+.search-wrap { padding: 6px 12px; border-bottom: 1px solid #2a2a3a; }
+#search { width: 100%; padding: 5px 8px; background: #2a2a3a; border: 1px solid #444; border-radius: 4px; color: #e0e0e0; font-size: 12px; outline: none; }
+#search:focus { border-color: #4a9eff; }
+#search::placeholder { color: #666; }
#container-list { max-height: 320px; overflow-y: auto; }
+.row.hidden { display: none; }
.row { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid #2a2a3a; }
.row:hover { background: #2a2a3a; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
diff --git a/popup/popup.html b/popup/popup.html
index c0449f4..17d5edd 100644
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -6,6 +6,9 @@
ContainSite
+
+
+
diff --git a/popup/popup.js b/popup/popup.js
index 5d901c2..13a8f60 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -85,4 +85,13 @@ document.getElementById("reset").addEventListener("click", async (e) => {
}, 1200);
});
+document.getElementById("search").addEventListener("input", (e) => {
+ const q = e.target.value.toLowerCase();
+ const rows = document.querySelectorAll("#container-list .row");
+ for (const row of rows) {
+ const text = row.textContent.toLowerCase();
+ row.classList.toggle("hidden", q && !text.includes(q));
+ }
+});
+
loadContainers();