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

37
chrome/background.js
View file

@ -1,32 +1,9 @@
let steps = [];
// Background Worker
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);
}
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
console.log(message.action);
/*chrome.scripting.executeScript({
target: {tabId: tabs[0].id},
files: ['test.js']
});*/
});
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;
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();
}
// Script which is executed on all web pages
//document.body.style.background = "blue";
document.body.style.border = "red 20px solid";
console.log("Ich bin hier")

4
chrome/manifest.json
View file

@ -1,12 +1,12 @@
{
"manifest_version": 3,
"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.",
"permissions": ["scripting", "activeTab", "downloads", "tabCapture", "tabs"],
"background": {
"service_worker": "background.js"
},
"permissions": ["tabs", "activeTab", "scripting"],
"action": {
"default_popup": "popup.html",
"default_icon": {

7
chrome/popup.html
View file

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

13
chrome/popup.js
View file

@ -1,10 +1,7 @@
let isRecording = false;
// Script for Popup
const toggleRecordingBtn = document.getElementById("toggleRecording");
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";
});
toggleRecordingBtn.addEventListener('click', () => {
console.log("Button clicked");
chrome.runtime.sendMessage({action: 'triggerName'});
});