sending request from the background process to avoid CORS

background.js

 var getUserDetails = null
 
 !function () {
-
+    var origin = "http://localhost:3039"
     var tutorShotId = null
     var imageNumber = 0;
     var recording = false;
     var loggedIn = false;
     var userDetails = {}
 
-    console.log('background.js registered', chrome)
+    function sendReq(url=origin, method='GET', body={}, headers={}){
+        if (url.slice(0,4)!='http') url = origin += `/api${url[0]=='/'?'':'/'}${url}`
+        return new Promise( (res, rej)=>{
+            let bodyObj = { ...body }
+            let headerObj = {
+                'Content-Type': 'application/json',
+                ...headers
+            }
+            fetch( url,{
+                method: method,
+                body: JSON.stringify({ ...bodyObj }),
+                headers: headerObj,
+            } ).then( async (data)=>{
+                if ( headerObj['Content-Type']=='application/json' ){
+                    res( await data.json() )
+                }else{
+                    res(data)
+                }
+            } ).catch(err=>{
+                console.log('fetch err', err)
+                rej(err)
+            })
+        } )
+    }
 
     function onMessage(request, sender, sendResponse) {
 
@@ -120,7 +143,7 @@ var getUserDetails = null
             chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
                 if (tabs && tabs.length) { // if any tab is active
                     var activeTab = tabs[0]
-                    chrome.tabs.captureVisibleTab({ format: "png" }, function (dataUrl) {
+                    chrome.tabs.captureVisibleTab({ format: "png" }, async function (dataUrl) {
                         let message = {
                             ...userDetails,
                             tutorShotOid: tutorShotId,
@@ -131,6 +154,9 @@ var getUserDetails = null
                         }
                         // to send message to the content instance of the
                         chrome.tabs.sendMessage(activeTab.id, message);
+                        console.log('to take screenshot', message)
+                        let data = await sendReq('/tutor-shot/screen-shot', 'POST', message)
+                        console.log('sent to server', data)
                     })
                 }
             })

content.js

@@ -7,11 +7,10 @@ var startingOverlay = null;
 var overlayInterval = null;
 const origin = "http://localhost:3039"
 var userDetails = {};
-var btn = {}
+var btn = {};
+var tutorShotOid = null;
 !(async function () {
 
-    loadFont('tutor-shot-calibri', `${origin}/assets/fonts/calibri-regular.ttf`, 'truetype')
-
     if (window.origin == origin) login()
 
     let styleTag = document.createElement('style')
@@ -37,7 +36,7 @@ var btn = {}
         all: unset;
         position: fixed;
         bottom: 30px;
-        width: 50px;
+        /* width: 50px; */
         height: 50px;
         z-index: 100;
         background: #fff;
@@ -46,8 +45,7 @@ var btn = {}
         box-shadow: 0px 0px 20px #cccccc;
         display: flex;
         align-items: center;
-        /* font-family: 'tutor-shot-calibri'; */
-        font-family: 'sans serif';
+        font-family: Arial, Helvetica, sans-serif;
         transition: 0.3s;
     }
 
@@ -55,15 +53,14 @@ var btn = {}
         right: 30px;
         transition: 0.5s;
     }
-
     .tutor-shot.tutor-shot-left {
         left: 30px;
         transition: 0.5s;
     }
 
-    .tutor-shot:hover {
-        width: 420px;
-        cursor: pointer;
+    .tutor-shot.tutor-shot-left {
+        left: 30px;
+        transition: 0.5s;
     }
 
     .tutor-shot .counter-count {
@@ -99,7 +96,6 @@ var btn = {}
         display: flex;
         align-items: center;
         overflow: hidden;
-        width: 420px;
         margin-left: 5px;
         margin-right: 5px;
     }
@@ -109,6 +105,7 @@ var btn = {}
         display: flex;
         align-items: center;
         margin-right: 16px;
+        transition: 0.3s;
     }
   
     .tutor-shot .content .item .img {
@@ -132,7 +129,7 @@ var btn = {}
     document.body.append(floatingBar)
     let innerHTML = /*html*/`
 
-<div class="counter-count" tutor-shot="counter">1</div>
+<div class="counter-count" tutor-shot="counter" style="display:none;"></div>
 <div class="logo">
     <img class="logo-img" src="${origin}/assets/images/tutor-shot-48.png" width="40">
 </div>
@@ -157,7 +154,7 @@ var btn = {}
         <img class="img" src="${origin}/assets/icons/capture.svg" width="20">
         <span class="item-text">CAPTURE</span>
     </div>
-    <div class="item" tutor-shot="capture-btn">
+    <div class="item" tutor-shot="switch-btn">
         <img class="img" src="${origin}/assets/icons/left-arrow-to-left.svg" width="20">
     </div>
 </div>
@@ -165,6 +162,13 @@ var btn = {}
     `
     floatingBar.innerHTML = innerHTML
 
+    floatingBar.addEventListener('mouseenter', (e) => {
+        floatingBar.style.width = ''
+    })
+    floatingBar.addEventListener('mouseleave', (e) => {
+        floatingBar.style.width = '50px'
+    })
+
 
     document.addEventListener("visibilitychange", async function () {
         if (document.visibilityState === 'visible') {
@@ -192,6 +196,7 @@ async function login() {
 async function getCaptureData() {
     let statusData = await chrome.runtime.sendMessage({ action: "checkStatus" })
     userDetails = statusData.userDetails
+    tutorShotOid = statusData.tutorShotOid
     return statusData
 }
 
@@ -226,6 +231,10 @@ function reRenderFloatingBar(data) {
         btn.restart = document.querySelector('[tutor-shot="restart-btn"]')
         btn.restart.addEventListener('click', restartRecording)
     }
+    if (!btn.switch) {
+        btn.switch = document.querySelector('[tutor-shot="switch-btn"]')
+        btn.switch.addEventListener('click', changeBarPosition)
+    }
     if (!btn.counter) btn.counter = document.querySelector('[tutor-shot="counter"]')
 
     if (data?.hasOwnProperty('imageNumber')) {
@@ -296,13 +305,17 @@ window.addEventListener('mousedown', async function (e) {
 // content.js
 chrome.runtime.onMessage.addListener(async function (message, sender, sendResponse) {
 
-
+    console.log('message received', message)
     if (message.action == 'tabChanged') {
         // console.log('tabChanged', message)
     }
     if (message.status) {
         console.log('got message status', message)
     }
+    if (message.action == 'SSCaptured') {
+        console.log('to capture SS')
+        // let data = await api.post("/tutor-shot/screen-shot", message)
+    }
     let data = await getCaptureData()
     reRenderFloatingBar(data)
     if (message.message == 'recordingStarted') {
@@ -343,7 +356,6 @@ chrome.runtime.onMessage.addListener(async function (message, sender, sendRespon
 
 
 async function startRecording() {
-    console.log('startRecording')
     try {
         await getCaptureData();
         let { data } = await api.post('/tutor-shot', { title: "Some random title" }, { headers: { userId: userDetails.uid } })
@@ -364,36 +376,32 @@ async function resumeRecording() {
 }
 
 async function stopRecording() {
-    await chrome.runtime.sendMessage({ action: "stopRecording" })
+    try {
+        await api.post('/tutor-shot/finalize', { _id: tutorShotOid }, { headers: { userid: userDetails.uid } })
+        await chrome.runtime.sendMessage({ action: "stopRecording" })
+    } catch (err) {
+        console.log(err)
+    }
 }
 
 async function restartRecording() {
-    await chrome.runtime.sendMessage({ action: "restartRecording" })
-    try{
-        let captureData = await getCaptureData()
-        await api.delete('/tutor-shot/segments', { params: {tutorShotOid: captureData.tutorShotOid} })
-    }catch(err){
+    try {
+        await api.delete('/tutor-shot/segments', { params: { tutorShotOid: tutorShotOid } })
+        await chrome.runtime.sendMessage({ action: "restartRecording" })
+    } catch (err) {
         console.log(err)
     }
 }
 
-async function checkFont(fontName) {  // Use FontFace API to check if the font is available
-    try {
-        await document.fonts.load('1em ' + fontName); // Attempt to load the font
-        return true; // Font successfully loaded
-    } catch (error) {
-        return false; // Font couldn't be loaded
+function changeBarPosition() {
+    let sidebarPosition = floatingBar.classList.contains('tutor-shot-right')
+    if (sidebarPosition) {
+        floatingBar.classList.add('tutor-shot-left')
+        floatingBar.classList.remove('tutor-shot-right')
+        btn.switch.style.transform = "rotate(180deg)"
+    } else {
+        btn.switch.style.transform = ""
+        floatingBar.classList.remove('tutor-shot-left')
+        floatingBar.classList.add('tutor-shot-right')
     }
 }
-
-async function loadFont(name, url, type='true'){
-
-    return new Promise( (res, rej)=>{
-        // this is load custom font
-        let customFont = new FontFace(name, `url(${url})  format("${type}")`)
-        customFont.load().then(function (font) {
-            document.fonts.add(font);
-            res(true)
-        })
-    } )
-}
\ No newline at end of file