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

adding start/stop/pause/resume functionality

Browse source
This commit is contained in:
Michi 2024-11-07 21:31:33 +01:00
parent b1c9b26e23
commit cd2de15b2b
5 changed files with 104 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

100
chrome/content.js
View file

@ -1,46 +1,60 @@
// Script which is executed on all web pages
//document.body.style.background = "blue";
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)
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");
chrome.runtime.sendMessage({
action: "saveStep",
image: croppedDataUrl,
stepLabel: elementText,
stepElement: elementSelector,
triggerName: "click"
}, (response) => {
console.log(response);
});
};
} else {
console.error("Error, while capturing the screenshot:", response.error);
}
});
// load recording status & react to updates
let isRecording = false;
chrome.storage.local.get("recording", (data) => {
isRecording = data.recording || false;
});
chrome.storage.onChanged.addListener((changes) => {
if (changes.recording) {
isRecording = changes.recording.newValue;
}
// signalize recording status
document.body.style.border = isRecording ? "red 20px solid" : "none";
});
// add recording functionality on click
document.addEventListener('click', function(){
if(isRecording){
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)
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");
chrome.runtime.sendMessage({
action: "saveStep",
image: croppedDataUrl,
stepLabel: elementText,
stepElement: elementSelector,
triggerName: "click"
}, (response) => {
console.log(response);
});
};
} else {
console.error("Error, while capturing the screenshot:", response.error);
}
});
}
});