fix cookie API url, implement continuous sync

extension/background.js

@@ -47,7 +47,7 @@ async function sendData(path, payload, method) {
   let access = await getAccess();
   const url = `${access.url}:${access.port}/${path}`;
   console.log(`${method}: ${url}`);
-  console.log(`${method}: ${JSON.stringify(payload)}`);
+  if (!path.endsWith('cookie/')) console.log(`${method}: ${JSON.stringify(payload)}`);
 
   try {
     const rawResponse = await fetch(url, {
@@ -238,6 +238,35 @@ async function sendCookies() {
   return response;
 }
 
+let listenerEnabled = false;
+let isThrottled = false;
+
+async function handleContinuousCookie(checked) {
+  if (checked === true) {
+    browserType.cookies.onChanged.addListener(onCookieChange);
+    listenerEnabled = true;
+    console.log('Cookie listener enabled');
+  } else {
+    browserType.cookies.onChanged.removeListener(onCookieChange);
+    listenerEnabled = false;
+    console.log('Cookie listener disabled');
+  }
+}
+
+function onCookieChange(changeInfo) {
+  if (!isThrottled) {
+    isThrottled = true;
+
+    console.log('Cookie event detected:', changeInfo);
+
+    sendCookies();
+
+    setTimeout(() => {
+      isThrottled = false;
+    }, 10000);
+  }
+}
+
 /*
 process and return message if needed
 the following messages are supported:
@@ -245,6 +274,7 @@ type Message =
   | { type: 'verify' }
   | { type: 'cookieState' }
   | { type: 'sendCookie' }
+  | { type: 'continuousSync', checked: boolean }
   | { type: 'download', url: string }
   | { type: 'subscribe', url: string }
   | { type: 'unsubscribe', url: string }
@@ -268,6 +298,9 @@ function handleMessage(request, sender, sendResponse) {
       case 'sendCookie': {
         return await sendCookies();
       }
+      case 'continuousSync': {
+        return await handleContinuousCookie(request.checked);
+      }
       case 'download': {
         return await download(request.url);
       }
@@ -305,3 +338,9 @@ function handleMessage(request, sender, sendResponse) {
 }
 
 browserType.runtime.onMessage.addListener(handleMessage);
+
+browserType.runtime.onInstalled.addListener(() => {
+  browserType.storage.local.get('continuousSync', data => {
+    handleContinuousCookie(data?.continuousSync.checked);
+  });
+});

extension/index.html

@@ -28,12 +28,19 @@
         </div>
         <div id="error-out"></div>
         <hr>
-        <p>Options:</p>
+        <p>Cookies:</p>
         <div class="options">
             <div>
-                <input type="checkbox" id="sendCookies" name="sendCookies">
-                <span>Sync YouTube cookies</span><span id="sendCookiesStatus"></span>
+                <p>TA cookies: <span id="sendCookiesStatus" /></p>
             </div>
+            <div>
+                <input type="checkbox" id="continuous-sync" name="continuous-sync">
+                <span>Continuous Cookie Sync</span>
+            </div>
+            <button id="sendCookies">Copy Now</button>
+        </div>
+        <p>Download:</p>
+        <div class="options">
             <div>
                 <input type="checkbox" id="autostart" name="autostart">
                 <span>Autostart Downloads</span>

extension/popup.js

@@ -78,6 +78,11 @@ document.getElementById('sendCookies').addEventListener('click', function () {
   sendCookie();
 });
 
+// continuous sync
+document.getElementById('continuous-sync').addEventListener('click', function () {
+  toggleContinuousSync();
+});
+
 // autostart
 document.getElementById('autostart').addEventListener('click', function () {
   toggleAutostart();
@@ -103,8 +108,8 @@ function sendCookie() {
 
   function handleResponse(message) {
     console.log('handle cookie response: ' + JSON.stringify(message));
-    let cookie_validated = message.cookie_validated;
-    document.getElementById('sendCookiesStatus').innerText = 'validated: ' + cookie_validated;
+    let validattionMessage = `enabled, last verified ${message.validated_str}`;
+    document.getElementById('sendCookiesStatus').innerText = validattionMessage;
   }
 
   function handleError(error) {
@@ -112,20 +117,21 @@ function sendCookie() {
     setError(error);
   }
 
-  let checked = document.getElementById('sendCookies').checked;
+  let sending = sendMessage({ type: 'sendCookie' });
+  sending.then(handleResponse, handleError);
+}
+
+function toggleContinuousSync() {
+  const checked = document.getElementById('continuous-sync').checked;
   let toStore = {
-    sendCookies: {
+    continuousSync: {
       checked: checked,
     },
   };
   browserType.storage.local.set(toStore, function () {
     console.log('stored option: ' + JSON.stringify(toStore));
   });
-  if (checked === false) {
-    return;
-  }
-  let sending = sendMessage({ type: 'sendCookie' });
-  sending.then(handleResponse, handleError);
+  sendMessage({ type: 'continuousSync', checked });
 }
 
 function toggleAutostart() {
@@ -170,9 +176,11 @@ function setCookieState() {
   clearError();
   function handleResponse(message) {
     console.log(message);
-    document.getElementById('sendCookies').checked = message.cookie_enabled;
-    if (message.validated_str) {
-      document.getElementById('sendCookiesStatus').innerText = message.validated_str;
+    if (!message.cookie_enabled) {
+      document.getElementById('sendCookiesStatus').innerText = 'disabled';
+    } else {
+      let validattionMessage = `enabled, last verified ${message.validated_str}`;
+      document.getElementById('sendCookiesStatus').innerText = validattionMessage;
     }
   }
 
@@ -224,13 +232,13 @@ document.addEventListener('DOMContentLoaded', async () => {
     addUrl(item.access);
   }
 
-  function setCookiesOptions(result) {
-    if (!result.sendCookies || result.sendCookies.checked === false) {
-      console.log('sync cookies not set');
+  function setContinuousCookiesOptions(result) {
+    if (!result.continuousSync || result.continuousSync.checked === false) {
+      console.log('continuous cookie sync not set');
       return;
     }
     console.log('set options: ' + JSON.stringify(result));
-    setCookieState();
+    document.getElementById('continuous-sync').checked = true;
   }
 
   function setAutostartOption(result) {
@@ -247,11 +255,13 @@ document.addEventListener('DOMContentLoaded', async () => {
     onGot(result);
   });
 
-  browserType.storage.local.get('sendCookies', function (result) {
-    setCookiesOptions(result);
+  browserType.storage.local.get('continuousSync', function (result) {
+    setContinuousCookiesOptions(result);
   });
 
   browserType.storage.local.get('autostart', function (result) {
     setAutostartOption(result);
   });
+
+  setCookieState();
 });

extension/style.css

@@ -18,6 +18,20 @@ hr {
     background-color: white;
     margin: 10px 0;
 }
+button {
+    margin: 10px;
+    border-radius: 0;
+    padding: 5px 13px;
+    border: none;
+    cursor: pointer;
+    background-color: #259485;
+    color: #ffffff;
+}
+button:hover {
+    background-color: #97d4c8;
+    transform: scale(1.05);
+    color: #00202f;
+}
 #download {
     text-align: center
 }
@@ -48,20 +62,6 @@ hr {
     align-items: center;
     justify-content: center;
 }
-.submit button {
-    margin: 10px;
-    border-radius: 0;
-    padding: 5px 13px;
-    border: none;
-    cursor: pointer;
-    background-color: #259485;
-    color: #ffffff;
-}
-.submit button:hover {
-    background-color: #97d4c8;
-    transform: scale(1.05);
-    color: #00202f;
-}
 .options {
     display: block;
     padding-bottom: 10px;