michi.vonah/click-guide
1
0
Fork 0
mirror of https://github.com/michivonah/click-guide.git synced 2025-12-22 22:16:28 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

3
chrome/background.js
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" });

14
chrome/content.js
View file

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

2
chrome/manifest.json
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>"],