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

beginn development of MVP

Browse source
This commit is contained in:
Michi 2024-10-27 14:50:53 +01:00
parent 38ef57f310
commit cfb4959168
12 changed files with 138 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
chrome/assets/logo/color/logo128x128.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
chrome/assets/logo/color/logo16x16.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 528 B

BIN
chrome/assets/logo/color/logo48x48.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
chrome/assets/logo/white/logo128x128.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
chrome/assets/logo/white/logo16x16.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 252 B

BIN
chrome/assets/logo/white/logo48x48.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 619 B

32
chrome/background.js Normal file
View file

@ -0,0 +1,32 @@
let steps = [];
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.action === "start") {
steps = []; // Leeren, falls eine neue Aufzeichnung beginnt
chrome.storage.local.set({ recording: true });
} else if (request.action === "stop") {
chrome.storage.local.set({ recording: false });
downloadJSON(); // JSON anzeigen oder herunterladen
} else if (request.action === "captureStep") {
steps.push(request.step);
}
});
function downloadJSON() {
const guide = {
title: "Guide Title",
description: "Description of the guide",
date: new Date().toISOString().split("T")[0],
author: "Me",
steps: steps
};
const json = JSON.stringify(guide, null, 2);
const blob = new Blob([json], { type: "application/json" });
const url = URL.createObjectURL(blob);
chrome.downloads.download({
url: url,
filename: "guide.json"
});
}

35
chrome/content.js Normal file
View file

@ -0,0 +1,35 @@
let recording = false;
chrome.storage.local.get("recording", (data) => {
recording = data.recording || false;
});
chrome.storage.onChanged.addListener((changes) => {
if (changes.recording) {
recording = changes.recording.newValue;
}
});
document.addEventListener("click", async (event) => {
if (!recording) return;
const elementSelector = getElementSelector(event.target);
chrome.tabs.captureVisibleTab(null, { format: "jpeg" }, (image) => {
const step = {
label: `Click on ${elementSelector}`,
description: "Short description of the step",
action: "click",
element: elementSelector,
image: image
};
chrome.runtime.sendMessage({ action: "captureStep", step: step });
});
});
function getElementSelector(element) {
if (element.id) return `#${element.id}`;
if (element.className) return `.${element.className.split(" ").join(".")}`;
return element.tagName.toLowerCase();
}

24
chrome/manifest.json Normal file
View file

@ -0,0 +1,24 @@
{
"manifest_version": 3,
"name": "Cl1ck Gu1de",
"version": "0.0.1",
"description": "A browser add-on which records the steps clicked on a page and generates a easy to understand guide from it.",
"background": {
"service_worker": "background.js"
},
"permissions": ["tabs", "activeTab", "scripting"],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "assets/logo/color/logo16x16.png",
"48": "assets/logo/color/logo48x48.png",
"128": "assets/logo/color/logo128x128.png"
}
},
"content_scripts":[
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
]
}

15
chrome/popup.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<title>Cl1ck Gu1de</title>
<style>
body { font-family: Arial, sans-serif; padding: 10px; }
button { width: 100%; margin-top: 10px; padding: 10px; }
</style>
</head>
<body>
<h3>Cl1ck Gu1de</h3>
<button id="toggle-recording">Start Recording</button>
<script src="popup.js"></script>
</body>
</html>

10
chrome/popup.js Normal file
View file

@ -0,0 +1,10 @@
let isRecording = false;
document.addEventListener("DOMContentLoaded", () => {
document.getElementById("toggle-recording").addEventListener("click", () => {
isRecording = !isRecording;
const message = isRecording ? "start" : "stop";
chrome.runtime.sendMessage({ action: message });
document.getElementById("toggle-recording").textContent = isRecording ? "Stop Recording" : "Start Recording";
});
});

22
guide.json Normal file
View file

@ -0,0 +1,22 @@
{
"title":"Guide Title",
"description":"Description of the guide",
"date":"2024-10-27",
"author":"Me",
"steps":[
{
"label":"Click login",
"description":"Short description of the step",
"action":"click",
"element":"#login",
"image":"data:image/jpeg;base64,..."
},
{
"label":"Click login",
"description":"Short description of the step",
"action":"click",
"element":"#login",
"image":"data:image/jpeg;base64,..."
}
]
}