diff --git a/.prettierrc b/.prettierrc index 08979ae..6872b02 100644 --- a/.prettierrc +++ b/.prettierrc @@ -2,5 +2,7 @@ "singleQuote": true, "trailingComma": "es5", "requirePragma": false, - "arrowParens": "always" + "arrowParens": "always", + "semi": false, + "editor.formatOnSave": true } \ No newline at end of file diff --git a/src/assets/img/link.svg b/src/assets/img/link.svg new file mode 100644 index 0000000..2b9d31d --- /dev/null +++ b/src/assets/img/link.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/img/logo.svg b/src/assets/img/logo.svg index 6b60c10..99bfbad 100644 --- a/src/assets/img/logo.svg +++ b/src/assets/img/logo.svg @@ -1,7 +1,17 @@ - - - - - - - + + + + + + + + + + + + \ No newline at end of file diff --git a/src/manifest.json b/src/manifest.json index 3831b61..1385f4e 100755 --- a/src/manifest.json +++ b/src/manifest.json @@ -12,9 +12,6 @@ "icons": { "128": "icon-128.png" }, - "chrome_url_overrides": { - "newtab": "newtab.html" - }, "content_scripts": [ { "matches": ["http://*/*", "https://*/*", ""], diff --git a/src/pages/Background/index.js b/src/pages/Background/index.js index fc0f304..c100721 100644 --- a/src/pages/Background/index.js +++ b/src/pages/Background/index.js @@ -1,34 +1,34 @@ -import countryLocales from './countryLocales'; +import countryLocales from './countryLocales' const attachTab = (tabId, ipData) => { - console.log(1); + console.log(1) chrome.debugger.attach({ tabId: tabId }, '1.3', function () { - console.log(2, chrome.runtime.lastError); + console.log(2, chrome.runtime.lastError) if (!chrome.runtime.lastError) { - console.log(3); + console.log(3) chrome.debugger.sendCommand( { tabId: tabId }, 'Emulation.clearGeolocationOverride' - ); + ) chrome.debugger.sendCommand( { tabId: tabId }, 'Emulation.clearIdleOverride' - ); + ) chrome.debugger.sendCommand( { tabId: tabId }, 'Emulation.setLocaleOverride', { locale: countryLocales[ipData.countryCode].locale } - ); + ) chrome.debugger.sendCommand( { tabId: tabId }, 'Emulation.setTimezoneOverride', { timezoneId: ipData.timezone } - ); + ) chrome.debugger.sendCommand( { tabId: tabId }, @@ -38,7 +38,7 @@ const attachTab = (tabId, ipData) => { longitude: ipData.lon, accuracy: 1, } - ); + ) chrome.debugger.sendCommand( { tabId: tabId }, @@ -49,25 +49,29 @@ const attachTab = (tabId, ipData) => { } // { acceptLanguage: "en-CA" }, // { platform: "WebTV OS" } - ); + ) } - }); -}; + }) +} chrome.tabs.onUpdated.addListener((tabId, change, tab) => { - // chrome.debugger.getTargets((tabs) => { - // let tab = tabs.find((obj) => { - // return obj.tabId === tabId; - // }); + chrome.storage.sync.get(['ipData'], (result) => { + console.log(result.ipData) + attachTab(tabId, result.ipData) + }) +}) - // if (!tab.attached) { - chrome.storage.sync.get(['ipData'], (result) => { - console.log(result.ipData) - attachTab(tabId, result.ipData); - }); - // } - // }); -}); +// const attachTabs = (ipData) => { +// chrome.debugger.getTargets((tabs) => { +// console.log(tabs); +// for (const tab in tabs) { +// if (!tabs[tab].attached && tabs[tab].tabId) { +// console.log('------------'); +// attachTab(tabs[tab].tabId, ipData); +// } +// } +// }); +// }; // fetch('http://ip-api.com/json/') // .then((response) => response.json()) diff --git a/src/pages/Newtab/Newtab.css b/src/pages/Newtab/Newtab.css deleted file mode 100644 index 74b5e05..0000000 --- a/src/pages/Newtab/Newtab.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/pages/Newtab/Newtab.jsx b/src/pages/Newtab/Newtab.jsx deleted file mode 100644 index 1d2809b..0000000 --- a/src/pages/Newtab/Newtab.jsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import logo from '../../assets/img/logo.svg'; -import './Newtab.css'; -import './Newtab.scss'; - -const Newtab = () => { - window.location.replace("https://google.com"); - return ( -
-
- logo -

- Edit src/pages/Newtab/Newtab.js and save to reload. -

- - Learn React! - -
The color of this paragraph is defined using SASS.
-
-
- ); -}; - -export default Newtab; diff --git a/src/pages/Newtab/Newtab.scss b/src/pages/Newtab/Newtab.scss deleted file mode 100644 index 8960c7b..0000000 --- a/src/pages/Newtab/Newtab.scss +++ /dev/null @@ -1,10 +0,0 @@ -$myColor: red; - -h1, -h2, -h3, -h4, -h5, -h6 { - color: $myColor; -} diff --git a/src/pages/Newtab/index.css b/src/pages/Newtab/index.css deleted file mode 100644 index ec2585e..0000000 --- a/src/pages/Newtab/index.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/src/pages/Newtab/index.html b/src/pages/Newtab/index.html index ae663d1..d9ef155 100644 --- a/src/pages/Newtab/index.html +++ b/src/pages/Newtab/index.html @@ -1,11 +1 @@ - - - - - Chrome Extension Boilerplate (with React 16.6+ & Webpack 4+) - - - -
- - +
diff --git a/src/pages/Newtab/index.jsx b/src/pages/Newtab/index.jsx index 864de07..23a7881 100644 --- a/src/pages/Newtab/index.jsx +++ b/src/pages/Newtab/index.jsx @@ -1,11 +1,2 @@ -import React from 'react'; -import { render } from 'react-dom'; - -import Newtab from './Newtab'; -import './index.css'; - window.location.replace("https://google.com"); -render(, window.document.querySelector('#app-container')); - -if (module.hot) module.hot.accept(); diff --git a/src/pages/Popup/Navbar.js b/src/pages/Popup/Navbar.js new file mode 100644 index 0000000..8bed73d --- /dev/null +++ b/src/pages/Popup/Navbar.js @@ -0,0 +1,47 @@ +import * as React from 'react' +// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +// import { faExternalLinkAlt, faCog } from '@fortawesome/free-solid-svg-icons'; +import Logo from '../../assets/img/logo.svg' +import Link from '../../assets/img/link.svg' + +const Navbar = () => ( +
+ Vytal logo + + Test Vytal + +
+) + +export default Navbar diff --git a/src/pages/Popup/Popup.css b/src/pages/Popup/Popup.css deleted file mode 100644 index e7ce476..0000000 --- a/src/pages/Popup/Popup.css +++ /dev/null @@ -1,45 +0,0 @@ -.App { - position: absolute; - top: 0px; - bottom: 0px; - left: 0px; - right: 0px; - text-align: center; - height: 100%; - padding: 10px; - background-color: #282c34; -} - -.App-logo { - height: 30vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/pages/Popup/Popup.jsx b/src/pages/Popup/Popup.jsx index 998ffa3..ab64945 100644 --- a/src/pages/Popup/Popup.jsx +++ b/src/pages/Popup/Popup.jsx @@ -1,19 +1,20 @@ -import React from 'react'; -import './Popup.css'; - -const getIP = () => fetch('http://ip-api.com/json/') -.then((response) => response.json()) -.then((ipData) => { - chrome.storage.sync.set({ ipData }); -}); - +import React from 'react' +import Navbar from './Navbar' +import IpSettings from './ipSettings' const Popup = () => { return (
- + +
+ +
- ); -}; + ) +} -export default Popup; +export default Popup diff --git a/src/pages/Popup/index.css b/src/pages/Popup/index.css index 800a9cb..3e03237 100644 --- a/src/pages/Popup/index.css +++ b/src/pages/Popup/index.css @@ -1,17 +1,20 @@ +:root { + --main: #943ec5; + --text: #212121; + --background: #fff; + --scrollbar: #ccc; + --navbar: #8A39E1; + --icon: #aab7b8; + --border: #f0f3f4; +} + body { + color: var(--text); + background-color: var(--background); + font-size: 13px; + line-height: 22px; width: 300px; - height: 260px; + height: 300px; margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - position: relative; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; + font-family: 'Segoe UI', Tahoma, sans-serif; } diff --git a/src/pages/Popup/ipSettings.js b/src/pages/Popup/ipSettings.js new file mode 100644 index 0000000..ea111fb --- /dev/null +++ b/src/pages/Popup/ipSettings.js @@ -0,0 +1,62 @@ +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 ( +
+
+ Current IP: {ip && `${ip.query} ${getFlagEmoji(ip.countryCode)}`} +
+ +
+ ) +} + +export default Popup