refresh issue resolved

content.js

@@ -9,10 +9,37 @@ const origin = "http://localhost:3039"
 var userDetails = {};
 var btn = {};
 var tutorShotOid = null;
+var containerDiv;
+var sr;
 !(async function () {
 
     if (window.origin == origin) login()
 
+    containerDiv = document.createElement('div')
+    containerDiv.style.position = "fixed"
+    containerDiv.style.display = "block"
+    containerDiv.style.background = "transparent"
+    containerDiv.style.width = "0px"
+    containerDiv.style.height = "0px"
+    containerDiv.style.zIndex = "9999"
+    document.body.append(containerDiv)
+
+    const observer = new MutationObserver(async function (mutationsList, observer) {
+        for (let mutation of mutationsList) {
+            if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
+                if ([...mutation.removedNodes].includes(containerDiv)) {
+                    console.log('The target node has been removed from the DOM.');
+                    let data = await getCaptureData()
+                    reRenderFloatingBar(data)
+                }
+            }
+        }
+    });
+    observer.observe(document.body, { childList: true })
+
+
+    sr = containerDiv.attachShadow({ mode: 'open' });
+
     let styleTag = document.createElement('style')
     styleTag.setAttribute('tutor-shot-style', '')
     styleString = /*css*/`
@@ -47,6 +74,7 @@ var tutorShotOid = null;
         align-items: center;
         font-family: Arial, Helvetica, sans-serif;
         transition: 0.3s;
+        pointer-events: auto;
     }
 
     .tutor-shot.tutor-shot-right {
@@ -128,12 +156,11 @@ var tutorShotOid = null;
     }
 
     `
-    styleTag.innerHTML = styleString
-    document.body.append(styleTag)
+    styleTag.append(styleString)
+    sr.append(styleTag)
 
     floatingBar = document.createElement('div')
     floatingBar.setAttribute('class', `tutor-shot tutor-shot-right`)
-    document.body.append(floatingBar)
     let innerHTML = /*html*/`
 
 <div class="counter-count" tutor-shot="counter" style="display:none;"></div>
@@ -169,6 +196,8 @@ var tutorShotOid = null;
 
     `
     floatingBar.innerHTML = innerHTML
+    floatingBar.style.pointerEvents = 'auto'
+    sr.append(floatingBar)
 
     floatingBar.addEventListener('mouseenter', (e) => {
         floatingBar.style.width = ''
@@ -180,6 +209,7 @@ var tutorShotOid = null;
 
     document.addEventListener("visibilitychange", async function () {
         if (document.visibilityState === 'visible') {
+            if (window.origin == origin) login()
             let data = await getCaptureData()
             reRenderFloatingBar(data)
         }
@@ -210,44 +240,44 @@ async function getCaptureData() {
 function reRenderFloatingBar(data) {
     if (data) {
         if (data.status == 'stopped') {
-            floatingBar.remove()
+            containerDiv.remove()
             return
         }
         else if (!document.body.contains(floatingBar)) {
-            document.body.append(floatingBar)
+            document.body.append(containerDiv)
         }
     }
     if (!btn.play) {
-        btn.play = document.querySelector('[tutor-shot="play-btn"]')
+        btn.play = sr.querySelector('[tutor-shot="play-btn"]')
         btn.play.addEventListener('click', resumeRecording)
     }
-    if (!btn.mainLogo){
-        btn.mainLogo = document.querySelector('[tutor-shot="main-logo"]')
+    if (!btn.mainLogo) {
+        btn.mainLogo = sr.querySelector('[tutor-shot="main-logo"]')
     }
-    if (!btn.generatingVideo){
-        btn.generatingVideo = document.querySelector('[tutor-shot="generating-video"]')
+    if (!btn.generatingVideo) {
+        btn.generatingVideo = sr.querySelector('[tutor-shot="generating-video"]')
     }
     if (!btn.capture) {
-        btn.capture = document.querySelector('[tutor-shot="capture-btn"]')
+        btn.capture = sr.querySelector('[tutor-shot="capture-btn"]')
     }
-    if (!btn.playText) btn.playText = document.querySelector('[tutor-shot="play-text"]')
+    if (!btn.playText) btn.playText = sr.querySelector('[tutor-shot="play-text"]')
     if (!btn.pause) {
-        btn.pause = document.querySelector('[tutor-shot="pause-btn"]')
+        btn.pause = sr.querySelector('[tutor-shot="pause-btn"]')
         btn.pause.addEventListener('click', pauseRecording)
     }
     if (!btn.stop) {
-        btn.stop = document.querySelector('[tutor-shot="stop-btn"]')
+        btn.stop = sr.querySelector('[tutor-shot="stop-btn"]')
         btn.stop.addEventListener('click', stopRecording)
     }
     if (!btn.restart) {
-        btn.restart = document.querySelector('[tutor-shot="restart-btn"]')
+        btn.restart = sr.querySelector('[tutor-shot="restart-btn"]')
         btn.restart.addEventListener('click', restartRecording)
     }
     if (!btn.switch) {
-        btn.switch = document.querySelector('[tutor-shot="switch-btn"]')
+        btn.switch = sr.querySelector('[tutor-shot="switch-btn"]')
         btn.switch.addEventListener('click', changeBarPosition)
     }
-    if (!btn.counter) btn.counter = document.querySelector('[tutor-shot="counter"]')
+    if (!btn.counter) btn.counter = sr.querySelector('[tutor-shot="counter"]')
 
     if (data?.hasOwnProperty('imageNumber')) {
         btn.counter.innerHTML = `${data.imageNumber}`
@@ -271,7 +301,7 @@ function reRenderFloatingBar(data) {
         btn.mainLogo.style.display = 'block'
         // btn.capture.style.display = 'flex'
     }
-    else if ( data?.status == 'generatingVideo' ){
+    else if (data?.status == 'generatingVideo') {
         btn.play.style.display = 'none'
         btn.pause.style.display = 'none'
         btn.stop.style.display = 'none'
@@ -301,7 +331,7 @@ const api = axios.create({
 window.addEventListener('mousedown', async function (e) {
 
     // to prevent the event when clicking inside the floating bar
-    if (floatingBar?.contains(e.target) || startingOverlay?.contains(e.target)) {
+    if (containerDiv?.contains(e.target) || startingOverlay?.contains(e.target)) {
         return
     }
     if (e.button === 0) { // only left click allowed
@@ -341,7 +371,7 @@ chrome.runtime.onMessage.addListener(async function (message, sender, sendRespon
                 let counter = 5
                 startingOverlay = document.createElement('div')
                 startingOverlay.setAttribute('class', 'tutor-shot-overlay')
-                document.body.append(startingOverlay)
+                sr.append(startingOverlay)
                 function changeText() {
                     if (counter <= 0) {
                         clearInterval(overlayInterval)

manifest.json

 {
     "manifest_version": 3,
-    "name": "Tutor Shot",
-    "version": "1.0",
+    "name": "Tutor Shot Local",
+    "version": "1.2",
     "description": "Capture web-page screenshots instantly with a single click. They're saved to your account at http://localhost:3039.",
     "permissions": [
         "activeTab",

popup.js

@@ -96,6 +96,7 @@
     }
     // this code should run everytime the popup is opened
     document.addEventListener("DOMContentLoaded", domLoadHandler);
+    console.log('pop-up loaded again')