update

Author: HoangTran0410

scripts/backup/ext/fb-group-ext/popup/index.html

@@ -22,9 +22,13 @@ <h3>Chọn hành động</h3>
         <span class="checkmark"></span>
     </label>
 
-    <div class="slidecontainer">
-        <h3>Thời gian chờ: <span id="wait-time"></span></h3>
-        <input type="range" min="1000" max="20000" value="1000" step="100" class="slider" id="slider-wait-time">
+    <div class="input-container">
+        <h3>Thời gian chờ (giây):</h3>
+        <span><i>(ngẫu nhiên trong khoảng)</i></span><br />
+        <div class="input-row">
+            <input type="number" min="0" value="5" id="inputWaitMin" /> ➡️ <input type="number" min="0" value="20"
+                id="inputWaitMax" />
+        </div>
     </div>
 
     <h3>Duyệt tối đa bao nhiêu bài?</h3>

scripts/backup/ext/fb-group-ext/popup/main.js

@@ -1,21 +1,27 @@
-const sliderWaitTime = document.getElementById("slider-wait-time");
-const spanWaitTime = document.getElementById("wait-time");
+const waitMinInp = document.getElementById("inputWaitMin");
+const waitMaxInp = document.getElementById("inputWaitMax");
 const inputMaxPosts = document.getElementById("max-posts");
 const radioAction = document.getElementsByName("action");
 const startBtn = document.getElementById("start-btn");
 
-sliderWaitTime.value = localStorage.getItem("wait-time") || 3000;
-spanWaitTime.innerHTML = renderTime(sliderWaitTime.value);
-sliderWaitTime.oninput = function () {
-  spanWaitTime.innerHTML = renderTime(this.value);
-  localStorage.setItem("wait-time", this.value);
-};
+function initCacheInput(input, cacheName) {
+  if (localStorage.getItem(cacheName)) {
+    input.value = localStorage.getItem(cacheName);
+  }
+  input.addEventListener("input", () => {
+    localStorage.setItem(cacheName, input.value);
+  });
+}
 
