Webrtc policy handling

src/pages/Popup/LocationInput.tsx

@@ -39,8 +39,8 @@ const LocationInput = ({
         chrome.storage.sync.set({ [type]: ipTypeValue })
       }
     } else if (configuration === 'custom') {
-      chrome.storage.sync.get([type], (result) => {
+      chrome.storage.sync.get([type], (storage) => {
-        result[type] && setValue(result[type])
+        storage[type] && setValue(storage[type])
       })
     } else if (configuration !== 'default') {
       setValue(configurations[configuration][type])

src/pages/Popup/LocationPage.tsx

@@ -14,10 +14,10 @@ const LocationPage = ({ tab }: LocationPageProps) => {
   const [configuration, setConfiguration] = useState('default')
 
   useEffect(() => {
-    chrome.storage.sync.get(['configuration', 'ipData'], (result) => {
+    chrome.storage.sync.get(['configuration', 'ipData'], (storage) => {
-      result.configuration && setConfiguration(result.configuration)
+      storage.configuration && setConfiguration(storage.configuration)
-      if (result.ipData) {
+      if (storage.ipData) {
-        setIP(result.ipData)
+        setIP(storage.ipData)
       } else {
         Promise.resolve(getIP()).then((ipData) => setIP(ipData))
       }

src/pages/Popup/SettingsCheckBox.tsx

@@ -2,12 +2,14 @@ import { Label, Checkbox } from 'theme-ui'
 
 interface LocationPageProps {
   title: string
+  onChange?: () => void
+  checked?: boolean
 }
 
-const SettingsCheckBox = ({ title }: LocationPageProps) => {
+const SettingsCheckBox = ({ title, onChange, checked }: LocationPageProps) => {
   return (
     <Label sx={{ mb: '8px' }}>
-      <Checkbox defaultChecked={true} />
+      <Checkbox onChange={onChange} checked={checked} />
       {title}
     </Label>
   )

src/pages/Popup/SettingsPage.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react'
-import { Box, Label, Checkbox, Select } from 'theme-ui'
+import { Box, Label, Select } from 'theme-ui'
+import setWebRtcPolicy from '../../utils/setWebRtcPolicy'
 import SettingsCheckBox from './SettingsCheckBox'
 
 interface LocationPageProps {
@@ -7,9 +8,13 @@ interface LocationPageProps {
 }
 
 const SettingsPage = ({ tab }: LocationPageProps) => {
-  const [ip, setIP] = useState(null)
+  const [isWebRtcDisabled, setIsWebRtcDisabled] = useState(false)
 
-  useEffect(() => {}, [])
+  useEffect(() => {
+    chrome.storage.sync.get(['isWebRtcDisabled'], (storage) => {
+      storage.isWebRtcDisabled && setIsWebRtcDisabled(storage.isWebRtcDisabled)
+    })
+  }, [])
 
   return (
     <Box
@@ -18,17 +23,31 @@ const SettingsPage = ({ tab }: LocationPageProps) => {
       }}
     >
       <Box sx={{ fontSize: '20px', mb: '12px' }}>Settings</Box>
-      <SettingsCheckBox title={'Block WebRTC'} />
+      <SettingsCheckBox
+        title={'Block WebRTC'}
+        onChange={() => {
+          setWebRtcPolicy()
+          setIsWebRtcDisabled(!isWebRtcDisabled)
+        }}
+        checked={isWebRtcDisabled}
+      />
       <SettingsCheckBox title={'Block Address Autofill'} />
       <SettingsCheckBox title={'Dark Mode'} />
       <Label htmlFor="configuration">Language</Label>
       <Select name="Language" id="Language">
+        <option>Arabic</option>
+        <option>Bengali</option>
         <option>English</option>
         <option>French</option>
-        <option>Chinese</option>
+        <option>Hindi</option>
+        <option>Mandarin Chinese</option>
+        <option>Persian</option>
+        <option>Portuguese</option>
         <option>Russian</option>
-        <option>Farsi</option>
+        <option>Spanish</option>
-
+        <option>Turkish</option>
+        <option>Ukrainian</option>
+        <option>Urdu</option>
         {/* {Object.keys(configurations).map((key) => (
             <option value={key} key={key}>
               {configurations[key].name}

src/pages/Popup/UserAgentPage.tsx

@@ -16,11 +16,11 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
   useEffect(() => {
     chrome.storage.sync.get(
       ['type', 'operatingSystem', 'browser', 'userAgent'],
-      (result) => {
+      (storage) => {
-        result.type && setType(result.type)
+        storage.type && setType(storage.type)
-        result.operatingSystem && setOperatingSystem(result.operatingSystem)
+        storage.operatingSystem && setOperatingSystem(storage.operatingSystem)
-        result.browser && setBrowser(result.browser)
+        storage.browser && setBrowser(storage.browser)
-        result.userAgent && setUserAgent(result.userAgent)
+        storage.userAgent && setUserAgent(storage.userAgent)
       }
     )
   }, [])

src/utils/attachDebugger.ts

@@ -12,13 +12,13 @@ const attachDebugger = (tabId: number) => {
       'localeMatchIP',
       'userAgent',
     ],
-    (result) => {
+    (storage) => {
       if (
-        result.timezone ||
+        storage.timezone ||
-        result.lat ||
+        storage.lat ||
-        result.lon ||
+        storage.lon ||
-        result.locale ||
+        storage.locale ||
-        result.userAgent
+        storage.userAgent
       ) {
         chrome.debugger.attach({ tabId: tabId }, '1.3', () => {
           if (!chrome.runtime.lastError) {
@@ -31,12 +31,12 @@ const attachDebugger = (tabId: number) => {
             //   }
             // )
 
-            if (result.timezone) {
+            if (storage.timezone) {
               chrome.debugger.sendCommand(
                 { tabId: tabId },
                 'Emulation.setTimezoneOverride',
                 {
-                  timezoneId: result.timezone,
+                  timezoneId: storage.timezone,
                 },
                 () => {
                   if (
@@ -51,38 +51,38 @@ const attachDebugger = (tabId: number) => {
               )
             }
 
-            if (result.locale) {
+            if (storage.locale) {
               chrome.debugger.sendCommand(
                 { tabId: tabId },
                 'Emulation.setLocaleOverride',
                 {
-                  locale: result.locale,
+                  locale: storage.locale,
                 }
               )
             }
 
-            if (result.lat || result.lon) {
+            if (storage.lat || storage.lon) {
               chrome.debugger.sendCommand(
                 { tabId: tabId },
                 'Emulation.setGeolocationOverride',
                 {
-                  latitude: result.lat
+                  latitude: storage.lat
-                    ? parseFloat(result.lat)
+                    ? parseFloat(storage.lat)
-                    : result.ipData.lat,
+                    : storage.ipData.lat,
-                  longitude: result.lon
+                  longitude: storage.lon
-                    ? parseFloat(result.lon)
+                    ? parseFloat(storage.lon)
-                    : result.ipData.lon,
+                    : storage.ipData.lon,
                   accuracy: 1,
                 }
               )
             }
 
-            if (result.userAgent) {
+            if (storage.userAgent) {
               chrome.debugger.sendCommand(
                 { tabId: tabId },
                 'Emulation.setUserAgentOverride',
                 {
-                  userAgent: result.userAgent,
+                  userAgent: storage.userAgent,
                 }
                 // { acceptLanguage: "en-CA" },
                 // { platform: "WebTV OS" }

src/utils/setWebRtcPolicy.ts

@@ -0,0 +1,34 @@
+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,
+          })
+          //   chrome.privacy.network.webRTCIPHandlingPolicy.get({}, (s) => {
+          //     // let path = 'data/icons/'
+          //     // let title = 'WebRTC access is allowed'
+          //     if (s.value !== value) {
+          //     //   path += 'red/'
+          //     //   title =
+          //         console.log('WebRTC access cannot be changed. It is controlled by another extension')
+          //     } else if (prefs.enabled === false) {
+          //       path += 'disabled/'
+          //       title = 'WebRTC access is blocked'
+          //     }
+          //   })
+        }
+      )
+    })
+  })
+}
+
+export default setWebRtcPolicy