Added platform input to user agent spoofing

src/Popup/Pages/UserAgentPage/index.tsx

@@ -3,6 +3,7 @@ import { Box, Label, Radio, Flex, Select } from 'theme-ui'
 import DebouncedInput from '../../Components/DebouncedInput'
 import userAgents from '../../../utils/userAgents'
 import detachDebugger from '../../../utils/detachDebugger'
+import attachCurrentTab from '../../../utils/attachCurrentTab'
 import Page from '../../Components/Page'
 import CheckBox from '../../Components/CheckBox'
 import FooterLink from '../../Components/FooterLink'
@@ -16,15 +17,17 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
   const [operatingSystem, setOperatingSystem] = useState('Windows')
   const [browser, setBrowser] = useState('Chrome')
   const [userAgent, setUserAgent] = useState(navigator.userAgent)
+  const [platform, setPlatform] = useState(navigator.platform)
 
   useEffect(() => {
     chrome.storage.local.get(
-      ['userAgentType', 'operatingSystem', 'browser', 'userAgent'],
+      ['userAgentType', 'operatingSystem', 'browser', 'userAgent', 'platform'],
       (storage) => {
         storage.userAgentType && setUserAgentType(storage.userAgentType)
         storage.operatingSystem && setOperatingSystem(storage.operatingSystem)
         storage.browser && setBrowser(storage.browser)
         storage.userAgent && setUserAgent(storage.userAgent)
+        storage.platform && setPlatform(storage.platform)
       }
     )
   }, [])
@@ -36,38 +39,45 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
 
     if (e.target.value === 'default') {
       setUserAgent(navigator.userAgent)
+      setPlatform(navigator.platform)
       chrome.storage.local.set({
         userAgent: '',
+        platform: '',
       })
     } else if (e.target.value === 'preloaded') {
-      setUserAgent(userAgents[operatingSystem][browser])
+      setUserAgent(userAgents[operatingSystem]['userAgents'][browser])
+      setPlatform(userAgents[operatingSystem]['platform'])
       chrome.storage.local.set({
-        userAgent: userAgents[operatingSystem][browser],
+        userAgent: userAgents[operatingSystem]['userAgents'][browser],
+        platform: userAgents[operatingSystem]['platform'],
       })
     }
   }
 
