Removed geolocation permission

src/Popup/Components/FooterLink.tsx

@@ -1,14 +1,24 @@
-import { Link } from 'theme-ui'
+import { Box, Link } from 'theme-ui'
 
 const FooterLink = () => {
   return (
-    <Link
+    <Box
-      variant="footer"
+      sx={{
-      href={`https://go.nordvpn.net/aff_c?offer_id=15&aff_id=79520&url_id=902`}
+        color: 'text',
-      target="_blank"
+        mb: '8px',
+        fontSize: '11px',
+        position: 'fixed',
+        bottom: '0',
+      }}
     >
-      Vytal does not change your IP address. To change your IP you will need to
+      <Link
-      use a VPN such as{' '}
+        variant="footer"
+        href={`https://go.nordvpn.net/aff_c?offer_id=15&aff_id=79520&url_id=902`}
+        target="_blank"
+      >
+        Vytal does not change your IP address. To change your IP you will need a
+        VPN such as{' '}
+      </Link>
       <Link
         variant="hover"
         href={`https://go.nordvpn.net/aff_c?offer_id=15&aff_id=79520&url_id=902`}
@@ -24,7 +34,8 @@ const FooterLink = () => {
       >
         ProtonVPN
       </Link>
-    </Link>
+      .
+    </Box>
   )
 }
 

src/Popup/Pages/AutofillPage/handleAutofillAddress.ts

@@ -1,17 +0,0 @@
-const handleAutofillAddress = (value: boolean) => {
-  console.log(!value)
-  chrome.privacy.services.autofillAddressEnabled.clear({}, () => {
-    chrome.privacy.services.autofillAddressEnabled.set(
-      {
-        value: !value,
-      },
-      () => {
-        chrome.storage.local.set({
-          autofillAddress: value,
-        })
-      }
-    )
-  })
-}
-
-export default handleAutofillAddress

src/Popup/Pages/AutofillPage/index.tsx

@@ -1,147 +0,0 @@
-import { Text } from 'theme-ui'
-import { useState, useEffect, ChangeEvent } from 'react'
-import Page from '../../Components/Page'
-import CheckBox from '../../Components/CheckBox'
-// import { autofillData } from '../../../types'
-import Table from '../../Components/Table'
-import TableRow from '../../Components/TableRow'
-import { Button } from 'theme-ui'
-import addresses from '../../../utils/addresses'
-import FooterLink from '../../Components/FooterLink'
-import handleAutofillAddress from './handleAutofillAddress'
-
-interface AutofillPageProps {
-  tab: string
-  autofillData?: any
-  // reverseGeocoding: any
-}
-
-const AutofillPage = ({ tab, autofillData }: AutofillPageProps) => {
-  const [autofillAddress, setAutofillAddress] = useState(false)
-  const [country, setCountry] = useState('')
-  const [city, setCity] = useState('')
-  const [region, setRegion] = useState('')
-  const [postCode, setPostCode] = useState('')
-  const [address, setAddress] = useState('')
-  const [phone, setPhone] = useState('9057814565')
-  // const [configuration, setConfiguration] = useState('default')
-
-  useEffect(() => {
-    chrome.storage.local.get(['autofillAddress'], (storage) => {
-      storage.autofillAddress && setAutofillAddress(storage.autofillAddress)
-    })
-  }, [])
-
-  useEffect(() => {
-    // chrome.storage.local.get(['configuration', 'autofillData'], (storage) => {
-    //   storage.configuration && setConfiguration(storage.configuration)
-    //   if (storage.autofillData) {
-    //     setIP(storage.autofillData)
-    //   } else {
-    //     Promise.resolve(getIP()).then((autofillData) => setIP(autofillData))
-    //   }
-    // })
-    if (autofillData?.country) {
-      setCountry(autofillData.country)
-      // chrome.storage.local.set({
-      //   country: autofillData.country,
-      // })
-    }
-    if (autofillData?.locality) {
-      setCity(autofillData.locality)
-      // chrome.storage.local.set({
-      //   city: autofillData.city,
-      // })
-    }
-    if (autofillData?.administrative_area_level_1) {
-      setRegion(autofillData.administrative_area_level_1)
-      // chrome.storage.local.set({
-      //   region: autofillData.regionName,
-      // })
-    }
-    if (autofillData?.postal_code) {
-      setPostCode(autofillData.postal_code)
-      // chrome.storage.local.set({
-      //   postCode: autofillData.zip,
-      // })
-    }
-    if (autofillData?.street_number && autofillData?.route) {
-      setAddress(`${autofillData.street_number} ${autofillData.route}`)
-      // chrome.storage.local.set({
-      //   postCode: autofillData.zip,
-      // })
-    }
-    // autofillData?.city && setCity(autofillData.city)
-    // autofillData?.regionName && setRegion(autofillData.regionName)
-    // autofillData?.zip && setPostCode()
-    // chrome.storage.local.set({
-    //   country: autofillData.country,
-    //   city: autofillData.city,
-    //   regionName: autofillData.regionName,
-    //   zip: autofillData.zip,
-    // })
-  }, [autofillData, setCity, setPostCode, setRegion])
-
-  // useEffect(() => {
-  //   if (!postCode && reverseGeocoding?.postcode) {
-  //     setPostCode(reverseGeocoding?.postcode)
-  //     chrome.storage.local.set({
-  //       postCode: reverseGeocoding?.postcode,
-  //     })
-  //   }
-  //   if (reverseGeocoding?.house_number && reverseGeocoding?.road) {
-  //     setAddress(`${reverseGeocoding.house_number} ${reverseGeocoding.road}`)
-  //     chrome.storage.local.set({
-  //       address: `${reverseGeocoding.house_number} ${reverseGeocoding.road}`,
-  //     })
-  //   } else if (reverseGeocoding?.road) {
-  //     setAddress(reverseGeocoding.road)
-  //     chrome.storage.local.set({
-  //       address: reverseGeocoding.road,
-  //     })
-  //   }
-  // }, [postCode, reverseGeocoding, setAddress])
-
-  // const changeUserAgent = () => {
-  //   // if (userAgentType !== 'custom') {
-  //   //   setUserAgentType('custom')
-  //   //   chrome.storage.local.set({
-  //   //     userAgentType: 'custom',
-  //   //   })
-  //   // }
-  // }
-
-  const changeCheckBoxValue = (e: ChangeEvent<HTMLInputElement>) => {
-    console.log(e.target.checked)
-    handleAutofillAddress(e.target.checked)
-    setAutofillAddress(e.target.checked)
-  }
-
-  return (
-    <Page isCurrentTab={tab === 'autofill'} title={'Autofill'}>
-      <CheckBox
-        title={'Disable Built-In Address Autofill'}
-        onChange={changeCheckBoxValue}
-        checked={autofillAddress}
-      />
-      {/* <CheckBox title={'Automatically Autofill'} /> */}
-      <Table>
-        <TableRow title="Country" value={country} />
-        <TableRow title="Region" value={region} />
-        <TableRow title="City" value={city} />
-        <TableRow title="Postal Code" value={postCode} />
-        <TableRow title="Address" value={address} />
-        <TableRow title="Phone" value={phone} noBorder />
-      </Table>
-      <Button
-        variant="primary"
-        sx={{ borderRadius: '4px' }}
-        onClick={() => console.log('click')}
-      >
-        Autofill Current Page
-      </Button>
-    </Page>
-  )
-}
-
-export default AutofillPage

src/Popup/Pages/ConnectionPage/index.tsx

@@ -1,55 +0,0 @@
-import { ipData } from '../../../types'
-import FooterLink from '../../Components/FooterLink'
-import Page from '../../Components/Page'
-import Table from '../../Components/Table'
-import TableRow from '../../Components/TableRow'
-
-interface ConnectionPageProps {
-  tab: string
-  ipData?: ipData
-}
-
-const ConnectionPage = ({ tab, ipData }: ConnectionPageProps) => {
-  // let options: any
-
-  // function success(pos: any) {
-  //   var crd = pos.coords
-  //   console.log('Your connection position is:')
-  //   console.log(`Latitude : ${crd.latitude}`)
-  //   console.log(`Longitude: ${crd.longitude}`)
-  //   console.log(`More or less ${crd.accuracy} meters.`)
-  // }
-
-  // function error(err: any) {
-  //   console.error(`ERROR(${err.code}): ${err.message}`)
-  // }
-  // options = {
-  //   enableHighAccuracy: false,
-  //   timeout: 5000,
-  //   maximumAge: 0,
-  // }
-
-  // navigator.geolocation.watchPosition(success, error)
-
-  return (
-    <Page isCurrentTab={tab === 'connection'} title={'Connection Info'}>
-      <Table>
-        <TableRow title="IP Address" value={ipData?.query} />
-        <TableRow title="Country" value={ipData?.country} />
-        <TableRow title="Region" value={ipData?.regionName} />
-        <TableRow title="City" value={ipData?.city} />
-        <TableRow title="Latitude" value={`${ipData?.lat}`} />
-        <TableRow title="Longitude" value={`${ipData?.lon}`} />
-        <TableRow title="ISP" value={ipData?.isp} />
-        <TableRow title="Organization" value={ipData?.org} />
-        <TableRow
-          title="Proxy/VPN"
-          value={ipData?.proxy ? 'True' : 'False'}
-          noBorder
-        />
-      </Table>
-    </Page>
-  )
-}
-
-export default ConnectionPage

src/Popup/Pages/LocationPage/index.tsx

@@ -1,22 +1,21 @@
 import { useState, useEffect, ChangeEvent } from 'react'
-import { Flex, Label, Radio, Select } from 'theme-ui'
+import { Box, Flex, Label, Radio, Select } from 'theme-ui'
 import Page from '../../Components/Page'
 import DebouncedInput from '../../Components/DebouncedInput'
 import detachDebugger from '../../../utils/detachDebugger'
 import countryLocales from '../../../utils/countryLocales'
-import { ipData } from '../../../types'
 import configurations from '../../../utils/configurations'
 import FooterLink from '../../Components/FooterLink'
-import Table from '../../Components/Table'
+import { ipData } from '../../../types'
-import TableRow from '../../Components/TableRow'
+import getIp from '../../../utils/getIp'
+import { RotateCw } from 'react-feather'
 
 interface LocationPageProps {
   tab: string
-  ipData?: ipData
-  geolocation?: GeolocationCoordinates
 }
 
-const LocationPage = ({ tab, ipData, geolocation }: LocationPageProps) => {
+const LocationPage = ({ tab }: LocationPageProps) => {
+  const [ipData, setIpData] = useState<ipData>()
   const [locationType, setLocationType] = useState('')
   const [timezone, setTimezone] = useState('')
   const [locale, setLocale] = useState('')
@@ -24,20 +23,16 @@ const LocationPage = ({ tab, ipData, geolocation }: LocationPageProps) => {
   const [lon, setLongitude] = useState('')
   const [configuration, setConfiguration] = useState('custom')
 
-  // console.log(geolocation)
+  useEffect(() => {
+    getIp().then((ipDataRes) => {
+      setIpData(ipDataRes)
+    })
+  }, [])
 
   useEffect(() => {
     chrome.storage.local.get(
       ['locationType', 'configuration', 'timezone', 'locale', 'lat', 'lon'],
       (storage) => {
-        if (!storage.locationType || storage.locationType === 'default') {
-          setTimezone(Intl.DateTimeFormat().resolvedOptions().timeZone)
-          setLocale(Intl.DateTimeFormat().resolvedOptions().locale)
-          if (geolocation) {
-            setLatitude(`${geolocation.latitude}`)
-            setLongitude(`${geolocation.longitude}`)
-          }
-        }
         if (storage.locationType === 'matchIp' && ipData) {
           setTimezone(ipData.timezone)
           setLocale(countryLocales[ipData.countryCode].locale)
@@ -61,7 +56,7 @@ const LocationPage = ({ tab, ipData, geolocation }: LocationPageProps) => {
           : setLocationType('default')
       }
     )
-  }, [geolocation, ipData])
+  }, [ipData])
 
   const changeType = (e: ChangeEvent<HTMLInputElement>) => {
     detachDebugger()
@@ -69,12 +64,10 @@ const LocationPage = ({ tab, ipData, geolocation }: LocationPageProps) => {
     chrome.storage.local.set({ locationType: e.target.value })
 
     if (e.target.value === 'default') {
-      setTimezone(Intl.DateTimeFormat().resolvedOptions().timeZone)
+      setTimezone('')
-      setLocale(Intl.DateTimeFormat().resolvedOptions().locale)
+      setLocale('')
-      if (geolocation) {
+      setLatitude('')
-        setLatitude(`${geolocation.latitude}`)
+      setLongitude('')
-        setLongitude(`${geolocation.longitude}`)
-      }
       chrome.storage.local.set({
         timezone: '',
         locale: '',
@@ -94,7 +87,7 @@ const LocationPage = ({ tab, ipData, geolocation }: LocationPageProps) => {
           lon: ipData.lon,
         })
       }
-    } else if (e.target.value === 'custom')
+    } else if (e.target.value === 'custom') {
       if (configuration !== 'custom') {
         setTimezone(configurations[configuration].timezone)
         setLocale(configurations[configuration].locale)
@@ -107,6 +100,7 @@ const LocationPage = ({ tab, ipData, geolocation }: LocationPageProps) => {
           lon: configurations[configuration].lon,
         })
       }
+    }
   }
 
   const changeConfiguration = (e: ChangeEvent<HTMLSelectElement>) => {
@@ -185,17 +179,46 @@ const LocationPage = ({ tab, ipData, geolocation }: LocationPageProps) => {
         </Label>
       </Flex>
       {locationType === 'matchIp' && (
-        <Table>
+        <Flex
-          <TableRow
+          sx={{
-            title="IP Address"
+            border: '1px solid',
-            value={
+            mt: '12px',
-              ipData
+            mb: '8px',
-                ? `${getFlagEmoji(ipData.countryCode)} ${ipData?.query}`
+            borderRadius: '4px',
-                : 'loading...'
+            borderColor: 'grey',
-            }
+            alignItems: 'center',
-            noBorder
+            p: '4px 8px',
+          }}
+        >
+          <Box sx={{ fontWeight: '700', width: '100px', pr: '8px' }}>
+            IP Address
+          </Box>
+          <Box
+            sx={{
+              width: '188px',
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+            }}
+            title={ipData?.query}
+          >
+            {ipData
+              ? `${getFlagEmoji(ipData.countryCode)} ${ipData?.query}`
+              : 'loading...'}
+          </Box>
+          <RotateCw
+            size={20}
+            sx={{
+              cursor: 'pointer',
+            }}
+            onClick={() => {
+              setIpData(undefined)
+              getIp().then((ipDataRes) => {
+                setIpData(ipDataRes)
+              })
+            }}
           />
-        </Table>
+        </Flex>
       )}
       {locationType === 'custom' && (
         <>

src/Popup/Pages/OtherOptionsPage/index.tsx

@@ -1,24 +0,0 @@
-import CheckBox from '../../Components/CheckBox'
-import Page from '../../Components/Page'
-
-interface OtherOptionsPageProps {
-  tab: string
-}
-
-const OtherOptionsPage = ({ tab }: OtherOptionsPageProps) => {
-  return (
-    <Page isCurrentTab={tab === 'otherOptions'} title={'Other Options'}>
-      <CheckBox title={'Network Prediction Enabled'} />
-      <CheckBox title={'Alternate Error Pages Enabled'} />
-      <CheckBox title={'Safe Browsing Reporting Enabled'} />
-      <CheckBox title={'Search Suggest Enabled'} />
-      <CheckBox title={'Spelling Service Enabled'} />
-      <CheckBox title={'Translation Service Enabled'} />
-      <CheckBox title={'Hyperlink Auditing Enabled'} />
-      <CheckBox title={'Referrers Enabled'} />
-      <CheckBox title={'Third Party Cookies Allowed'} />
-    </Page>
-  )
-}
-
-export default OtherOptionsPage

src/Popup/Pages/SettingsPage/InfoItem.tsx

@@ -0,0 +1,17 @@
+import { Box, Flex } from 'theme-ui'
+
+interface InfoItemProps {
+  title: string
+  children: React.ReactNode
+}
+
+const SettingsPage = ({ title, children }: InfoItemProps) => {
+  return (
+    <Box sx={{ mb: '12px' }}>
+      <Flex sx={{ fontWeight: '700', mb: '2px' }}>{title}</Flex>
+      {children}
+    </Box>
+  )
+}
+
+export default SettingsPage

src/Popup/Pages/SettingsPage/index.tsx

@@ -1,6 +1,6 @@
-import { Label, Select } from 'theme-ui'
+import { Link, Text } from 'theme-ui'
 import Page from '../../Components/Page'
-import CheckBox from '../../Components/CheckBox'
+import InfoItem from './InfoItem'
 
 interface SystemPageProps {
   tab: string
@@ -8,30 +8,62 @@ interface SystemPageProps {
 
 const SettingsPage = ({ tab }: SystemPageProps) => {
   return (
-    <Page isCurrentTab={tab === 'settings'} title={'Settings'}>
+    <Page isCurrentTab={tab === 'settings'} title={'Info'}>
-      <CheckBox title={'Disable Address Autofill'} />
+      <InfoItem title={'Hide Debugging Notification Bar'}>
-      <CheckBox title={'Dark Mode'} />
+        While spoofing data a notification bar becomes visible. Hiding the bar
-      <Label htmlFor="configuration">Language</Label>
+        can be done by using the{' '}
-      <Select name="Language" id="Language">
+        <Text sx={{ fontStyle: 'italic', mr: '2px' }}>
-        <option>Arabic</option>
+          --silent-debugger-extension-api
-        <option>Bengali</option>
+        </Text>{' '}
-        <option>English</option>
+        flag.{' '}
-        <option>French</option>
+        <Link
-        <option>Hindi</option>
+          variant="hover"
-        <option>Mandarin Chinese</option>
+          href={`https://www.chromium.org/developers/how-tos/run-chromium-with-flags`}
-        <option>Persian</option>
+          target="_blank"
-        <option>Portuguese</option>
+        >
-        <option>Russian</option>
+          Instructions on how to run chrome with flags
-        <option>Spanish</option>
+        </Link>
-        <option>Turkish</option>
+        .
-        <option>Ukrainian</option>
+      </InfoItem>
-        <option>Urdu</option>
+      <InfoItem title={'Change IP Address'}>
-        {/* {Object.keys(configurations).map((key) => (
+        Vytal does not change your IP address. To change your IP you will need a
-            <option value={key} key={key}>
+        VPN such as{' '}
-              {configurations[key].name}
+        <Link
-            </option>
+          variant="hover"
-          ))} */}
+          href={`https://go.nordvpn.net/aff_c?offer_id=15&aff_id=79520&url_id=902`}
-      </Select>
+          target="_blank"
+        >
+          NordVPN
+        </Link>{' '}
+        or{' '}
+        <Link
+          variant="hover"
+          href={`https://go.getproton.me/aff_c?offer_id=26&aff_id=3825`}
+          target="_blank"
+        >
+          ProtonVPN
+        </Link>
+        .
+      </InfoItem>
+      <InfoItem title={'Vytal vs Similar Extensions'}>
+        Vytal utilizes the debugger API to spoof data which is completely
+        undetectable. Other similar extensions rely on{' '}
+        <Link
+          variant="hover"
+          href={`https://palant.info/2020/12/10/how-anti-fingerprinting-extensions-tend-to-make-fingerprinting-easier/`}
+          target="_blank"
+        >
+          inferior script tag injections
+        </Link>
+        .
+      </InfoItem>
+      <InfoItem title={'Test Extension'}>
+        You can test and compare Vytal and other spoofing extensions on{' '}
+        <Link variant="hover" href={`https://vytal.io`} target="_blank">
+          vytal.io
+        </Link>
+        .
+      </InfoItem>
     </Page>
   )
 }

src/Popup/Pages/UserAgentPage/index.tsx

@@ -14,8 +14,8 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
   const [userAgentType, setUserAgentType] = useState('default')
   const [operatingSystem, setOperatingSystem] = useState('Windows')
   const [browser, setBrowser] = useState('Chrome')
-  const [userAgent, setUserAgent] = useState(navigator.userAgent)
+  const [userAgent, setUserAgent] = useState('')
-  const [platform, setPlatform] = useState(navigator.platform)
+  const [platform, setPlatform] = useState('')
 
   useEffect(() => {
     chrome.storage.local.get(
@@ -36,8 +36,8 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
     chrome.storage.local.set({ userAgentType: e.target.value })
 
     if (e.target.value === 'default') {
-      setUserAgent(navigator.userAgent)
+      setUserAgent('')
-      setPlatform(navigator.platform)
+      setPlatform('')
       chrome.storage.local.set({
         userAgent: '',
         platform: '',
@@ -55,14 +55,18 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
   const changeOperatingSystem = async (e: ChangeEvent<HTMLSelectElement>) => {
     detachDebugger()
     setOperatingSystem(e.target.value)
-    setUserAgent(userAgents[e.target.value]['userAgents'][browser])
+    let browserValue = browser
+    if (!userAgents[e.target.value]['userAgents'][browser]) {
+      browserValue = Object.keys(userAgents[e.target.value]['userAgents'])[0]
+      setBrowser(browserValue)
+    }
+    setUserAgent(userAgents[e.target.value]['userAgents'][browserValue])
     setPlatform(userAgents[e.target.value]['platform'])
     chrome.storage.local.set({
-      userAgent: userAgents[e.target.value]['userAgents'][browser],
+      userAgent: userAgents[e.target.value]['userAgents'][browserValue],
       platform: userAgents[e.target.value]['platform'],
       operatingSystem: e.target.value,
     })
-    // await attachCurrentTab()
   }
 
   const changeBrowser = (e: ChangeEvent<HTMLSelectElement>) => {

src/Popup/Pages/WebRtcPage/RadioButton.tsx

@@ -1,35 +0,0 @@
-import { ChangeEvent } from 'react'
-import { Box, Label, Radio, Text } from 'theme-ui'
-
-interface RadioButtonProps {
-  value: string
-  name: string
-  description: string
-  webRtcPolicy: string
-  onChange: (e: ChangeEvent<HTMLInputElement>) => void
-}
-
-const RadioButton = ({
-  value,
-  name,
-  description,
-  webRtcPolicy,
-  onChange,
-}: RadioButtonProps) => {
-  return (
-    <>
-      <Label sx={{ cursor: 'pointer' }}>
-        <Radio
-          name="webRtcPolicy"
-          value={value}
-          onChange={onChange}
-          checked={webRtcPolicy === value}
-        />
-        <Text sx={{ fontWeight: '700' }}>{name}</Text>
-      </Label>
-      <Box sx={{ ml: '32px', mb: '12px', fontSize: '12px' }}>{description}</Box>
-    </>
-  )
-}
-
-export default RadioButton

src/Popup/Pages/WebRtcPage/getWebRTCData.ts

@@ -1,73 +0,0 @@
-const getWebRTC = (setWebRtcIp: any) => {
-  // if (navigator.getUserMedia) {
-  const ipRegex =
-    /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/
-
-  // compatibility for firefox and chrome
-  let RTCPeerConnection = window.RTCPeerConnection
-
-  // minimal requirements for data connection
-  const mediaConstraints = {
-    optional: [{ RtpDataChannels: true }],
-  }
-
-  const servers = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] }
-
-  // construct a new RTCPeerConnection
-  const pc = new RTCPeerConnection(servers, mediaConstraints)
-
-  let ips: any = []
-
-  // listen for candidate events
-  pc.onicecandidate = (ice) => {
-    // skip non-candidate events
-    if (ice.candidate) {
-      const ip = ipRegex.exec(ice.candidate.candidate)
-      if (ip !== null && ip.length > 1) {
-        ips.push(ip[1])
-      }
-    }
-  }
-
-  // create a bogus data channel
-  pc.createDataChannel('')
-
-  // create an offer sdp
-  pc.createOffer(
-    (result) => {
-      // trigger the stun server request
-      pc.setLocalDescription(
-        result,
-        () => {},
-        () => {}
-      )
-    },
-    () => {}
-  )
-
-  const waitForElement = async () => {
-    if (pc.localDescription) {
-      const lines = pc.localDescription.sdp.split('\n')
-      lines.forEach((line) => {
-        if (line.indexOf('a=candidate:') === 0) {
-          const ip = ipRegex.exec(line)
-          if (ip !== null && ip.length > 1) {
-            ips.push(ip[1])
-          }
-        }
-      })
-      ips = [...new Set(ips)]
-      console.log(ips)
-      setWebRtcIp(await Promise.all(ips))
-    } else {
-      setTimeout(waitForElement, 1000)
-    }
-  }
-
-  waitForElement()
-  // } else {
-  //   setWebRTCData([])
-  // }
-}
-
-export default getWebRTC

src/Popup/Pages/WebRtcPage/handleWebRtcPolicy.ts

@@ -1,17 +0,0 @@
-const handleWebRtcPolicy = (value: string) => {
-  console.log(value)
-  chrome.privacy.network.webRTCIPHandlingPolicy.clear({}, () => {
-    chrome.privacy.network.webRTCIPHandlingPolicy.set(
-      {
-        value,
-      },
-      () => {
-        chrome.storage.local.set({
-          webRtcPolicy: value,
-        })
-      }
-    )
-  })
-}
-
-export default handleWebRtcPolicy

src/Popup/Pages/WebRtcPage/index.tsx

@@ -1,67 +0,0 @@
-import { useState, useEffect, ChangeEvent } from 'react'
-import Page from '../../Components/Page'
-import handleWebRtcPolicy from './handleWebRtcPolicy'
-import RadioButton from './RadioButton'
-import FooterLink from '../../Components/FooterLink'
-
-interface SystemPageProps {
-  tab: string
-}
-
-const WebRtcPage = ({ tab }: SystemPageProps) => {
-  const [webRtcPolicy, setWebRtcPolicy] = useState('default')
-
-  useEffect(() => {
-    chrome.storage.local.get(['webRtcPolicy'], (storage) => {
-      storage.webRtcPolicy && setWebRtcPolicy(storage.webRtcPolicy)
-    })
-  }, [])
-
-  const changeRadioValue = (e: ChangeEvent<HTMLInputElement>) => {
-    handleWebRtcPolicy(e.target.value)
-    setWebRtcPolicy(e.target.value)
-  }
-
-  return (
-    <Page isCurrentTab={tab === 'webRtc'} title={'WebRTC Policy'}>
-      <RadioButton
-        value={'default'}
-        name={'Default'}
-        description={
-          'Will use all available interfaces when searching for the best path.'
-        }
-        webRtcPolicy={webRtcPolicy}
-        onChange={changeRadioValue}
-      />
-      <RadioButton
-        value={'default_public_and_private_interfaces'}
-        name={'Default Public And Private Interfaces'}
-        description={
-          'Will only use interface connecting to the public Internet, but may connect using private IP.'
-        }
-        webRtcPolicy={webRtcPolicy}
-        onChange={changeRadioValue}
-      />
-      <RadioButton
-        value={'default_public_interface_only'}
-        name={'Default Public Interface Only'}
-        description={
-          'Will only use interface connecting to the public Internet, and will not connect using private IP.'
-        }
-        webRtcPolicy={webRtcPolicy}
-        onChange={changeRadioValue}
-      />
-      <RadioButton
-        value={'disable_non_proxied_udp'}
-        name={'Disable Non-Proxied UDP (Force Proxy)'}
-        description={
-          'Will use TCP on the public-facing interface, and will only use UDP if supported by a configured proxy.'
-        }
-        webRtcPolicy={webRtcPolicy}
-        onChange={changeRadioValue}
-      />
-    </Page>
-  )
-}
-
-export default WebRtcPage

src/Popup/Popup.tsx

@@ -1,64 +1,22 @@
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 import { ThemeProvider, Flex, Box } from 'theme-ui'
 import { theme } from '../theme'
-import {
+import { MapPin, Globe, Info } from 'react-feather'
-  Wifi,
-  MapPin,
-  FileText,
-  MessageSquare,
-  Globe,
-  Settings,
-} from 'react-feather'
 import TabItem from './TabItem'
 import LocationPage from './Pages/LocationPage'
 import UserAgentPage from './Pages/UserAgentPage'
 import SettingsPage from './Pages/SettingsPage'
-import AutofillPage from './Pages/AutofillPage'
-import WebRtcPage from './Pages/WebRtcPage'
-import ConnectionPage from './Pages/ConnectionPage'
-import { ipData } from '../types'
-import getIp from '../utils/getIp'
-// import getReverseGeocoding from '../utils/getReverseGeocoding'
 import '../assets/global.css'
-import OtherOptionsPage from './Pages/OtherOptionsPage'
-import addresses from '../utils/addresses'
 
 const Popup = () => {
   const [tab, setTab] = useState('location')
-  const [ipData, setIpData] = useState<ipData>()
-  // const [reverseGeocoding, setReverseGeocoding] = useState<any>(undefined)
-  const [geolocation, setGeolocation] = useState<GeolocationCoordinates>()
-  const [autofillData, setAutofillData] = useState<any>()
-
-  useEffect(() => {
-    getIp().then((ipDataRes) => {
-      setIpData(ipDataRes)
-      let geoIndex = (ipDataRes.lat + 90) * 180 + ipDataRes.lon
-      console.log(geoIndex)
-      let closest = addresses.reduce((prev: any, curr: any) => {
-        return Math.abs(curr.geoIndex - geoIndex) <
-          Math.abs(prev.geoIndex - geoIndex)
-          ? curr
-          : prev
-      })
-      setAutofillData(closest)
-    })
-    navigator.geolocation.getCurrentPosition(
-      (pos) => setGeolocation(pos.coords),
-      (err) => console.warn(`ERROR(${err.code}): ${err.message}`),
-      {
-        enableHighAccuracy: true,
-        timeout: 5000,
-      }
-    )
-  }, [])
 
   return (
     <ThemeProvider theme={theme}>
       <Flex
         sx={{
           width: '350px',
-          height: '455px',
+          height: '460px',
         }}
       >
         <Flex
@@ -69,68 +27,26 @@ const Popup = () => {
             flexDirection: 'column',
           }}
         >
-          {/* <TabItem
-            Icon={Wifi}
-            active={tab === 'connection'}
-            onClick={() => setTab('connection')}
-          /> */}
           <TabItem
             Icon={MapPin}
             active={tab === 'location'}
             onClick={() => setTab('location')}
           />
-          {/* <TabItem
-            Icon={FileText}
-            active={tab === 'autofill'}
-            onClick={() => setTab('autofill')}
-          />
-          <TabItem
-            Icon={MessageSquare}
-            active={tab === 'webRtc'}
-            onClick={() => setTab('webRtc')}
-          /> */}
           <TabItem
             Icon={Globe}
             active={tab === 'userAgent'}
             onClick={() => setTab('userAgent')}
           />
-          {/* <TabItem
-            Icon={Sliders}
-            active={tab === 'otherOptions'}
-            onClick={() => setTab('otherOptions')}
-          /> */}
           <TabItem
-            Icon={Settings}
+            Icon={Info}
             active={tab === 'settings'}
             onClick={() => setTab('settings')}
           />
-          {/* <TabItem
-            Icon={ExternalLink}
-            onClick={() => window.open('https://vytal.io')}
-          /> */}
         </Flex>
         <Box sx={{ m: '12px', width: '100%' }}>
-          <ConnectionPage tab={tab} ipData={ipData} />
+          <LocationPage tab={tab} />
-          <LocationPage tab={tab} ipData={ipData} geolocation={geolocation} />
-          <AutofillPage
-            tab={tab}
-            autofillData={autofillData}
-            // reverseGeocoding={reverseGeocoding}
-          />
-          <WebRtcPage tab={tab} />
           <UserAgentPage tab={tab} />
-          <OtherOptionsPage tab={tab} />
           <SettingsPage tab={tab} />
-          {/* <Text
-            sx={{
-              mb: '8px',
-              fontSize: '10px',
-              position: 'fixed',
-              bottom: '0',
-            }}
-          >
-            Connection tab won't be fully spoofed until after 1st or 2nd reload.
-          </Text> */}
         </Box>
       </Flex>
     </ThemeProvider>

src/assets/global.css

@@ -5,10 +5,10 @@
 }
 
 body {
-  font-family: 'Nunito';
+  font-family: 'Nunito', Arial, Helvetica, sans-serif;
   font-weight: 500;
 }
 
 input {
-  font-family: 'Nunito';
+  font-family: 'Nunito', Arial, Helvetica, sans-serif;
 }

src/manifest.json

@@ -3,7 +3,7 @@
   "name": "Vytal - Spoof timezone, location & user agent",
   "version": "2.1.0",
   "description": "Spoof Timezone, Geolocation, Locale and User Agent.",
-  "permissions": ["storage", "debugger", "privacy", "geolocation"],
+  "permissions": ["storage", "debugger"],
   "background": { "service_worker": "background.bundle.js" },
   "action": {
     "default_popup": "popup.html",

src/theme.ts

@@ -4,8 +4,6 @@ export const theme: Theme = {
   colors: {
     text: '#333333',
     background: '#FDFDFD',
-    // primary: '#B77EEE',
-    // primaryDark: '#a55eea',
     primary: '#a55eea',
     primaryDark: '#9454d2',
     red: '#fc5c65',
@@ -73,10 +71,6 @@ export const theme: Theme = {
   links: {
     footer: {
       color: 'text',
-      mb: '8px',
-      fontSize: '11px',
-      position: 'fixed',
-      bottom: '0',
       textDecoration: 'none',
     },
     hover: {

src/utils/attachDebugger.ts

@@ -14,7 +14,6 @@ const attachDebugger = (tabId: number) => {
       'platform',
     ],
     (storage) => {
-      console.log(storage)
       if (
         storage.timezone ||
         storage.lat ||
@@ -24,15 +23,6 @@ const attachDebugger = (tabId: number) => {
       ) {
         chrome.debugger.attach({ tabId: tabId }, '1.3', () => {
           if (!chrome.runtime.lastError) {
-            // chrome.debugger.sendCommand(
-            //   { tabId: tabId },
-            //   'Target.autoAttachRelated',
-            //   { targetId: tabId, waitForDebuggerOnStart: false },
-            //   (res) => {
-            //     console.log(res)
-            //   }
-            // )
-
             if (storage.timezone) {
               chrome.debugger.sendCommand(
                 { tabId: tabId },