-function renderTime(time) {
-  return (time / 1000).toFixed(1) + "s";
+function renderTime(time, fixed = 1) {
+  return (time / 1000).toFixed(fixed) + "s";
 }
 
 async function main() {
+  initCacheInput(waitMinInp, "wait-min");
+  initCacheInput(waitMaxInp, "wait-max");
+  initCacheInput(inputMaxPosts, "max-posts");
+
   const tab = await getCurrentTab();
 
   if (!tab.url.includes("groups") || !tab.url.includes("spam")) {
@@ -26,44 +32,70 @@ async function main() {
   }
 
   startBtn.addEventListener("click", async () => {
+    const state = await getCurrentState(tab);
+    if (state?.running) {
+      return stop(tab);
+    }
+
     let action = radioAction[0].checked ? 1 : 2;
-    let max = parseInt(inputMaxPosts.value);
-    let wait = parseInt(sliderWaitTime.value);
+    let maxPosts = parseInt(inputMaxPosts.value);
+    let waitMin = parseInt(waitMinInp.value) * 1000;
+    let waitMax = parseInt(waitMaxInp.value) * 1000;
+
+    if (waitMin > waitMax) {
+      return alert(
+        "Thời gian chờ không hợp lệ\nBên trái phải bé hơn hoặc bằng bên phải"
+      );
+    }
+
     runScriptInTab({
       target: { tabId: tab.id },
       func: start,
-      args: [action, max, wait],
+      args: [action, maxPosts, waitMin, waitMax],
     });
   });
 
   // check is running
   (async function checkIsRunning() {
-    const isRunning = await runScriptInTab({
-      target: { tabId: tab.id },
-      func: () => window.fb_group_ext_running,
-    });
-    if (isRunning) {
-      // disable button
-      startBtn.disabled = true;
-      startBtn.innerHTML = "Đang xử lý...";
-      startBtn.classList.add("disabled");
+    const state = await getCurrentState(tab);
+    const { running, nextExecuteTime } = state || {};
+    if (running) {
+      startBtn.innerHTML =
+        "Đang xử lý... (chờ " +
+        renderTime(nextExecuteTime - Date.now(), 0) +
+        ")<br/>(<i>Bấm để dừng</i>)";
+      startBtn.classList.add("running");
     } else {
-      // enable button
-      startBtn.disabled = false;
       startBtn.innerHTML = "Bắt đầu";
-      startBtn.classList.remove("disabled");
+      startBtn.classList.remove("running");
     }
-    setTimeout(checkIsRunning, 500);
+    setTimeout(checkIsRunning, 1000);
   })();
 }
 
-function start(action, max, wait) {
+function getCurrentState(tab) {
+  return runScriptInTab({
+    target: { tabId: tab.id },
+    func: () => window.fb_group_ext,
+  });
+}
+
+function stop(tab) {
+  runScriptInTab({
+    target: { tabId: tab.id },
+    func: () => {
+      window.fb_group_ext.stop = true;
+    },
+  });
+}
+
+function start(action, maxPosts, waitMin, waitMax) {
   const selector =
     action == 1
       ? '[role="main"] [aria-label="Đăng"]'
       : '[role="main"] [aria-label="Từ chối"]';
 
-  if (max == 0) max = Infinity;
+  if (maxPosts == 0) maxPosts = Infinity;
 
   const btns = Array.from(document.querySelectorAll(selector));
 
@@ -80,14 +112,14 @@ function start(action, max, wait) {
   });
 
   async function main() {
-    window.fb_group_ext_running = true;
-
-    // for test
-    // setTimeout(() => (window.fb_group_ext_running = false), 5000);
-    // return;
+    window.fb_group_ext = {
+      running: true,
+      nextExecuteTime: 0,
+      stop: false,
+    };
 
     let counter = 0;
-    while (counter < max) {
+    while (counter < maxPosts && !window.fb_group_ext.stop) {
       if (btns.length > 0) {
         const btn = btns.shift();
 
@@ -96,18 +128,34 @@ function start(action, max, wait) {
         btn.click();
 
         counter++;
+        const waitTime = ranInt(waitMin, waitMax);
+        window.fb_group_ext.nextExecuteTime = Date.now() + waitTime;
+        await sleep(waitTime, () => window.fb_group_ext.stop);
+      } else {
+        // wait for load more
+        await sleep(1000);
       }
-
-      if (wait) await sleep(wait);
     }
-    window.fb_group_ext_running = false;
+
+    window.fb_group_ext.running = false;
     alert("Duyệt xong " + counter + " bài");
   }
 
   main();
 
-  function sleep(time) {
-    return new Promise((resolve) => setTimeout(resolve, time));
+  function ranInt(min, max) {
+    return Math.floor(Math.random() * (max - min) + min);
+  }
+
+  function sleep(time, cancelFn) {
+    return new Promise((resolve) => {
+      setTimeout(resolve, time);
+      if (cancelFn) {
+        setInterval(() => {
+          if (cancelFn()) resolve();
+        }, 100);
+      }
+    });
   }
 
   function onElementsAdded(selector, callback, once) {

scripts/backup/ext/fb-group-ext/popup/style.css

@@ -79,41 +79,6 @@ h3 {
 
 /* ======================= Range ====================== */
 
-.slidecontainer {
-    width: 100%;
-}
-
-.slider {
-    -webkit-appearance: none;
-    width: 100%;
-    height: 25px;
-    background: #d3d3d3;
-    outline: none;
-    opacity: 0.7;
-    -webkit-transition: .2s;
-    transition: opacity .2s;
-}
-
-.slider:hover {
-    opacity: 1;
-}
-
-.slider::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 25px;
-    height: 25px;
-    background: #04AA6D;
-    cursor: pointer;
-}
-
-.slider::-moz-range-thumb {
-    width: 25px;
-    height: 25px;
-    background: #04AA6D;
-    cursor: pointer;
-}
-
 input[type=number] {
     padding: 5px;
     font-size: large;
@@ -133,7 +98,19 @@ input[type=number] {
     margin-top: 30px;
 }
 
-.button.disabled {
+.button.running {
     background-color: rgb(151, 12, 12);
-    cursor: not-allowed;
+    /* cursor: not-allowed; */
+}
+
+.input-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+    white-space: pre;
+}
+
+.input-row input[type=number] {
+    /* max-width: 80px; */
 }