user agent randomization

src/pages/Popup/Popup.jsx

@@ -40,6 +40,14 @@ const Popup = () => {
         <DebugSettings type="lon" title="Longitude" ip={ip} />
         <LocaleSettings ip={ip} />
         <UserAgentSettings ip={ip} type="lat" title="Latitude" />
+        <div
+          style={{
+            margin: '12px 0 0 0',
+            fontSize: '10px',
+          }}
+        >
+          Leave field blank to use real value.
+        </div>
       </div>
     </div>
   )

src/pages/Popup/UserAgentSettings.js

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react'
+import userAgents from '../../utils/userAgents'
 
 const UserAgentSettings = () => {
-  const [value, setUserAgent] = useState('')
+  const [userAgent, setUserAgent] = useState('')
 
   useEffect(() => {
     chrome.storage.sync.get(['userAgent'], (result) => {
@@ -16,27 +17,52 @@ const UserAgentSettings = () => {
     setUserAgent(e.target.value)
   }
 
+  const randomize = (e) => {
+    const randomUserAgent =
+      userAgents[Math.floor(Math.random() * userAgents.length)]
+    chrome.storage.sync.set({ [randomize]: randomUserAgent })
+    setUserAgent(randomUserAgent)
+  }
+
   return (
-    <div
+    <>
-      style={{
+      <div
-        display: 'flex',
+        style={{
-        justifyContent: 'space-between',
+          display: 'flex',
-        margin: '12px 0 0 0',
+          justifyContent: 'space-between',
-      }}
+          margin: '12px 0 0 0',
-    >
+        }}
+      >
+        <label>
+          <input
+            type="text"
+            value={userAgent}
+            onChange={changeTextValue}
+            style={{
+              width: '218px',
+              margin: '0 5px 0 0',
+            }}
+          />
+          User Agent
+        </label>
+      </div>
+      <label>
+        <input type="checkbox" checked={false} onChange={randomize} />
+        Randomize every
+      </label>
       <label>
         <input
           type="text"
-          value={value}
+          // value={value}
-          onChange={changeTextValue}
+          // onChange={changeTextValue}
           style={{
-            width: '218px',
+            width: '24px',
             margin: '0 5px 0 0',
           }}
         />
-        User Agent
+        minutes
       </label>
-    </div>
+    </>
   )
 }
 

src/utils/userAgents.js

@@ -0,0 +1,7 @@
+const userAgents = [
+  'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36',
+  'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36',
+  'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36',
+]
+
+export default userAgents