diff --git a/chrome/assets/logo/color/logo128x128.png b/chrome/assets/logo/color/logo128x128.png
new file mode 100644
index 0000000..e8e9b10
Binary files /dev/null and b/chrome/assets/logo/color/logo128x128.png differ
diff --git a/chrome/assets/logo/color/logo16x16.png b/chrome/assets/logo/color/logo16x16.png
new file mode 100644
index 0000000..6834684
Binary files /dev/null and b/chrome/assets/logo/color/logo16x16.png differ
diff --git a/chrome/assets/logo/color/logo48x48.png b/chrome/assets/logo/color/logo48x48.png
new file mode 100644
index 0000000..f1bcbec
Binary files /dev/null and b/chrome/assets/logo/color/logo48x48.png differ
diff --git a/chrome/assets/logo/white/logo128x128.png b/chrome/assets/logo/white/logo128x128.png
new file mode 100644
index 0000000..c511c92
Binary files /dev/null and b/chrome/assets/logo/white/logo128x128.png differ
diff --git a/chrome/assets/logo/white/logo16x16.png b/chrome/assets/logo/white/logo16x16.png
new file mode 100644
index 0000000..bb08ab1
Binary files /dev/null and b/chrome/assets/logo/white/logo16x16.png differ
diff --git a/chrome/assets/logo/white/logo48x48.png b/chrome/assets/logo/white/logo48x48.png
new file mode 100644
index 0000000..c0b7e28
Binary files /dev/null and b/chrome/assets/logo/white/logo48x48.png differ
diff --git a/chrome/background.js b/chrome/background.js
new file mode 100644
index 0000000..c8ec49a
--- /dev/null
+++ b/chrome/background.js
@@ -0,0 +1,32 @@
+let steps = [];
+
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  if (request.action === "start") {
+    steps = []; // Leeren, falls eine neue Aufzeichnung beginnt
+    chrome.storage.local.set({ recording: true });
+  } else if (request.action === "stop") {
+    chrome.storage.local.set({ recording: false });
+    downloadJSON(); // JSON anzeigen oder herunterladen
+  } else if (request.action === "captureStep") {
+    steps.push(request.step);
+  }
+});
+
+function downloadJSON() {
+  const guide = {
+    title: "Guide Title",
+    description: "Description of the guide",
+    date: new Date().toISOString().split("T")[0],
+    author: "Me",
+    steps: steps
+  };
+
+  const json = JSON.stringify(guide, null, 2);
+  const blob = new Blob([json], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+
+  chrome.downloads.download({
+    url: url,
+    filename: "guide.json"
+  });
+}
diff --git a/chrome/content.js b/chrome/content.js
new file mode 100644
index 0000000..c13c0a5
--- /dev/null
+++ b/chrome/content.js
@@ -0,0 +1,35 @@
+let recording = false;
+
+chrome.storage.local.get("recording", (data) => {
+  recording = data.recording || false;
+});
+
+chrome.storage.onChanged.addListener((changes) => {
+  if (changes.recording) {
+    recording = changes.recording.newValue;
+  }
+});
+
+document.addEventListener("click", async (event) => {
+  if (!recording) return;
+
+  const elementSelector = getElementSelector(event.target);
+
+  chrome.tabs.captureVisibleTab(null, { format: "jpeg" }, (image) => {
+    const step = {
+      label: `Click on ${elementSelector}`,
+      description: "Short description of the step",
+      action: "click",
+      element: elementSelector,
+      image: image
+    };
+
+    chrome.runtime.sendMessage({ action: "captureStep", step: step });
+  });
+});
+
+function getElementSelector(element) {
+  if (element.id) return `#${element.id}`;
+  if (element.className) return `.${element.className.split(" ").join(".")}`;
+  return element.tagName.toLowerCase();
+}
diff --git a/chrome/manifest.json b/chrome/manifest.json
new file mode 100644
index 0000000..0c28270
--- /dev/null
+++ b/chrome/manifest.json
@@ -0,0 +1,24 @@
+{
+    "manifest_version": 3,
+    "name": "Cl1ck Gu1de",
+    "version": "0.0.1",
+    "description": "A browser add-on which records the steps clicked on a page and generates a easy to understand guide from it.",
+    "background": {
+      "service_worker": "background.js"
+    },
+    "permissions": ["tabs", "activeTab", "scripting"],
+    "action": {
+      "default_popup": "popup.html",
+      "default_icon": {
+        "16": "assets/logo/color/logo16x16.png",
+        "48": "assets/logo/color/logo48x48.png",
+        "128": "assets/logo/color/logo128x128.png"
+      }
+    },
+    "content_scripts":[
+        {
+            "matches": ["<all_urls>"],
+            "js": ["content.js"]
+        }
+    ]
+  }
\ No newline at end of file
diff --git a/chrome/popup.html b/chrome/popup.html
new file mode 100644
index 0000000..2a47354
--- /dev/null
+++ b/chrome/popup.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Cl1ck Gu1de</title>
+    <style>
+      body { font-family: Arial, sans-serif; padding: 10px; }
+      button { width: 100%; margin-top: 10px; padding: 10px; }
+    </style>
+  </head>
+  <body>
+    <h3>Cl1ck Gu1de</h3>
+    <button id="toggle-recording">Start Recording</button>
+    <script src="popup.js"></script>
+  </body>
+</html>
diff --git a/chrome/popup.js b/chrome/popup.js
new file mode 100644
index 0000000..95435a7
--- /dev/null
+++ b/chrome/popup.js
@@ -0,0 +1,10 @@
+let isRecording = false;
+
+document.addEventListener("DOMContentLoaded", () => {
+  document.getElementById("toggle-recording").addEventListener("click", () => {
+    isRecording = !isRecording;
+    const message = isRecording ? "start" : "stop";
+    chrome.runtime.sendMessage({ action: message });
+    document.getElementById("toggle-recording").textContent = isRecording ? "Stop Recording" : "Start Recording";
+  });
+});
diff --git a/guide.json b/guide.json
new file mode 100644
index 0000000..8f42bf7
--- /dev/null
+++ b/guide.json
@@ -0,0 +1,22 @@
+{
+    "title":"Guide Title",
+    "description":"Description of the guide",
+    "date":"2024-10-27",
+    "author":"Me",
+    "steps":[
+        {
+            "label":"Click login",
+            "description":"Short description of the step",
+            "action":"click",
+            "element":"#login",
+            "image":"data:image/jpeg;base64,..."
+        },
+        {
+            "label":"Click login",
+            "description":"Short description of the step",
+            "action":"click",
+            "element":"#login",
+            "image":"data:image/jpeg;base64,..."
+        }
+    ]
+}
\ No newline at end of file