making basic functionality work & add todo list to readme

README.md

@@ -1,2 +1,20 @@
 # click-guide
 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

chrome/background.js

@@ -1,21 +1,40 @@
 // Background Worker
 
+let steps = [];
+
 chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
-    console.log(message.action);
-    if (message.action == "captureScreenshot"){
-        chrome.tabs.captureVisibleTab(null, { format: "jpeg" }, (dataUrl) => {
-            if (chrome.runtime.lastError) {
-                console.error("Error capturing screenshot: ", chrome.runtime.lastError);
-                sendResponse({ success: false, error: chrome.runtime.lastError });
-                return;
+    switch(message.action){
+        case "captureScreenshot":
+            chrome.tabs.captureVisibleTab(null, { format: "jpeg" }, (dataUrl) => {
+                if (chrome.runtime.lastError) {
+                    console.error("Error capturing screenshot: ", chrome.runtime.lastError);
+                    sendResponse({ success: false, error: chrome.runtime.lastError });
+                    return;
+                }
+    
+                sendResponse({ success: true, screenshot: dataUrl });
+            });
+            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" });
             }
-            
-            sendResponse({ success: true, screenshot: dataUrl });
-        });
-        return true;
+            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']
-    });*/
 });

chrome/content.js

@@ -7,7 +7,6 @@ document.addEventListener('click', function(){
     const element = event.target;
     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)
-    //console.log(elementText + ";" + elementSelector);
 
     const rect = element.getBoundingClientRect(); // create a rectangle from the element
 
@@ -30,7 +29,15 @@ document.addEventListener('click', function(){
                 );
 
                 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 {
             console.error("Error, while capturing the screenshot:", response.error);

chrome/popup.html

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

chrome/popup.js

@@ -1,8 +1,33 @@
 // Script for Popup
 
 const toggleRecordingBtn = document.getElementById("toggleRecording");
+const exportBtn = document.getElementById("exportBtn");
 
 toggleRecordingBtn.addEventListener('click', () => {
     console.log("Button clicked");
     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);
+}