add first version of coordinate saving to add-on #4

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" });

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);
                     });

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>"],