adding start/stop/pause/resume functionality

README.md

@@ -8,13 +8,16 @@ Similar to tango.us/dubble.so/folge.me/magichow.co but all local - no data leave
 - [x] create a screenshot of the steps
 - [x] ability to save multiple steps
 - [x] export guide as json file
-- [ ] add recording start/stop functionality
+- [x] add recording start/stop functionality
 - [x] create basic popup UI
 
 ### Additional nice to have:
 - [ ] Viewer for Guide JSON
+    - [ ] PDF export
 - [ ] Editor for Guide
 - [ ] improve error handling
+- [ ] Blur sensitive information
+- [x] Pause/resume recording feature
 
 ### Maybe far in the future:
 - [ ] Optional cloud for sharing guide as link

chrome/background.js

@@ -31,7 +31,13 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
                 return sendResponse({ success: false, message: error });
             }
         case "generateGuide":
-            return sendResponse({ success: true, guide: steps });;
+            return sendResponse({ success: true, guide: steps });
+        case "clearGuide":
+            steps = [];
+            return sendResponse({ success: true, message: "Cleared guide successfully" });
+        case "guideLenght":
+            count = steps.length;
+            return sendResponse({ success: true, stepCount: count });
         case "debug":
         default:
             console.log(message.action);

chrome/content.js

@@ -1,9 +1,22 @@
 // Script which is executed on all web pages
 
-//document.body.style.background = "blue";
+// load recording status & react to updates
-document.body.style.border = "red 20px solid"; // just to identify if the extension is active on this tab
+let isRecording = false;
+chrome.storage.local.get("recording", (data) => {
+    isRecording = data.recording || false;
+});
 
+chrome.storage.onChanged.addListener((changes) => {
+    if (changes.recording) {
+        isRecording = changes.recording.newValue;
+    }
+    // signalize recording status
+    document.body.style.border = isRecording ? "red 20px solid" : "none";
+});
+
+// add recording functionality on click
 document.addEventListener('click', function(){
+    if(isRecording){
         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)
@@ -43,4 +56,5 @@ document.addEventListener('click', function(){
                 console.error("Error, while capturing the screenshot:", response.error);
             }
         });
+    }
 });

chrome/manifest.json

@@ -1,9 +1,9 @@
 {
   "manifest_version": 3,
   "name": "Cl1ck Gu1de",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "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", "tabs"],
+  "permissions": ["scripting", "activeTab", "downloads", "tabs", "storage"],
   "host_permissions": ["<all_urls>"],
   "background": {
     "service_worker": "background.js"

chrome/popup.js

@@ -1,11 +1,22 @@
 // Script for Popup
 
+// load recording status
+let isRecording = false;
+chrome.storage.local.get("recording", (data) => {
+    isRecording = data.recording || false;
+    console.log(data);
+    updateRecordingLabel(isRecording);
+});
+
+// define buttons
 const toggleRecordingBtn = document.getElementById("toggleRecording");
 const exportBtn = document.getElementById("exportBtn");
 
 toggleRecordingBtn.addEventListener('click', () => {
-    console.log("Button clicked");
+    //if(isRecording) chrome.runtime.sendMessage({action: "clearGuide"});
-    chrome.runtime.sendMessage({action: 'triggerName'});
+    isRecording = !isRecording; // toggle status
+    updateRecordingLabel(isRecording); // update label
+    chrome.storage.local.set({ recording: isRecording }); // save status
 });
 
 exportBtn.addEventListener('click', () => {
@@ -18,6 +29,24 @@ exportBtn.addEventListener('click', () => {
     });
 });
 
+// update button label
+function updateRecordingLabel(bool){
+    let startLabel = "Start recording";
+    
+    try{
+        chrome.runtime.sendMessage({
+            action: "guideLenght"
+        }, (response) => {
+            if(response.stepCount !== 0) startLabel = "Resume";
+            toggleRecordingBtn.textContent = bool ? "Pause/Stop" : startLabel;
+        });
+    }
+    catch(error){
+        console.error(`Error while updating recording button label: ${error}`);
+    }
+}
+
+// export guide as json
 function exportJSON(object, filename){
     const json = JSON.stringify(object, null, 2);
 
@@ -30,4 +59,7 @@ function exportJSON(object, filename){
     link.click();
 
     URL.revokeObjectURL(url);
+
+    // clear guide
+    chrome.runtime.sendMessage({action: "clearGuide"});
 }