create the screenshot functionality

chrome/background.js

@@ -2,6 +2,18 @@
 
 chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
     console.log(message.action);
+    if (message.action == "captureScreenshot"){
+        chrome.tabs.captureVisibleTab(null, { format: "jpeg" }, (dataUrl) => {
+            if (chrome.runtime.lastError) {
+                console.error("Error capturing screenshot: ", chrome.runtime.lastError);
+                sendResponse({ success: false, error: chrome.runtime.lastError });
+                return;
+            }
+            
+            sendResponse({ success: true, screenshot: dataUrl });
+        });
+        return true;
+    }
     /*chrome.scripting.executeScript({
         target: {tabId: tabs[0].id},
         files: ['test.js']

chrome/content.js

@@ -1,4 +1,39 @@
 // Script which is executed on all web pages
+
 //document.body.style.background = "blue";
-document.body.style.border = "red 20px solid";
-console.log("Ich bin hier")
+document.body.style.border = "red 20px solid"; // just to identify if the extension is active on this tab
+
+document.addEventListener('click', function(){
+    const element = event.target;
+    const elementText = element.textContent; // gets the text of the clicked element
+    const elementSelector = element.id; // the id of the clicked element, if exists (else its empty)
+    //console.log(elementText + ";" + elementSelector);
+
+    const rect = element.getBoundingClientRect(); // create a rectangle from the element
+
+    chrome.runtime.sendMessage({action: "captureScreenshot"}, (response) => {
+        if (response && response.success) {
+            const img = new Image();
+            img.src = response.screenshot;
+            img.onload = () => {
+                const pixelZoom = 350;
+
+                const canvas = document.createElement("canvas");
+                canvas.width = rect.width + pixelZoom;
+                canvas.height = rect.height + pixelZoom;
+                const ctx = canvas.getContext("2d");
+
+                ctx.drawImage(
+                    img,
+                    rect.left, rect.top, rect.width + pixelZoom, rect.height + pixelZoom, // source size
+                    0, 0, rect.width + pixelZoom, rect.height + pixelZoom // result size
+                );
+
+                const croppedDataUrl = canvas.toDataURL("image/jpeg");
+                console.log(croppedDataUrl);
+            };
+        } else {
+            console.error("Error, while capturing the screenshot:", response.error);
+        }
+    });
+});

chrome/manifest.json

@@ -3,7 +3,8 @@
   "name": "Cl1ck Gu1de",
   "version": "0.0.2",
   "description": "A browser add-on which records the steps clicked on a page and generates a easy to understand guide from it.",
-  "permissions": ["scripting", "activeTab", "downloads", "tabCapture", "tabs"],
+  "permissions": ["scripting", "activeTab", "downloads", "tabs"],
+  "host_permissions": ["<all_urls>"],
   "background": {
     "service_worker": "background.js"
   },

chrome/popup.js

@@ -1,4 +1,5 @@
 // Script for Popup
+
 const toggleRecordingBtn = document.getElementById("toggleRecording");
 
 toggleRecordingBtn.addEventListener('click', () => {