-  const changeOperatingSystem = (e: ChangeEvent<HTMLSelectElement>) => {
+  const changeOperatingSystem = async (e: ChangeEvent<HTMLSelectElement>) => {
     detachDebugger()
     setOperatingSystem(e.target.value)
-    setUserAgent(userAgents[e.target.value][browser])
+    setUserAgent(userAgents[e.target.value]['userAgents'][browser])
+    setPlatform(userAgents[e.target.value]['platform'])
     chrome.storage.local.set({
-      userAgent: userAgents[e.target.value][browser],
+      userAgent: userAgents[e.target.value]['userAgents'][browser],
+      platform: userAgents[e.target.value]['platform'],
       operatingSystem: e.target.value,
     })
+    await attachCurrentTab()
   }
 
   const changeBrowser = (e: ChangeEvent<HTMLSelectElement>) => {
     detachDebugger()
     setBrowser(e.target.value)
-    setUserAgent(userAgents[operatingSystem][e.target.value])
+    setUserAgent(userAgents[operatingSystem]['userAgents'][e.target.value])
     chrome.storage.local.set({
-      userAgent: userAgents[operatingSystem][e.target.value],
+      userAgent: userAgents[operatingSystem]['userAgents'][e.target.value],
       browser: e.target.value,
     })
   }
 
-  const changeUserAgent = () => {
+  const changeTextInput = () => {
     if (userAgentType !== 'custom') {
       setUserAgentType('custom')
       chrome.storage.local.set({
@@ -139,11 +149,13 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
               onChange={changeBrowser}
               mb={'8px'}
             >
-              {Object.keys(userAgents[operatingSystem]).map((key) => (
+              {Object.keys(userAgents[operatingSystem]['userAgents']).map(
+                (key) => (
                   <option value={key} key={key}>
                     {key}
                   </option>
-              ))}
+                )
+              )}
             </Select>
           </Box>
         </Flex>
@@ -153,15 +165,15 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
         title="User Agent"
         value={userAgent}
         setValue={setUserAgent}
-        onChange={changeUserAgent}
+        onChange={changeTextInput}
         mb="12px"
       />
       <DebouncedInput
         name="platform"
         title="Platform"
-        value={navigator.platform}
+        value={platform}
-        setValue={setUserAgent}
+        setValue={setPlatform}
-        onChange={changeUserAgent}
+        onChange={changeTextInput}
         mb="12px"
       />
       {userAgentType !== 'default' && (

src/utils/attachDebugger.ts

@@ -11,8 +11,10 @@ const attachDebugger = (tabId: number) => {
       'locale',
       'localeMatchIP',
       'userAgent',
+      'platform',
     ],
     (storage) => {
+      console.log(storage)
       if (
         storage.timezone ||
         storage.lat ||
@@ -77,15 +79,15 @@ const attachDebugger = (tabId: number) => {
               )
             }
 
-            if (storage.userAgent) {
+            if (storage.userAgent || storage.platform) {
               chrome.debugger.sendCommand(
                 { tabId: tabId },
                 'Emulation.setUserAgentOverride',
                 {
                   userAgent: storage.userAgent,
+                  platform: storage.platform,
                 }
                 // { acceptLanguage: "en-CA" },
-                // { platform: "WebTV OS" }
               )
             }
           }

src/utils/userAgents.ts

@@ -1,5 +1,7 @@
 const userAgents: any = {
   Windows: {
+    platform: 'Win32',
+    userAgents: {
       Chrome:
         'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36',
       Edge: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36 Edg/103.0.1264.62',
@@ -8,7 +10,10 @@ const userAgents: any = {
       Brave:
         'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Brave Chrome/83.0.4103.116 Safari/537.36',
     },
+  },
   Mac: {
+    platform: 'MacIntel',
+    userAgents: {
       Safari:
         'Mozilla/5.0 (Macintosh; Intel Mac OS X 12_4) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Safari/605.1.15',
       Chrome:
@@ -19,7 +24,11 @@ const userAgents: any = {
       Brave:
         'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Brave Chrome/83.0.4103.116 Safari/537.36',
     },
+  },
+
   Linux: {
+    platform: 'Linux x86_64',
+    userAgents: {
       Chrome:
         'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36',
       Edge: 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36 Edg/100.0.1185.44',
@@ -28,7 +37,10 @@ const userAgents: any = {
       Brave:
         'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Brave Chrome/80.0.3987.99 Safari/537.36',
     },
+  },
   Android: {
+    platform: 'Linux armv8l',
+    userAgents: {
       Samsung:
         'Mozilla/5.0 (Linux; Android 12; SAMSUNG SM-G991B) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/16.0 Chrome/92.0.4515.166 Mobile Safari/537.36',
       Chrome:
@@ -39,7 +51,10 @@ const userAgents: any = {
       Brave:
         'Mozilla/5.0 (Linux; Android 8.0.0; SM-G960F Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Mobile Safari/537.36',
     },
+  },
   iOS: {
+    platform: 'iPhone',
+    userAgents: {
       Safari:
         'Mozilla/5.0 (iPhone; CPU iPhone OS 15_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Mobile/15E148 Safari/604.1',
       Chrome:
@@ -50,6 +65,7 @@ const userAgents: any = {
       Brave:
         'Mozilla/5.0 (iPhone; CPU iPhone OS 10_0 like Mac OS X) AppleWebKit/602.1.38 (KHTML, like Gecko) Brave/1.2.9 Mobile/14A5297c Safari/602.1.38',
     },
+  },
 }
 
 export default userAgents