Webrtc page

package.json

@@ -17,6 +17,7 @@
     "@hot-loader/react-dom": "^17.0.2",
     "@mdx-js/react": "^2.1.2",
     "@types/webpack-env": "^1.18.0",
+    "@types/webrtc": "^0.0.33",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-feather": "^2.0.10",

src/Popup/Components/CheckBox.tsx

@@ -0,0 +1,18 @@
+import { Label, Checkbox } from 'theme-ui'
+
+interface LocationPageProps {
+  title: string
+  onChange?: () => void
+  checked?: boolean
+}
+
+const CheckBox = ({ title, onChange, checked }: LocationPageProps) => {
+  return (
+    <Label sx={{ mb: '8px' }}>
+      <Checkbox onChange={onChange} checked={checked} />
+      {title}
+    </Label>
+  )
+}
+
+export default CheckBox

src/Popup/Pages/AddressAutofillPage/index.tsx

@@ -0,0 +1,36 @@
+import { useState, useEffect } from 'react'
+import { Box } from 'theme-ui'
+
+import getIP from '../../../utils/getIP'
+
+interface LocationPageProps {
+  tab: string
+}
+
+const AddressAutofillPage = ({ tab }: LocationPageProps) => {
+  const [ip, setIP] = useState(null)
+  const [configuration, setConfiguration] = useState('default')
+
+  useEffect(() => {
+    chrome.storage.sync.get(['configuration', 'ipData'], (storage) => {
+      storage.configuration && setConfiguration(storage.configuration)
+      if (storage.ipData) {
+        setIP(storage.ipData)
+      } else {
+        Promise.resolve(getIP()).then((ipData) => setIP(ipData))
+      }
+    })
+  }, [])
+
+  return (
+    <Box
+      sx={{
+        display: tab === 'addressAutofill' ? 'block' : 'none',
+      }}
+    >
+      <Box sx={{ fontSize: '20px', mb: '8px' }}>Address Autofill</Box>
+    </Box>
+  )
+}
+
+export default AddressAutofillPage

src/Popup/Pages/LocationPage/index.tsx

@@ -30,7 +30,7 @@ const LocationPage = ({ tab }: LocationPageProps) => {
         display: tab === 'location' ? 'block' : 'none',
       }}
     >
-      <Box sx={{ fontSize: '20px', mb: '8px' }}>Location</Box>
+      <Box sx={{ fontSize: '20px', mb: '8px' }}>Location Data</Box>
       <ConfigurationSelect
         configuration={configuration}
         setConfiguration={setConfiguration}

src/Popup/Pages/SettingsPage/index.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import { Box, Label, Select } from 'theme-ui'
-import setWebRtcPolicy from '../../../utils/setWebRtcPolicy'
+import setWebRtcPolicy from '../WebRtcPage/handleWebRtcPolicy'
 import SettingsCheckBox from './SettingsCheckBox'
 
 interface LocationPageProps {
@@ -33,11 +33,11 @@ const SettingsPage = ({ tab }: LocationPageProps) => {
       }}
     >
       <Box sx={{ fontSize: '20px', mb: '12px' }}>Settings</Box>
-      <SettingsCheckBox
+      {/* <SettingsCheckBox
         title={'Disable WebRTC'}
         onChange={setWebRtcPolicy}
         checked={isWebRtcDisabled}
-      />
+      /> */}
       <SettingsCheckBox title={'Disable Address Autofill'} />
       <SettingsCheckBox title={'Dark Mode'} />
       <Label htmlFor="configuration">Language</Label>

src/Popup/Pages/UserAgentPage/index.tsx

@@ -65,7 +65,7 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
         display: tab === 'useragent' ? 'block' : 'none',
       }}
     >
