Added profile options

src/pages/Background/index.js

@@ -1,4 +1,4 @@
-const attachTab = (tabId, ipData) => {
+const attachTab = (tabId) => {
   chrome.storage.sync.get(
     [
       'ipData',
@@ -20,11 +20,11 @@ const attachTab = (tabId, ipData) => {
         result.locale ||
         result.userAgent
       ) {
-        chrome.debugger.attach({ tabId: tabId }, '1.3', function () {
+        chrome.debugger.attach({ tabId: tabId }, '1.3', () => {
           if (!chrome.runtime.lastError) {
             // chrome.debugger.sendCommand(
             //   { tabId: tabId },
-            //   'Emulation.clearGeolocationOverride'
+            //   'Emulation.clearTimezoneOverride'
             // )
 
             if (result.timezone) {
@@ -33,6 +33,17 @@ const attachTab = (tabId, ipData) => {
                 'Emulation.setTimezoneOverride',
                 {
                   timezoneId: result.timezone,
+                },
+                () => {
+                  if (
+                    chrome.runtime.lastError &&
+                    chrome.runtime.lastError.message.includes(
+                      'Timezone override is already in effect'
+                    )
+                  ) {
+                    chrome.debugger.detach({ tabId })
+                    attachTab(tabId)
+                  }
                 }
               )
             }

src/pages/Popup/DebugSettings.js

@@ -1,43 +1,32 @@
 import React, { useState, useEffect } from 'react'
-import detachDebugger from '../../utils/detachDebugger'
+import profiles from '../../utils/profiles'
 
-const DebugSettings = ({ type, title, ip }) => {
+const DebugSettings = ({ type, title, ip, profile, setProfile }) => {
   const [value, setValue] = useState('')
-  const [matchIP, setMatchIP] = useState(false)
-  const matchIPStorage = `${type}MatchIP`
 
   useEffect(() => {
-    if (ip) {
+    if (profile === 'match') {
-      chrome.storage.sync.get([type, matchIPStorage], (result) => {
+      console.log(ip)
-        result[matchIPStorage] && setMatchIP(result[matchIPStorage])
+      if (ip) {
-
+        setValue(ip[type])
-        if (result[matchIPStorage]) {
+        chrome.storage.sync.set({ [type]: ip[type] })
-          setValue(ip[type])
+      }
-          chrome.storage.sync.set({ [type]: ip[type] })
+    } else if (profile === 'custom') {
-        } else if (result[type]) {
+      console.log(111)
-          setValue(result[type])
+      chrome.storage.sync.get([type], (result) => {
-        }
+        result[type] && setValue(result[type])
       })
+    } else {
+      setValue(profiles[profile][type])
+      chrome.storage.sync.set({ [type]: profiles[profile][type] })
     }
-  }, [ip, matchIPStorage, type])
+  }, [ip, profile, type])
 
   const changeTextValue = (e) => {
     chrome.storage.sync.set({ [type]: e.target.value })
     setValue(e.target.value)
-    if (matchIP) {
+    chrome.storage.sync.set({ profile: 'custom' })
-      chrome.storage.sync.set({ [matchIPStorage]: !matchIP })
+    setProfile('custom')
-      setMatchIP(!matchIP)
-    }
-    // detachDebugger()
-  }
-
-  const toggleMatchIP = (e) => {
-    chrome.storage.sync.set({
-      [type]: ip[type],
-      [matchIPStorage]: !matchIP,
-    })
-    !matchIP && setValue(ip[type])
-    setMatchIP(e.target.checked)
   }
 
   return (
@@ -48,22 +37,19 @@ const DebugSettings = ({ type, title, ip }) => {
         margin: '12px 0 0 0',
       }}
     >
-      <label>
+      <input
-        <input
+        type="text"
-          type="text"
+        value={value}
-          value={value}
+        onChange={changeTextValue}
-          onChange={changeTextValue}
+        style={{
-          style={{
+          width: '168px',
-            width: '120px',
+        }}
-            margin: '0 5px 0 0',
+      />
-          }}
+      <label>{title}</label>
-        />
+      {/* <label>
-        {title}
-      </label>
-      <label>
         <input type="checkbox" checked={matchIP} onChange={toggleMatchIP} />
         Match IP
-      </label>
+      </label> */}
     </div>
   )
 }

src/pages/Popup/LocaleSettings.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react'
 import countryLocales from '../../utils/countryLocales'
+import detachDebugger from '../../utils/detachDebugger'
 
 const LocaleSettings = ({ ip }) => {
   const [value, setValue] = useState('')
@@ -30,6 +31,7 @@ const LocaleSettings = ({ ip }) => {
       chrome.storage.sync.set({ localeMatchIP: !matchIP })
       setMatchIP(!matchIP)
     }
+    detachDebugger()
   }
 
   const toggleMatchIP = (e) => {

src/pages/Popup/Popup.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import Navbar from './Navbar'
 import IpSettings from './IpSettings'
 import DebugSettings from './DebugSettings'
-import LocaleSettings from './LocaleSettings'
+import detachDebugger from '../../utils/detachDebugger'
 import UserAgentSettings from './UserAgentSettings'
 
 const getIP = () =>
@@ -15,9 +15,11 @@ const getIP = () =>
 
 const Popup = () => {
   const [ip, setIP] = useState(null)
+  const [profile, setProfile] = useState('none')
 
   useEffect(() => {
-    chrome.storage.sync.get(['ipData'], (result) => {
+    chrome.storage.sync.get(['profile', 'ipData'], (result) => {
+      result.profile && setProfile(result.profile)
       if (result.ipData) {
         setIP(result.ipData)
       } else {
@@ -26,6 +28,14 @@ const Popup = () => {
     })
   }, [])
 
+  const changeProfile = (e) => {
+    detachDebugger()
+    chrome.storage.sync.set({
+      profile: e.target.value,
+    })
+    setProfile(e.target.value)
+  }
+
   return (
     <div className="App">
       <Navbar />
@@ -35,10 +45,82 @@ const Popup = () => {
         }}
       >
         <IpSettings ip={ip} getIP={getIP} setIP={setIP} />
-        <DebugSettings type="timezone" title="Timezone" ip={ip} />
+        <div
-        <DebugSettings type="lat" title="Latitude" ip={ip} />
+          style={{
-        <DebugSettings type="lon" title="Longitude" ip={ip} />
+            display: 'flex',
-        <LocaleSettings ip={ip} />
+            justifyContent: 'space-between',
+            margin: '12px 0 0 0',
+          }}
+        >
+          <select
+            name="profile"
+            id="profile"
+            value={profile}
+            onChange={changeProfile}
+            style={{
+              width: '176px',
+            }}
+          >
+            <option value="none">None</option>
+            <option value="match">Match IP</option>
+            <option value="custom">Custom</option>
+            <optgroup label="Locations">
+              <option value="baghdad">Baghdad</option>
+              <option value="bangkok">Bangkok</option>
+              <option value="berlin">Berlin</option>
+              <option value="cairo">Cairo</option>
+              <option value="delhi">Delhi</option>
+              <option value="dubai">Dubai</option>
+              <option value="hongKong">Hong Kong</option>
+              <option value="houston">Houston</option>
+              <option value="istanbul">Istanbul</option>
+              <option value="jerusalem">Jerusalem</option>
+              <option value="kyiv">Kyiv</option>
+              <option value="lagos">Lagos</option>
+              <option value="london">London</option>
+              <option value="mecca">Mecca</option>
+              <option value="mexicoCity">Mexico City</option>
+              <option value="moscow">Moscow</option>
+              <option value="mumbai">Mumbai</option>
+              <option value="newYork">New York</option>
+              <option value="paris">Paris</option>
+              <option value="rome">Rome</option>
+              <option value="sanFrancisco">San Francisco</option>
+              <option value="saoPaulo">São Paulo</option>
+              <option value="seoul">Seoul</option>
+              <option value="shanghai">Shanghai</option>
+              <option value="singapore">Singapore</option>
+              <option value="sydney">Sydney</option>
+              <option value="tehran">Tehran</option>
+              <option value="tokyo">Tokyo</option>
+              <option value="toronto">Toronto</option>
+            </optgroup>
+          </select>
+          <label>Profile</label>
+        </div>
+
+        <DebugSettings
+          type="timezone"
+          title="Timezone"
+          ip={ip}
+          profile={profile}
+          setProfile={setProfile}
+        />
+        <DebugSettings
+          type="lat"
+          title="Latitude"
+          ip={ip}
+          profile={profile}
+          setProfile={setProfile}
+        />
+        <DebugSettings
+          type="lon"
+          title="Longitude"
+          ip={ip}
+          profile={profile}
+          setProfile={setProfile}
+        />
+        {/* <LocaleSettings ip={ip} /> */}
         <UserAgentSettings ip={ip} type="lat" title="Latitude" />
         <div
           style={{

src/pages/Popup/UserAgentSettings.js

@@ -49,18 +49,15 @@ const UserAgentSettings = () => {
           margin: '12px 0 0 0',
         }}
       >
-        <label>
+        <input
-          <input
+          type="text"
-            type="text"
+          value={userAgent}
-            value={userAgent}
+          onChange={changeUserAgent}
-            onChange={changeUserAgent}
+          style={{
-            style={{
+            width: '168px',
-              width: '218px',
+          }}
-              margin: '0 5px 0 0',
+        />
-            }}
+        <label>User Agent</label>
-          />
-          User Agent
-        </label>
       </div>
       <label>
         <input type="checkbox" checked={randomUA} onChange={randomize} />

src/pages/Popup/index.css

@@ -13,7 +13,7 @@ body {
   background-color: var(--background);
   font-size: 13px;
   line-height: 22px;
-  width: 320px;
+  width: 270px;
   height: 300px;
   margin: 0;
   font-family: 'Segoe UI', Tahoma, sans-serif;

src/utils/profiles.js

@@ -0,0 +1,11 @@
+const profiles = {
+  none: { timezone: '', locale: '', lat: '', lon: '' },
+  berlin: {
+    timezone: 'Europe/Berlin',
+    locale: 'de-DE',
+    lat: 52.520007,
+    lon: 13.404954,
+  },
+}
+
+export default profiles

webpack.config.js

@@ -4,17 +4,17 @@ var webpack = require('webpack'),
   env = require('./utils/env'),
   CopyWebpackPlugin = require('copy-webpack-plugin'),
   HtmlWebpackPlugin = require('html-webpack-plugin'),
-  TerserPlugin = require('terser-webpack-plugin');
+  TerserPlugin = require('terser-webpack-plugin')
-var { CleanWebpackPlugin } = require('clean-webpack-plugin');
+var { CleanWebpackPlugin } = require('clean-webpack-plugin')
 
-const ASSET_PATH = process.env.ASSET_PATH || '/';
+const ASSET_PATH = process.env.ASSET_PATH || '/'
 
 var alias = {
   'react-dom': '@hot-loader/react-dom',
-};
+}
 
 // load the secrets
-var secretsPath = path.join(__dirname, 'secrets.' + env.NODE_ENV + '.js');
+var secretsPath = path.join(__dirname, 'secrets.' + env.NODE_ENV + '.js')
 
 var fileExtensions = [
   'jpg',
@@ -27,10 +27,10 @@ var fileExtensions = [
   'ttf',
   'woff',
   'woff2',
-];
+]
 
 if (fileSystem.existsSync(secretsPath)) {
-  alias['secrets'] = secretsPath;
+  alias['secrets'] = secretsPath
 }
 
 var options = {
@@ -126,7 +126,7 @@ var options = {
                 version: process.env.npm_package_version,
                 ...JSON.parse(content.toString()),
               })
-            );
+            )
           },
         },
       ],
@@ -180,10 +180,10 @@ var options = {
   infrastructureLogging: {
     level: 'info',
   },
-};
+}
 
 if (env.NODE_ENV === 'development') {
-  options.devtool = 'cheap-module-source-map';
+  options.devtool = 'cheap-module-source-map'
 } else {
   options.optimization = {
     minimize: true,
@@ -192,7 +192,7 @@ if (env.NODE_ENV === 'development') {
         extractComments: false,
       }),
     ],
-  };
+  }
 }
 
-module.exports = options;
+module.exports = options