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

This commit is contained in:
Michi 2024-11-14 21:57:46 +01:00
parent 5efe19df58
commit 94fb124a40
3 changed files with 16 additions and 3 deletions

View file

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

View file

@ -74,13 +74,25 @@ document.addEventListener('click', function(){
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({
action: "saveStep",
image: croppedDataUrl,
stepLabel: elementText,
stepElement: elementSelector,
triggerName: "click"
triggerName: "click",
elementPosition: {
startX: elementStartX,
startY: elementStartY,
endX: elementEndX,
endY: elementEndY
}
}, (response) => {
console.log(response);
});

View file

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