Added match ip checkboxes

src/pages/Background/index.js

@@ -1,21 +1,22 @@
 import countryLocales from './countryLocales'
 
 const attachTab = (tabId, ipData) => {
-  console.log(1)
   chrome.debugger.attach({ tabId: tabId }, '1.3', function () {
-    console.log(2, chrome.runtime.lastError)
-
     if (!chrome.runtime.lastError) {
-      console.log(3)
+      // chrome.debugger.sendCommand(
+      //   { tabId: tabId },
+      //   'Emulation.clearGeolocationOverride'
+      // )
+
+      // chrome.debugger.sendCommand(
+      //   { tabId: tabId },
+      //   'Emulation.clearIdleOverride'
+      // )
 
       chrome.debugger.sendCommand(
         { tabId: tabId },
-        'Emulation.clearGeolocationOverride'
-      )
-
-      chrome.debugger.sendCommand(
-        { tabId: tabId },
-        'Emulation.clearIdleOverride'
+        'Emulation.setTimezoneOverride',
+        { timezoneId: ipData.timezone }
       )
 
       chrome.debugger.sendCommand(
@@ -24,12 +25,6 @@ const attachTab = (tabId, ipData) => {
         { locale: countryLocales[ipData.countryCode].locale }
       )
 
-      chrome.debugger.sendCommand(
-        { tabId: tabId },
-        'Emulation.setTimezoneOverride',
-        { timezoneId: ipData.timezone }
-      )
-
       chrome.debugger.sendCommand(
         { tabId: tabId },
         'Emulation.setGeolocationOverride',
@@ -56,7 +51,6 @@ const attachTab = (tabId, ipData) => {
 
 chrome.tabs.onUpdated.addListener((tabId, change, tab) => {
   chrome.storage.sync.get(['ipData'], (result) => {
-    console.log(result.ipData)
     attachTab(tabId, result.ipData)
   })
 })

src/pages/Popup/DebugSettings.js

@@ -0,0 +1,65 @@
+import React, { useState, useEffect } from 'react'
+
+const detachDebugger = () => {
+  chrome.debugger.getTargets((tabs) => {
+    console.log(tabs)
+    for (const tab in tabs) {
+      if (tabs[tab].attached && tabs[tab].tabId) {
+        chrome.debugger.detach({ tabId: tabs[tab].tabId })
+      }
+    }
+  })
+}
+
+const DebugSettings = ({ type, ip }) => {
+  const [value, setValue] = useState()
+  const [matchIP, setMatchIP] = useState(false)
+  const matchIPStorage = `${type}MatchIP`
+
+  useEffect(() => {
+    console.log('fsffdsfsd')
+    chrome.storage.sync.get([type, matchIPStorage], (result) => {
+      setMatchIP(result[matchIPStorage])
+
+      if (result[matchIPStorage] && !result[type]) {
+        setValue(ip[type])
+        chrome.storage.sync.set({ [type]: ip[type] })
+      } else {
+        setValue(result[type])
+      }
+    })
+  }, [ip, matchIPStorage, type])
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        margin: '10px 0 0 0',
+      }}
+    >
+      <label>
+        <input
+          type="text"
+          value={value}
+          // onChange={() => setMatchIP(!matchIP)}
+          style={{
+            width: '100px',
+            margin: '0 5px 0 0',
+          }}
+        />
+        {type}
+      </label>
+      <label>
+        Match IP
+        <input
+          type="checkbox"
+          checked={matchIP}
+          onChange={() => setMatchIP(!matchIP)}
+        />
+      </label>
+    </div>
+  )
+}
+
+export default DebugSettings

src/pages/Popup/IpSettings.js

@@ -0,0 +1,40 @@
+import React from 'react'
+
+const detachDebugger = () => {
+  chrome.debugger.getTargets((tabs) => {
+    for (const tab in tabs) {
+      if (tabs[tab].attached && tabs[tab].tabId) {
+        chrome.debugger.detach({ tabId: tabs[tab].tabId })
+      }
+    }
+  })
+}
+
+const getFlagEmoji = (countryCode) => {
+  const codePoints = countryCode
+    .toUpperCase()
+    .split('')
+    .map((char) => 127397 + char.charCodeAt())
+  return String.fromCodePoint(...codePoints)
+}
+
+const IpSettings = ({ ip, getIP, setIP }) => {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+      <div>
+        Current IP: {ip && `${ip.query} ${getFlagEmoji(ip.countryCode)}`}
+      </div>
+      <button
+        type="button"
+        onClick={() => {
+          Promise.resolve(getIP()).then((ipData) => setIP(ipData))
+          detachDebugger()
+        }}
+      >
+        Reload
+      </button>
+    </div>
+  )
+}
+
+export default IpSettings

src/pages/Popup/Popup.jsx

@@ -1,8 +1,29 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import Navbar from './Navbar'
-import IpSettings from './ipSettings'
+import IpSettings from './IpSettings'
+import DebugSettings from './DebugSettings'
+
+const getIP = () =>
+  fetch('http://ip-api.com/json/')
+    .then((response) => response.json())
+    .then((ipData) => {
+      chrome.storage.sync.set({ ipData })
+      return ipData
+    })
 
 const Popup = () => {
+  const [ip, setIP] = useState()
+
+  useEffect(() => {
+    chrome.storage.sync.get(['ipData'], (result) => {
+      if (result.ipData) {
+        setIP(result.ipData)
+      } else {
+        Promise.resolve(getIP()).then((ipData) => setIP(ipData))
+      }
+    })
+  }, [])
+
   return (
     <div className="App">
       <Navbar />
@@ -11,7 +32,10 @@ const Popup = () => {
           padding: '10px',
         }}
       >
-        <IpSettings />
+        <IpSettings ip={ip} getIP={getIP} setIP={setIP} />
+        <DebugSettings type="timezone" ip={ip} />
+        <DebugSettings type="lat" ip={ip} />
+        <DebugSettings type="lon" ip={ip} />
       </div>
     </div>
   )

src/pages/Popup/index.css

@@ -3,7 +3,7 @@
   --text: #212121;
   --background: #fff;
   --scrollbar: #ccc;
-  --navbar: #8A39E1;
+  --navbar: #943ec5;
   --icon: #aab7b8;
   --border: #f0f3f4;
 }

src/pages/Popup/ipSettings.js

@@ -1,62 +0,0 @@
-import React, { useState, useEffect } from 'react'
-
-const getIP = () =>
-  fetch('http://ip-api.com/json/')
-    .then((response) => response.json())
-    .then((ipData) => {
-      chrome.storage.sync.set({ ipData })
-      return ipData
-    })
-
-const detachDebugger = () => {
-  chrome.debugger.getTargets((tabs) => {
-    console.log(tabs)
-    for (const tab in tabs) {
-      if (tabs[tab].attached && tabs[tab].tabId) {
-        chrome.debugger.detach({ tabId: tabs[tab].tabId })
-      }
-    }
-  })
-}
-
-const Popup = () => {
-  const [ip, setIP] = useState()
-
-  useEffect(() => {
-    chrome.storage.sync.get(['ipData'], (result) => {
-      console.log(result.ipData)
-      if (result.ipData) {
-        setIP(result.ipData)
-      } else {
-        Promise.resolve(getIP()).then((ipData) => setIP(ipData))
-      }
-    })
-  }, [])
-
-  const getFlagEmoji = (countryCode) => {
-    const codePoints = countryCode
-      .toUpperCase()
-      .split('')
-      .map((char) => 127397 + char.charCodeAt())
-    return String.fromCodePoint(...codePoints)
-  }
-
-  return (
-    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-      <div>
-        Current IP: {ip && `${ip.query} ${getFlagEmoji(ip.countryCode)}`}
-      </div>
-      <button
-        type="button"
-        onClick={() => {
-          Promise.resolve(getIP()).then((ipData) => setIP(ipData))
-          detachDebugger()
-        }}
-      >
-        Reload
-      </button>
-    </div>
-  )
-}
-
-export default Popup