-      <Box sx={{ fontSize: '20px', mb: '12px' }}>User Agent</Box>
+      <Box sx={{ fontSize: '20px', mb: '12px' }}>Other Options</Box>
       <Flex
         sx={{
           justifyContent: 'space-between',

src/Popup/Pages/WebRtcPage/getWebRTCData.ts

@@ -0,0 +1,73 @@
+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

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

src/Popup/Pages/WebRtcPage/index.tsx

@@ -0,0 +1,67 @@
+import { useState, useEffect } from 'react'
+import { Box, Button, Select } from 'theme-ui'
+import getWebRTCData from './getWebRTCData'
+import handleWebRtcPolicy from './handleWebRtcPolicy'
+
+interface LocationPageProps {
+  tab: string
+}
+
+const WebRtcPage = ({ tab }: LocationPageProps) => {
+  const [webRtcPolicy, setWebRtcPolicy] = useState('default')
+  const [webRtcIp, setWebRtcIp] = useState([])
+
+  useEffect(() => {
+    chrome.storage.sync.get(['webRtcPolicy'], (storage) => {
+      storage.webRtcPolicy && setWebRtcPolicy(storage.webRtcPolicy)
+    })
+  }, [])
+
+  chrome.privacy.network.webRTCIPHandlingPolicy.onChange.addListener(function (
+    details
+  ) {
+    console.log(details)
+    setWebRtcPolicy(details.value)
+  })
+
+  return (
+    <Box
+      sx={{
+        display: tab === 'webRtc' ? 'block' : 'none',
+      }}
+    >
+      <Box sx={{ fontSize: '20px', mb: '8px' }}>WebRTC</Box>
+      <Select
+        name="webRtcPolicy"
+        id="webRtcPolicy"
+        value={webRtcPolicy}
+        onChange={(e) => handleWebRtcPolicy(e.target.value)}
+      >
+        <option value="default">Default</option>
+        <option value="default_public_and_private_interfaces">
+          Default public and private interfaces
+        </option>
+        <option value="default_public_interface_only">
+          Default public interface only
+        </option>
+        <option value="disable_non_proxied_udp">Disable non proxied udp</option>
+      </Select>
+      <Box sx={{ fontSize: '12px', mb: '8px' }}>
+        IP: {JSON.stringify(webRtcIp)}
+      </Box>
+      <Button
+        onClick={() => {
+          getWebRTCData(setWebRtcIp)
+          // getWebRTCData().then((ip) => {
+          //   console.log(ip)
+          //   setWebRtcIp(ip)
+          // })
+        }}
+      >
+        Reload
+      </Button>
+    </Box>
+  )
+}
+
+export default WebRtcPage

src/Popup/Popup.tsx

@@ -14,9 +14,11 @@ import TabItem from './TabItem'
 import LocationPage from './Pages/LocationPage'
 import UserAgentPage from './Pages/UserAgentPage'
 import SettingsPage from './Pages/SettingsPage'
+import AddressAutofillPage from './Pages/AddressAutofillPage'
+import WebRtcPage from './Pages/WebRtcPage'
 
 const Popup = () => {
-  const [tab, setTab] = useState('settings')
+  const [tab, setTab] = useState('webRtc')
 
   return (
     <ThemeProvider theme={theme}>
@@ -41,13 +43,13 @@ const Popup = () => {
           />
           <TabItem
             Icon={Home}
-            active={tab === 'AdressAutofill'}
+            active={tab === 'addressAutofill'}
-            onClick={() => setTab('AdressAutofill')}
+            onClick={() => setTab('addressAutofill')}
           />
           <TabItem
             Icon={MessageSquare}
-            active={tab === 'WebRTC'}
+            active={tab === 'webRtc'}
-            onClick={() => setTab('WebRTC')}
+            onClick={() => setTab('webRtc')}
           />
           <TabItem
             Icon={Sliders}
@@ -66,6 +68,8 @@ const Popup = () => {
         </Flex>
         <Box sx={{ m: '12px', width: '100%' }}>
           <LocationPage tab={tab} />
+          <AddressAutofillPage tab={tab} />
+          <WebRtcPage tab={tab} />
           <UserAgentPage tab={tab} />
           <SettingsPage tab={tab} />
           {/* <Text

src/utils/setWebRtcPolicy.ts

@@ -1,22 +0,0 @@
-const setWebRtcPolicy = () => {
-  chrome.storage.sync.get(['isWebRtcDisabled'], (storage) => {
-    const value = storage.isWebRtcDisabled
-      ? 'default'
-      : 'disable_non_proxied_udp'
-
-    chrome.privacy.network.webRTCIPHandlingPolicy.clear({}, () => {
-      chrome.privacy.network.webRTCIPHandlingPolicy.set(
-        {
-          value,
-        },
-        () => {
-          chrome.storage.sync.set({
-            isWebRtcDisabled: !storage.isWebRtcDisabled,
-          })
-        }
-      )
-    })
-  })
-}
-
-export default setWebRtcPolicy

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es6",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": false,
     "skipLibCheck": true,
@@ -15,7 +15,6 @@
     "noEmit": false,
     "jsx": "react-jsx",
     "jsxImportSource": "theme-ui"
-    
   },
   "include": ["src"],
   "exclude": ["build", "node_modules"]

yarn.lock

@@ -1645,6 +1645,11 @@
   resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.18.0.tgz#ed6ecaa8e5ed5dfe8b2b3d00181702c9925f13fb"
   integrity sha512-56/MAlX5WMsPVbOg7tAxnYvNYMMWr/QJiIp6BxVSW3JJXUVzzOn64qW8TzQyMSqSUFM2+PVI4aUHcHOzIz/1tg==
 
+"@types/webrtc@^0.0.33":
+  version "0.0.33"
+  resolved "https://registry.yarnpkg.com/@types/webrtc/-/webrtc-0.0.33.tgz#8d5c64320741c9b0bd1cdd2890f12d9e6b5ae210"
+  integrity sha512-xjN6BelzkY3lzXjIjXGqJVDS6XDleEsvp1bVIyNccXCcMoTH3wvUXFew4/qflwJdNqjmq98Zc5VcALV+XBKBvg==
+
 "@types/ws@^8.5.1":
   version "8.5.3"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.3.tgz#7d25a1ffbecd3c4f2d35068d0b283c037003274d"