thinkswell · parinaB · Nov 19, 2025
diff --git a/CodeSnippetExtension/parinaB/README.md b/CodeSnippetExtension/parinaB/README.md
diff --git a/CodeSnippetExtension/parinaB/manifest.json b/CodeSnippetExtension/parinaB/manifest.json
@@ -0,0 +1,12 @@
+{
+  "manifest_version": 3,
+  "name": "Code Snippet Saver",
+  "version": "1.0",
+  "description": "Save, search and manage your favorite code snippets instantly!",
+  "action": {
+    "default_popup": "popup.html",
+    "default_title": "Code Snippet Saver"
+  },
+
+  "permissions": ["storage"]
+}
diff --git a/CodeSnippetExtension/parinaB/popup.html b/CodeSnippetExtension/parinaB/popup.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Code Snippet Saver</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <div class="container">
+    <h2>Code Snippet Saver</h2>
+
+    <input type="text" id="title" placeholder="Title (e.g. Flexbox Center)" required />
+    <textarea id="code" placeholder="Paste your code here..." rows="6"></textarea>
+    <button id="save">Save Snippet</button>
+
+    <input type="text" id="search" placeholder="Search snippets..." class="search" />
+
+    <ul id="snippets"></ul>
+  </div>
+
+  <script src="popup.js"></script>
+</body>
+</html>
diff --git a/CodeSnippetExtension/parinaB/popup.js b/CodeSnippetExtension/parinaB/popup.js
@@ -0,0 +1,45 @@
+const titleInp = document.getElementById('title');
+const codeInp = document.getElementById('code');
+const saveBtn = document.getElementById('save');
+const searchInp = document.getElementById('search');
+const list = document.getElementById('snippets');
+
+function render(filter = '') {
+  chrome.storage.sync.get(null, items => {
+    list.innerHTML = '';
+    Object.keys(items)
+      .filter(key => key.toLowerCase().includes(filter.toLowerCase()))
+      .reverse()
+      .forEach(key => {
+        const data = items[key];
+        const li = document.createElement('li');
+        li.innerHTML = `
+          <strong>${key}</strong>
+          <button class="delete" data-key="${key}">×</button>
+          <div class="code">${data.code}</div>
+          <small>Saved: ${new Date(data.time).toLocaleString()}</small>
+        `;
+        li.querySelector('.delete').onclick = () => {
+          chrome.storage.sync.remove(key, () => render(searchInp.value));
+        };
+        list.appendChild(li);
+      });
+  });
+}
+
+saveBtn.onclick = () => {
+  const title = titleInp.value.trim();
+  const code = codeInp.value.trim();
+  if (!title || !code) return alert("Please fill both title and code!");
+
+  chrome.storage.sync.set({
+    [title]: { code, time: Date.now() }
+  }, () => {
+    titleInp.value = '';
+    codeInp.value = '';
+    render(searchInp.value);
+  });
+};
+
+searchInp.oninput = () => render(searchInp.value);
+render();
diff --git a/CodeSnippetExtension/parinaB/screenshot.png b/CodeSnippetExtension/parinaB/screenshot.png
diff --git a/CodeSnippetExtension/parinaB/style.css b/CodeSnippetExtension/parinaB/style.css
@@ -0,0 +1,69 @@
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body {
+  font-family: system-ui, sans-serif;
+  width: 380px;
+  background: #0f0f1e;
+  color: #e0e0e0;
+}
+.container { padding: 16px; }
+h2 {
+  text-align: center;
+  margin-bottom: 16px;
+  color: #00d0ff;
+}
+input, textarea, button {
+  width: 100%;
+  padding: 10px;
+  margin: 8px 0;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+}
+input, textarea {
+  background: #16213e;
+  color: #fff;
+}
+button {
+  background: #00d0ff;
+  color: #000;
+  font-weight: bold;
+  cursor: pointer;
+}
+button:hover { background: #00a8cc; }
+.search { margin: 16px 0 8px; }
+ul {
+  list-style: none;
+  max-height: 420px;
+  overflow-y: auto;
+  padding-right: 8px;
+}
+li {
+  background: #16213e;
+  padding: 12px;
+  margin: 8px 0;
+  border-radius: 8px;
+  position: relative;
+}
+.code {
+  background: #0d0d1a;
+  padding: 10px;
+  border-radius: 6px;
+  margin: 8px 0;
+  white-space: pre-wrap;
+  font-family: 'Courier New', monospace;
+  font-size: 12px;
+  color: #8ff0a4;
+}
+.delete {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: #ff4444;
+  color: white;
+  border: none;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 16px;
+}