Restructured folders

package.json

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

src/Background/index.ts

@@ -1,16 +1,16 @@
-import attachDebugger from '../../utils/attachDebugger'
+import attachDebugger from '../utils/attachDebugger'
 
-const attachTab = (tabId) => {
+const attachTab = (tabId: number) => {
   chrome.debugger.getTargets((tabs) => {
     const currentTab = tabs.find((obj) => obj.tabId === tabId)
-    if (!currentTab.attached) {
+    if (!currentTab?.attached) {
       attachDebugger(tabId)
     }
   })
 }
 
 chrome.tabs.onCreated.addListener((tab) => {
-  attachDebugger(tab.id)
+  tab.id && attachDebugger(tab.id)
 })
 
 chrome.tabs.onActivated.addListener((tab) => {

src/Popup/Pages/LocationPage/ConfigurationSelect.tsx

@@ -1,7 +1,7 @@
-import React, { Dispatch, SetStateAction, ChangeEvent } from 'react'
+import { Dispatch, SetStateAction, ChangeEvent } from 'react'
 import { Label, Select } from 'theme-ui'
-import configurations from '../../utils/configurations'
-import detachDebugger from '../../utils/detachDebugger'
+import configurations from '../../../utils/configurations'
+import detachDebugger from '../../../utils/detachDebugger'
 
 interface ConfigurationSelectProps {
   configuration: string

src/Popup/Pages/LocationPage/IPData.tsx

@@ -1,7 +1,7 @@
-import React, { Dispatch, SetStateAction } from 'react'
+import { Dispatch, SetStateAction } from 'react'
 import { Flex, Button, Text } from 'theme-ui'
-import detachDebugger from '../../utils/detachDebugger'
-import getIP from '../../utils/getIP'
+import detachDebugger from '../../../utils/detachDebugger'
+import getIP from '../../../utils/getIP'
 
 const getFlagEmoji = (countryCode: string) => {
   const codePoints = countryCode

src/Popup/Pages/LocationPage/LocationInput.tsx

@@ -1,13 +1,13 @@
-import React, {
+import {
   useState,
   useEffect,
   Dispatch,
   SetStateAction,
   ChangeEvent,
 } from 'react'
-import configurations from '../../utils/configurations'
-import countryLocales from '../../utils/countryLocales'
-import detachDebugger from '../../utils/detachDebugger'
+import configurations from '../../../utils/configurations'
+import countryLocales from '../../../utils/countryLocales'
+import detachDebugger from '../../../utils/detachDebugger'
 import { Label, Input } from 'theme-ui'
 
 interface LocationInputProps {

src/Popup/Pages/LocationPage/index.tsx

@@ -1,9 +1,9 @@
-import React, { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react'
 import { Box } from 'theme-ui'
 import LocationInput from './LocationInput'
 import ConfigurationSelect from './ConfigurationSelect'
 import IPData from './IPData'
-import getIP from '../../utils/getIP'
+import getIP from '../../../utils/getIP'
 
 interface LocationPageProps {
   tab: string

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 '../../../utils/setWebRtcPolicy'
 import SettingsCheckBox from './SettingsCheckBox'
 
 interface LocationPageProps {

src/Popup/Pages/UserAgentPage/UserAgentSelect.tsx

@@ -1,7 +1,7 @@
-import React, { Dispatch, SetStateAction, ChangeEvent } from 'react'
+import { Dispatch, SetStateAction, ChangeEvent } from 'react'
 import { Label, Select } from 'theme-ui'
-import configurations from '../../utils/configurations'
-import detachDebugger from '../../utils/detachDebugger'
+import configurations from '../../../utils/configurations'
+import detachDebugger from '../../../utils/detachDebugger'
 
 interface ConfigurationSelectProps {
   title: string

src/Popup/Pages/UserAgentPage/index.tsx

@@ -1,7 +1,7 @@
-import React, { useState, useEffect, ChangeEvent } from 'react'
+import { useState, useEffect, ChangeEvent } from 'react'
 import { Box, Label, Radio, Flex, Input, Select } from 'theme-ui'
-import userAgents from '../../utils/userAgents'
-import detachDebugger from '../../utils/detachDebugger'
+import userAgents from '../../../utils/userAgents'
+import detachDebugger from '../../../utils/detachDebugger'
 
 interface UserAgentPageProps {
   tab: string

src/Popup/Popup.tsx

@@ -1,11 +1,19 @@
 import React, { useState } from 'react'
 import { ThemeProvider, Flex, Box, Text } from 'theme-ui'
-import { theme } from '../../theme'
-import { MapPin, Globe, Settings, ExternalLink } from 'react-feather'
+import { theme } from '../theme'
+import {
+  MapPin,
+  Home,
+  MessageSquare,
+  Globe,
+  Sliders,
+  Settings,
+  ExternalLink,
+} from 'react-feather'
 import TabItem from './TabItem'
-import LocationPage from './LocationPage'
-import UserAgentPage from './UserAgentPage'
-import SettingsPage from './SettingsPage'
+import LocationPage from './Pages/LocationPage'
+import UserAgentPage from './Pages/UserAgentPage'
+import SettingsPage from './Pages/SettingsPage'
 
 const Popup = () => {
   const [tab, setTab] = useState('settings')
@@ -32,7 +40,17 @@ const Popup = () => {
             onClick={() => setTab('location')}
           />
           <TabItem
-            Icon={Globe}
+            Icon={Home}
+            active={tab === 'AdressAutofill'}
+            onClick={() => setTab('AdressAutofill')}
+          />
+          <TabItem
+            Icon={MessageSquare}
+            active={tab === 'WebRTC'}
+            onClick={() => setTab('WebRTC')}
+          />
+          <TabItem
+            Icon={Sliders}
             active={tab === 'useragent'}
             onClick={() => setTab('useragent')}
           />
@@ -50,7 +68,7 @@ const Popup = () => {
           <LocationPage tab={tab} />
           <UserAgentPage tab={tab} />
           <SettingsPage tab={tab} />
-          <Text
+          {/* <Text
             sx={{
               mb: '8px',
               fontSize: '10px',
@@ -59,7 +77,7 @@ const Popup = () => {
             }}
           >
             Current tab won't be fully spoofed until after 1st or 2nd reload.
-          </Text>
+          </Text> */}
         </Box>
       </Flex>
     </ThemeProvider>

src/manifest.json

@@ -1,6 +1,6 @@
 {
   "manifest_version": 3,
-  "name": "Vytal - Spoof Timezone, Geolocation, Locale and User Agent",
+  "name": "Vytal - VPN Companion",
   "version": "2.0.0",
   "description": "Spoof Timezone, Geolocation, Locale and User Agent.",
   "permissions": ["storage", "debugger", "activeTab", "privacy"],

src/theme.ts

@@ -22,6 +22,7 @@ export const theme: Theme = {
       fontFamily: "'Segoe UI', Tahoma, sans-serif",
     },
   },
+
   forms: {
     label: { width: 'auto' },
     input: {

src/utils/setAutofillAddress.ts

@@ -0,0 +1,34 @@
+const setAutofillAddress = () => {
+  chrome.storage.sync.get(['isWebRtcDisabled'], (storage) => {
+    const value = storage.isWebRtcDisabled
+      ? 'default'
+      : 'disable_non_proxied_udp'
+
+      chrome.privacy.services.autofillAddressEnabled.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 setAutofillAddress

tsconfig.json

@@ -15,6 +15,7 @@
     "noEmit": false,
     "jsx": "react-jsx",
     "jsxImportSource": "theme-ui"
+    
   },
   "include": ["src"],
   "exclude": ["build", "node_modules"]

webpack.config.js

@@ -36,8 +36,8 @@ if (fileSystem.existsSync(secretsPath)) {
 var options = {
   mode: process.env.NODE_ENV || 'development',
   entry: {
-    popup: path.join(__dirname, 'src', 'pages', 'Popup', 'index.jsx'),
-    background: path.join(__dirname, 'src', 'pages', 'Background', 'index.js'),
+    popup: path.join(__dirname, 'src', 'Popup', 'index.tsx'),
+    background: path.join(__dirname, 'src', 'Background', 'index.ts'),
   },
   chromeExtensionBoilerplate: {
     notHotReload: ['background'],
@@ -147,7 +147,7 @@ var options = {
       ],
     }),
     new HtmlWebpackPlugin({
-      template: path.join(__dirname, 'src', 'pages', 'Popup', 'index.html'),
+      template: path.join(__dirname, 'src', 'Popup', 'index.html'),
       filename: 'popup.html',
       chunks: ['popup'],
       cache: false,

yarn.lock

@@ -1640,6 +1640,11 @@
   dependencies:
     csstype "^3.0.2"
 
+"@types/webpack-env@^1.18.0":
+  version "1.18.0"
+  resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.18.0.tgz#ed6ecaa8e5ed5dfe8b2b3d00181702c9925f13fb"
+  integrity sha512-56/MAlX5WMsPVbOg7tAxnYvNYMMWr/QJiIp6BxVSW3JJXUVzzOn64qW8TzQyMSqSUFM2+PVI4aUHcHOzIz/1tg==
+
 "@types/ws@^8.5.1":
   version "8.5.3"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.3.tgz#7d25a1ffbecd3c4f2d35068d0b283c037003274d"