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

making basic functionality work & add todo list to readme

Browse source
This commit is contained in:
Michi 2024-11-06 21:42:09 +01:00
parent f32a3b56ce
commit a84d0a512e
5 changed files with 88 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

18
README.md
View file

@ -1,2 +1,20 @@
# click-guide # click-guide
A browser add-on which records the steps clicked on a page and generates a easy to understand guide from it. A browser add-on which records the steps clicked on a page and generates a easy to understand guide from it.
Similar to tango.us/dubble.so/folge.me/magichow.co but all local - no data leaves your device
## To-Do MVP:
- [x] identify element selector or id
- [x] create a screenshot of the steps
- [x] ability to save multiple steps
- [x] export guide as json file
- [ ] add recording start/stop functionality
- [ ] create basic popup UI
### Additional nice to have:
- [ ] Viewer for Guide JSON
- [ ] Editor for Guide
- [ ] improve error handling
### Maybe far in the future:
- [ ] Optional cloud for sharing guide as link

31
chrome/background.js
View file

@ -1,8 +1,10 @@
// Background Worker // Background Worker
let steps = [];
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
console.log(message.action); switch(message.action){
if (message.action == "captureScreenshot"){ case "captureScreenshot":
chrome.tabs.captureVisibleTab(null, { format: "jpeg" }, (dataUrl) => { chrome.tabs.captureVisibleTab(null, { format: "jpeg" }, (dataUrl) => {
if (chrome.runtime.lastError) { if (chrome.runtime.lastError) {
console.error("Error capturing screenshot: ", chrome.runtime.lastError); console.error("Error capturing screenshot: ", chrome.runtime.lastError);
@ -13,9 +15,26 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
sendResponse({ success: true, screenshot: dataUrl }); sendResponse({ success: true, screenshot: dataUrl });
}); });
return true; return true;
case "saveStep":
try{
const step = {
"label":message.stepLabel,
"description":"Short description of the step",
"action":message.triggerName,
"element":message.stepElement,
"image":message.image
}
steps.push(step);
return sendResponse({ success: true, message: "Step successfully added to guide" });
}
catch(error){
return sendResponse({ success: false, message: error });
}
case "generateGuide":
return sendResponse({ success: true, guide: steps });;
case "debug":
default:
console.log(message.action);
break;
} }
/*chrome.scripting.executeScript({
target: {tabId: tabs[0].id},
files: ['test.js']
});*/
}); });

11
chrome/content.js
View file

@ -7,7 +7,6 @@ document.addEventListener('click', function(){
const element = event.target; const element = event.target;
const elementText = element.textContent; // gets the text of the clicked element 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 elementSelector = element.id; // the id of the clicked element, if exists (else its empty)
//console.log(elementText + ";" + elementSelector);
const rect = element.getBoundingClientRect(); // create a rectangle from the element const rect = element.getBoundingClientRect(); // create a rectangle from the element
@ -30,7 +29,15 @@ document.addEventListener('click', function(){
); );
const croppedDataUrl = canvas.toDataURL("image/jpeg"); const croppedDataUrl = canvas.toDataURL("image/jpeg");
console.log(croppedDataUrl); chrome.runtime.sendMessage({
action: "saveStep",
image: croppedDataUrl,
stepLabel: elementText,
stepElement: elementSelector,
triggerName: "click"
}, (response) => {
console.log(response);
});
}; };
} else { } else {
console.error("Error, while capturing the screenshot:", response.error); console.error("Error, while capturing the screenshot:", response.error);

1
chrome/popup.html
View file

@ -9,6 +9,7 @@
<body> <body>
<h3>Cl1ck Gu1de</h3> <h3>Cl1ck Gu1de</h3>
<button id="toggleRecording">Start Recording</button> <button id="toggleRecording">Start Recording</button>
<button id="exportBtn">Export JSON</button>
<script src="popup.js"></script> <script src="popup.js"></script>
</body> </body>
</html> </html>

25
chrome/popup.js
View file

@ -1,8 +1,33 @@
// Script for Popup // Script for Popup
const toggleRecordingBtn = document.getElementById("toggleRecording"); const toggleRecordingBtn = document.getElementById("toggleRecording");
const exportBtn = document.getElementById("exportBtn");
toggleRecordingBtn.addEventListener('click', () => { toggleRecordingBtn.addEventListener('click', () => {
console.log("Button clicked"); console.log("Button clicked");
chrome.runtime.sendMessage({action: 'triggerName'}); chrome.runtime.sendMessage({action: 'triggerName'});
}); });
exportBtn.addEventListener('click', () => {
console.log("Export requested");
chrome.runtime.sendMessage({
action: "generateGuide"
}, (response) => {
const guide = response.guide;
exportJSON(guide, "guide.json");
});
});
function exportJSON(object, filename){
const json = JSON.stringify(object, null, 2);
const blob = new Blob([json], { type: "application/json" });
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = filename;
link.click();
URL.revokeObjectURL(url);
}