From cfb49591680e5690b38c87b4dc9ad5d502265712 Mon Sep 17 00:00:00 2001 From: michivonah Date: Sun, 27 Oct 2024 14:50:53 +0100 Subject: [PATCH] beginn development of MVP --- chrome/assets/logo/color/logo128x128.png | Bin 0 -> 4932 bytes chrome/assets/logo/color/logo16x16.png | Bin 0 -> 528 bytes chrome/assets/logo/color/logo48x48.png | Bin 0 -> 1490 bytes chrome/assets/logo/white/logo128x128.png | Bin 0 -> 1478 bytes chrome/assets/logo/white/logo16x16.png | Bin 0 -> 252 bytes chrome/assets/logo/white/logo48x48.png | Bin 0 -> 619 bytes chrome/background.js | 32 +++++++++++++++++++++ chrome/content.js | 35 +++++++++++++++++++++++ chrome/manifest.json | 24 ++++++++++++++++ chrome/popup.html | 15 ++++++++++ chrome/popup.js | 10 +++++++ guide.json | 22 ++++++++++++++ 12 files changed, 138 insertions(+) create mode 100644 chrome/assets/logo/color/logo128x128.png create mode 100644 chrome/assets/logo/color/logo16x16.png create mode 100644 chrome/assets/logo/color/logo48x48.png create mode 100644 chrome/assets/logo/white/logo128x128.png create mode 100644 chrome/assets/logo/white/logo16x16.png create mode 100644 chrome/assets/logo/white/logo48x48.png create mode 100644 chrome/background.js create mode 100644 chrome/content.js create mode 100644 chrome/manifest.json create mode 100644 chrome/popup.html create mode 100644 chrome/popup.js create mode 100644 guide.json diff --git a/chrome/assets/logo/color/logo128x128.png b/chrome/assets/logo/color/logo128x128.png new file mode 100644 index 0000000000000000000000000000000000000000..e8e9b108d7c49112e5dc58d2cbc24a295bf2b39a GIT binary patch literal 4932 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 Sl_Q`400005Nx6^_@LI`;%X_< z5D{rXMP;}2M?hZm#X?n}R0^yTK;uKjpIxgI3-mbW?42E^hwDma@9rii=ib@Oob%l| zXXfnAoiOg>vUGuvGeSVfCDcijvEnJEkm1f;hK43)W@jq9<{!7EYhuP+kei(kdD$LQ zp>guBDFm0xJ%(d@a*APcR!##NE6Ve_(RR`Rs!C_vghuAgS_ofk4#RmW({SRz^Wgq6m zs1PVEsOY)Ok4!TFUkqRY0_^w&j&=MMb0G953M#+FRD5qbdKdqmQw(zmFV|606lfBokNJ3*t@YGlbj%?O}#EGbg6`Ja0a64 zDJw0nEvK~^ko_eDih%fo!s$z~Sj?SSM-Y|X>LHf&ihHP*%IM z+~xp57DCv@XFzLL*Q`H-h|n^7yW;g+F=HTqFR4 zI4dT!Xpm)(7Fm}Z+`Xz%o7z(+Un#i04u`Kkylr4!oks5 z)J)_I$?Nu)_TX;|Js;8pKw;F=@+}Qs;-Ro%lAG-z{lwB$@OkS1uI+3COl=71>ojgO zxRlDUVE`poJ~XY_0;hLhVw<5{g;EMI7}RH>am7a9VZ=k|jn(gA_%I0edm_~UUCm#U z0dGMCYWfF4K6w&?n?`!wGh2Z}u-_9-=70i_Mh@*b3wO@BUwhi)uidT;@D*3l^_zAO zR3kY*11Kz+Us%?HMr6X`CMUxRo&Vnu&W8{^B@WQ}c3&J|U+VxR?CVc&ru&NGYp({v z`4Ez#8;;N>wXJb4oaj7DwU{<#meP0slc;`KZWgTxSO>AmHK+p$Dq$Shdyj zp+h`*a(*W{pPp5S*YnzUC@eQHVKL@q*kD_#S0QDT0Wh&ocJ93600zP!*vyy#IDbBn zpuZ`A^XCJJ`x^r|e?E}7zd3;O=L7cr4FJ+{KEV4M0Ho`DfcG~CFh6EBKZ-@0WZQ28 zU~tgwxS%bxiME9gi`n1nX0IAJFK7#GlI?l37ZL#a!~qh&>@g-^_DF}IZS;YBA)gWh sxGe1va*DlflWI}6Pgy=q82@U{zX$eRbEueRZ~y=R07*qoM6N<$f@(dy00000 literal 0 HcmV?d00001 diff --git a/chrome/assets/logo/white/logo128x128.png b/chrome/assets/logo/white/logo128x128.png new file mode 100644 index 0000000000000000000000000000000000000000..c511c927ab43e572a3c11f4abf817d8a968f74dd GIT binary patch literal 1478 zcma)+c{tR09LK+NnPFr`SWoVA96ceGVI2)-)0k<@<{B)U>5!XR4I25G!sJS`>l$K8 z2Q4B;O64jK>lg|nxsz0`MxGL7r~cT#_m9u#{rWub=ly&>e|;`8=q}sj)Z_pF+b9Rg zhouUAFAP%JgNfxN08p6}vZF`r=;F9rr$&$_dPQWn+M}+FM12?@l|iVa*^u>()0`Bn z0zw%0-HPsImE|=iYmBQXY-V;^y$Y*z!af#1;B4aMaofX~yvxHhjmxwDtD!D???zCu zQ_52A0)L6#7Ew|VcP=lPoy#u4i6ZB0+xxP*v$mIfO1qwG6;MBGLloZ4QH-j@^2_UT z1g-%eFNZ6VH7;jduN-3X$Lch>ywY0SWm*Q&*S$CK5Wn461*oG(o&^XCIEZLfE(p^S z=Gx5#25p|ykLkc|#tffxub*wwX_uh*FoEqwGsyeZhYwB?P@mv-F~d z9PKi998+lNEgW=_)hehb)v6VLRCwY5@XC#Dd|D7v6t8{T0WgfC3k?c-FyG!F%Dw=S z?hG~$|1e~~)FCCi?Vxnja+n+Pto@*@TAa=wU^y%xfXc-3{{QfmdG~6dHsF8l-WxLb=zfi zr8+c&=X4Ktj`c0!T31Hk429j4WaI1&%MyWSaOXvnPmPKs1Yw!A$CZcX9< z@N4s1h>eq-3v*4!p%Sx(sUoFDwY$+<6{nD!e? zZz+5LSzmK(!9jPj6d)JEV-lH?(5BTs7%0l2i3Q)bG*LNvlLiJZd-`)|eAJb^8|iC7jQ(OBB7j%1N0sRD zs_-9En?$@QdkUe$M;M%h)BR)H5f$!AP6fuN9~#HUV6GX@#`=s&28NnCywngazyipF|05&sVTqXd14ri_9W-2P0hUYKLg4y KbaIu`5$?a&l!7n- literal 0 HcmV?d00001 diff --git a/chrome/assets/logo/white/logo16x16.png b/chrome/assets/logo/white/logo16x16.png new file mode 100644 index 0000000000000000000000000000000000000000..bb08ab10bdacdafbab5eb584e57590937e43a6f1 GIT binary patch literal 252 zcmV9dk2gn`HS&S^jH z<#J(eu=6(d#is{Q0W7Rdv$7$R-WH8Ub!@<$k4*Z}LoEtw+ z7NJsY3L%RQY4Zq&9|Sysd*n&CJ`eX~$T`0coO1}|q6$EZ@7RC!U7#e8Q3bGoF=UY0 z+mUz}*A{ueJVuX2W|(8PqK|Qe$B|gl`b?lpgZz3FiB|xWdB7GeprokmGDhBu#76*X zdB8Lf$f*z`Z$;uWO<-!W0E#@vZ;Y=TMuZngiBohj);W#{FOU+me8cE-8WCO~B@VHQ zG2pV&CJE>U)%k>B+(ASokWYz#50N;k#0nq~;=+=UO*H9YoU8=&=)m$A{a|)6PUHe_ z*r3CC8kLLyrrE-nuLc58=NA@xofllB31Vt)Ks&mE@rP|O8@%QU2T*x|61afH_#Fm_ zVUu@UBRBy)`}lz|RP>M$(*|lTKmji?2H2=YJOD};pnyv#QoV!mg|nLD0W|LC=V+6J zbt3Kuv`KH#CNUybfI#5~O5iHGNpUoB%RnHw0DT^0Q-nqlPephDZPNP~y2>*}CxjQc z9wW~H&&LxEK;N~wuM_F~Lp%}T0aPLOcmjeCs8MRxIARGXJb)@CH1?SSf*VK)AvbhB zE+8eAvDmj2KS2O3Zqw%`Fa?ta(2P1zf*%-96pD8M)d;%_um|h`uD`Kqmq4ou=+eMb z4Y~-(eU*^kbIhPYom(-e*wm%^9Pk3oX7wG002ovPDHLk FV1oVe0{Z{} literal 0 HcmV?d00001 diff --git a/chrome/background.js b/chrome/background.js new file mode 100644 index 0000000..c8ec49a --- /dev/null +++ b/chrome/background.js @@ -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" + }); +} diff --git a/chrome/content.js b/chrome/content.js new file mode 100644 index 0000000..c13c0a5 --- /dev/null +++ b/chrome/content.js @@ -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(); +} diff --git a/chrome/manifest.json b/chrome/manifest.json new file mode 100644 index 0000000..0c28270 --- /dev/null +++ b/chrome/manifest.json @@ -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": [""], + "js": ["content.js"] + } + ] + } \ No newline at end of file diff --git a/chrome/popup.html b/chrome/popup.html new file mode 100644 index 0000000..2a47354 --- /dev/null +++ b/chrome/popup.html @@ -0,0 +1,15 @@ + + + + Cl1ck Gu1de + + + +

Cl1ck Gu1de

+ + + + diff --git a/chrome/popup.js b/chrome/popup.js new file mode 100644 index 0000000..95435a7 --- /dev/null +++ b/chrome/popup.js @@ -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"; + }); +}); diff --git a/guide.json b/guide.json new file mode 100644 index 0000000..8f42bf7 --- /dev/null +++ b/guide.json @@ -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,..." + } + ] +} \ No newline at end of file