From 94fb124a40165eb4d011aa11428e4ca8ef530e8a Mon Sep 17 00:00:00 2001
From: michivonah <info@michivonah.ch>
Date: Thu, 14 Nov 2024 21:57:46 +0100
Subject: [PATCH] add first version of coordinate saving to add-on #4

---
 chrome/background.js |  3 ++-
 chrome/content.js    | 14 +++++++++++++-
 chrome/manifest.json |  2 +-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/chrome/background.js b/chrome/background.js
index 348f96b..ca23490 100644
--- a/chrome/background.js
+++ b/chrome/background.js
@@ -35,7 +35,8 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
                     "description":"Short description of the step",
                     "action":message.triggerName,
                     "element":message.stepElement,
-                    "image":message.image
+                    "image":message.image,
+                    "elementPosition":message.elementPosition
                 }
                 steps.push(step);                
                 return sendResponse({ success: true, message: "Step successfully added to guide" });
diff --git a/chrome/content.js b/chrome/content.js
index 0a8a993..2bfb56c 100644
--- a/chrome/content.js
+++ b/chrome/content.js
@@ -73,6 +73,12 @@ document.addEventListener('click', function(){
                         viewportX, viewportY, croppedWidth, croppedHeight,
                         0, 0, croppedWidth, croppedHeight
                     );
+
+                    // calculate coordinates of the clicked element
+                    const elementStartX = Math.max((rect.left - (parentRect.left - pixelPadding / 2)), 0);
+                    const elementStartY = Math.max((rect.top - (parentRect.top - pixelPadding / 2)), 0);
+                    const elementEndX = elementStartX + rect.width;
+                    const elementEndY = elementStartY + rect.height;
     
                     const croppedDataUrl = canvas.toDataURL("image/jpeg");
                     chrome.runtime.sendMessage({
@@ -80,7 +86,13 @@ document.addEventListener('click', function(){
                         image: croppedDataUrl,
                         stepLabel: elementText,
                         stepElement: elementSelector,
-                        triggerName: "click"
+                        triggerName: "click",
+                        elementPosition: {
+                            startX: elementStartX,
+                            startY: elementStartY,
+                            endX: elementEndX,
+                            endY: elementEndY
+                        }
                     }, (response) => {
                         console.log(response);
                     });
diff --git a/chrome/manifest.json b/chrome/manifest.json
index 3a20e7e..fd82dc2 100644
--- a/chrome/manifest.json
+++ b/chrome/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Cl1ck Gu1de",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "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", "tabs", "storage"],
   "host_permissions": ["<all_urls>"],