Added timer feature to user agent option

src/manifest.json

@@ -3,7 +3,7 @@
   "name": "Vytal",
   "description": "Vytal",
   "options_page": "options.html",
-  "permissions": ["storage", "debugger", "activeTab"],
+  "permissions": ["storage", "debugger", "activeTab", "alarms"],
   "background": { "service_worker": "background.bundle.js" },
   "action": {
     "default_popup": "popup.html",

src/pages/Background/index.js

@@ -1,3 +1,5 @@
+import userAgents from '../../utils/userAgents'
+
 const attachTab = (tabId) => {
   chrome.storage.sync.get(
     [
@@ -102,52 +104,17 @@ chrome.tabs.onUpdated.addListener((tabId, change, tab) => {
   })
 })
 
-// const attachTabs = (ipData) => {
-//   chrome.debugger.getTargets((tabs) => {
-//     console.log(tabs);
-//     for (const tab in tabs) {
-//       if (!tabs[tab].attached && tabs[tab].tabId) {
-//           console.log('------------');
-//           attachTab(tabs[tab].tabId, ipData);
-//       }
-//     }
-//   });
-// };
-
-// fetch('http://ip-api.com/json/')
-// .then((response) => response.json())
-// .then((ipData) => {});
-
-// Detects if there are posts for current url
-// chrome.tabs.onCreated.addListener((tab) => {
-//   console.log(tab.id)
-//   attachTab(tab.id);
-// });
-
-// chrome.tabs.onUpdated.addListener((tabId, change, tab) => {
-//   console.log(tabId)
-// });
-
-// chrome.tabs.onUpdated.addListener((tabId, change, tab) => {
-//   chrome.debugger.attach({ tabId: tabId }, "1.3", function () {
-//     if (!chrome.runtime.lastError) {
-//       // console.log("attached debugger to tab: " + tabId);
-//       // // https://chromedevtools.github.io/devtools-protocol/tot/ - "geolocation"
-
-//       chrome.debugger.sendCommand(
-//         { tabId: tabId },
-//         "Emulation.setTimezoneOverride",
-//         { timezoneId: "Asia/Shanghai" }
-//       );
-//     }
-//   });
-// });
-
-// chrome.debugger.sendCommand(
-//   { tabId: tabId },
-//   "Emulation.setAutomationOverride",
-//   {
-//     enabled:
-//       true,
-//   },
-// );
+chrome.alarms.onAlarm.addListener((alarm) => {
+  if (alarm.name === 'userAgentAlarm') {
+    chrome.storage.sync.get(['randomUA'], (result) => {
+      if (result.randomUA) {
+        console.log('userAgentAlarm')
+        const randomUserAgent =
+          userAgents[Math.floor(Math.random() * userAgents.length)]
+        chrome.storage.sync.set({
+          userAgent: randomUserAgent,
+        })
+      }
+    })
+  }
+})

src/pages/Popup/DebugSettings.js

@@ -45,7 +45,7 @@ const DebugSettings = ({ type, title, ip, profile, setProfile }) => {
         value={value}
         onChange={changeTextValue}
         style={{
-          width: '168px',
+          width: '200px',
         }}
       />
       <label>{title}</label>

src/pages/Popup/Popup.jsx

@@ -58,7 +58,7 @@ const Popup = () => {
             value={profile}
             onChange={changeProfile}
             style={{
-              width: '176px',
+              width: '208px',
             }}
           >
             <option value="none">None</option>
@@ -134,8 +134,8 @@ const Popup = () => {
             fontSize: '10px',
           }}
         >
-          Tabs need to be initialized for full protection.
-          {/* <a href="/">Read more</a> */}
+          Tabs need to be initialized for full protection.{' '}
+          <a href="/">Read more</a>
         </div>
       </div>
     </div>

src/pages/Popup/UserAgentSettings.js

@@ -32,11 +32,20 @@ const UserAgentSettings = () => {
     })
     e.target.checked ? setUserAgent(randomUserAgent) : setUserAgent('')
     setRandomUA(e.target.checked)
+
+    chrome.alarms.create('userAgentAlarm', {
+      delayInMinutes: parseInt(interval),
+      periodInMinutes: parseInt(interval),
+    })
   }
 
   const changeInterval = (e) => {
     chrome.storage.sync.set({ interval: e.target.value })
     setInterval(e.target.value)
+    chrome.alarms.create('userAgentAlarm', {
+      delayInMinutes: parseInt(e.target.value),
+      periodInMinutes: parseInt(e.target.value),
+    })
   }
 
   return (
@@ -53,7 +62,7 @@ const UserAgentSettings = () => {
           value={userAgent}
           onChange={changeUserAgent}
           style={{
-            width: '168px',
+            width: '200px',
           }}
         />
         <label>User Agent</label>

src/pages/Popup/index.css

@@ -13,8 +13,7 @@ body {
   background-color: var(--background);
   font-size: 13px;
   line-height: 22px;
-  width: 270px;
-  height: 300px;
+  width: 305px;
   margin: 0;
   font-family: 'Segoe UI', Tahoma, sans-serif;
 }