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

revert to scratch & create basic chrome extension

Browse source
This commit is contained in:
Michi 2024-11-06 18:07:23 +01:00
parent cfb4959168
commit 3363ec9acf
5 changed files with 40 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

39
chrome/background.js
View file

@ -1,32 +1,9 @@
let steps = []; // Background Worker
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (request.action === "start") { console.log(message.action);
steps = []; // Leeren, falls eine neue Aufzeichnung beginnt /*chrome.scripting.executeScript({
chrome.storage.local.set({ recording: true }); target: {tabId: tabs[0].id},
} else if (request.action === "stop") { files: ['test.js']
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"
});
}

39
chrome/content.js
View file

@ -1,35 +1,4 @@
let recording = false; // Script which is executed on all web pages
//document.body.style.background = "blue";
chrome.storage.local.get("recording", (data) => { document.body.style.border = "red 20px solid";
recording = data.recording || false; console.log("Ich bin hier")
});
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();
}

38
chrome/manifest.json
View file

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

7
chrome/popup.html
View file

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

15
chrome/popup.js
View file

@ -1,10 +1,7 @@
let isRecording = false; // Script for Popup
const toggleRecordingBtn = document.getElementById("toggleRecording");
document.addEventListener("DOMContentLoaded", () => { toggleRecordingBtn.addEventListener('click', () => {
document.getElementById("toggle-recording").addEventListener("click", () => { console.log("Button clicked");
isRecording = !isRecording; chrome.runtime.sendMessage({action: 'triggerName'});
const message = isRecording ? "start" : "stop"; });
chrome.runtime.sendMessage({ action: message });
document.getElementById("toggle-recording").textContent = isRecording ? "Stop Recording" : "Start Recording";
});
});