Adding popup code to reload and display ip
This commit is contained in:
z0ccc
parent
263d031783
commit
2abfc5407f
16 changed files with 189 additions and 216 deletions
|
|
@ -2,5 +2,7 @@
|
|||
"singleQuote": true,
|
||||
"trailingComma": "es5",
|
||||
"requirePragma": false,
|
||||
"arrowParens": "always"
|
||||
"arrowParens": "always",
|
||||
"semi": false,
|
||||
"editor.formatOnSave": true
|
||||
}
|
||||
1
src/assets/img/link.svg
Normal file
1
src/assets/img/link.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#fff" d="M256 64C256 46.33 270.3 32 288 32H415.1C415.1 32 415.1 32 415.1 32C420.3 32 424.5 32.86 428.2 34.43C431.1 35.98 435.5 38.27 438.6 41.3C438.6 41.35 438.6 41.4 438.7 41.44C444.9 47.66 447.1 55.78 448 63.9C448 63.94 448 63.97 448 64V192C448 209.7 433.7 224 416 224C398.3 224 384 209.7 384 192V141.3L214.6 310.6C202.1 323.1 181.9 323.1 169.4 310.6C156.9 298.1 156.9 277.9 169.4 265.4L338.7 96H288C270.3 96 256 81.67 256 64V64zM0 128C0 92.65 28.65 64 64 64H160C177.7 64 192 78.33 192 96C192 113.7 177.7 128 160 128H64V416H352V320C352 302.3 366.3 288 384 288C401.7 288 416 302.3 416 320V416C416 451.3 387.3 480 352 480H64C28.65 480 0 451.3 0 416V128z"/></svg>
|
||||
|
After Width: | Height: | Size: 736 B |
|
|
@ -1,7 +1,17 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
|
||||
<g fill="#61DAFB">
|
||||
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
|
||||
<circle cx="420.9" cy="296.5" r="45.7"/>
|
||||
<path d="M520.5 78.1z"/>
|
||||
</g>
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
version="1"
|
||||
viewBox="0 0 4389 1056"
|
||||
>
|
||||
<g fill="#fff" stroke="none" transform="matrix(.1 0 0 -.1 0 1056)">
|
||||
<path d="M4890 10554c-19-2-102-11-185-20-814-84-1627-377-2332-841-666-437-1242-1047-1652-1748-345-590-582-1279-670-1950-34-261-44-422-44-710 0-388 28-679 99-1035C523 2160 2153 526 4240 106c360-73 640-99 1040-99 488 0 847 44 1305 160 665 168 1310 477 1860 891 1004 754 1703 1833 1983 3062 146 636 168 1351 61 2010-273 1699-1362 3160-2913 3911-540 261-1091 420-1716 495-100 12-240 17-535 19-220 2-416 1-435-1zm870-978c947-115 1772-494 2460-1130 303-281 615-672 815-1025 491-866 669-1875 504-2861-113-681-390-1322-814-1885-233-310-552-627-869-862-1529-1139-3637-1136-5161 7-391 294-746 669-1012 1070-367 553-599 1170-683 1814-113 869 22 1705 399 2472 103 210 151 294 287 499 316 476 726 886 1199 1199 340 225 629 368 999 495 349 120 681 187 1106 225 112 10 641-3 770-18z"></path>
|
||||
<path d="M5045 8784c-729-59-1353-298-1925-740-149-114-480-445-594-594-405-524-638-1090-722-1755-22-172-25-595-6-760 86-742 352-1362 822-1916 176-207 457-462 565-513 153-73 342-56 483 44 140 98 210 245 199 420-9 156-62 251-211 377-479 408-770 907-876 1504-31 174-39 528-16 719 93 759 503 1435 1121 1847 275 183 609 315 946 372 442 76 912 34 1329-116 593-214 1089-664 1375-1248 194-396 270-726 270-1165-1-320-34-522-135-815-143-414-360-722-786-1116-311-287-141-788 284-834 71-8 180 13 256 51 97 47 353 285 519 482 474 563 751 1223 818 1954 17 188 6 625-19 798-99 656-347 1220-760 1730-118 144-361 385-514 507-520 416-1102 662-1770 748-118 16-543 28-653 19z"></path>
|
||||
<path d="M5175 6514c-92-14-198-39-260-61-458-165-766-607-768-1103-1-309 89-544 306-792 141-160 207-284 259-481 21-80 22-101 27-972l6-890 24-60c79-199 237-332 440-372 282-56 561 117 657 407 17 51 19 120 24 935 6 867 6 881 28 958 51 183 137 343 254 474 207 230 308 486 308 782 0 328-118 612-349 842-171 170-340 263-576 314-69 16-321 28-380 19z"></path>
|
||||
<path d="M39255 8795c-156-35-252-89-375-214-79-79-103-111-137-181-23-47-50-112-60-145-17-57-18-203-21-2915-2-2552-1-2863 13-2933 31-154 97-272 219-392 93-91 176-144 291-183l80-27 1972-3c2216-3 2045-8 2213 74 82 41 109 61 196 148s107 114 147 196c56 113 77 207 77 338-1 222-69 380-232 538-87 85-141 122-228 159-131 55-109 54-1270 57-591 2-1274 4-1517 6l-443 2-2 2433-3 2432-23 73c-86 279-301 480-574 536-92 19-240 20-323 1z"></path>
|
||||
<path d="M12765 8744c-101-17-243-74-332-136-160-109-287-325-313-531-10-84-2-193 21-280 9-37 516-1310 1838-4620 424-1062 439-1096 540-1209 63-71 201-159 301-192 130-43 243-53 364-32 163 27 276 83 399 196 130 120 126 111 585 1263 231 578 735 1842 1120 2807 530 1328 705 1776 718 1840 59 295-87 628-344 784-226 137-480 151-719 41-147-68-257-165-333-294-21-36-377-914-790-1950l-753-1884-756 1890c-416 1039-772 1916-791 1949-48 81-170 202-255 252-114 67-240 104-365 107-58 2-118 1-135-1z"></path>
|
||||
<path d="M26688 8740c-304-52-566-312-619-614-18-104-7-273 24-369 75-231 263-414 512-498l70-24 792-3 793-3 2-2442 3-2442 23-70c87-258 284-451 528-516 108-29 287-29 396-1 270 72 486 299 544 571 11 55 14 457 14 2484v2417h753c474 0 776 4 816 11 164 26 285 91 416 223 151 152 214 307 215 523 0 116-11 179-47 277-66 176-234 350-413 426-140 59 58 54-2465 56-1270 1-2331-2-2357-6z"></path>
|
||||
<path d="M34355 8735c-232-43-433-192-538-402-33-64-2231-5575-2255-5652-13-42-17-90-17-196 1-131 3-146 32-227 78-220 214-370 416-455 112-47 194-64 307-65 143 0 264 32 382 103 119 70 223 181 285 304 12 22 357 879 768 1905s750 1868 754 1872c3 4 339-826 745-1845 406-1018 755-1885 775-1925 133-274 456-451 752-413 109 14 155 29 279 88 79 38 107 59 180 132 71 71 94 103 133 181 89 180 112 363 68 530-22 86-2217 5595-2263 5682-150 281-487 442-803 383z"></path>
|
||||
<path d="M19760 8661c-129-35-236-96-337-194-264-253-298-670-80-966 23-31 467-625 987-1321l945-1265 5-1255 5-1255 24-70c65-194 179-338 343-437 106-63 202-90 343-95 153-6 238 11 364 73 169 83 316 254 379 441l27 78 5 1250 5 1250 1021 1280c561 704 1039 1305 1062 1335 94 127 137 261 135 430-2 240-95 431-283 581-141 113-312 167-495 156-199-13-348-76-478-205-29-28-421-512-872-1075l-819-1025-763 1018c-419 561-781 1040-805 1066-133 145-329 224-548 223-68 0-128-6-170-18z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 4.2 KiB |
|
|
@ -12,9 +12,6 @@
|
|||
"icons": {
|
||||
"128": "icon-128.png"
|
||||
},
|
||||
"chrome_url_overrides": {
|
||||
"newtab": "newtab.html"
|
||||
},
|
||||
"content_scripts": [
|
||||
{
|
||||
"matches": ["http://*/*", "https://*/*", "<all_urls>"],
|
||||
|
|
|
|||
|
|
@ -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())
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<img src={logo} className="App-logo" alt="logo" />
|
||||
<p>
|
||||
Edit <code>src/pages/Newtab/Newtab.js</code> and save to reload.
|
||||
</p>
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://reactjs.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn React!
|
||||
</a>
|
||||
<h6>The color of this paragraph is defined using SASS.</h6>
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Newtab;
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
$myColor: red;
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $myColor;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,11 +1 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Chrome Extension Boilerplate (with React 16.6+ & Webpack 4+)</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app-container"></div>
|
||||
</body>
|
||||
</html>
|
||||
<div id="app-container"></div>
|
||||
|
|
|
|||
|
|
@ -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(<Newtab />, window.document.querySelector('#app-container'));
|
||||
|
||||
if (module.hot) module.hot.accept();
|
||||
|
|
|
|||
47
src/pages/Popup/Navbar.js
Normal file
47
src/pages/Popup/Navbar.js
Normal file
|
|
@ -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 = () => (
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
boxSizing: 'border-box',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
padding: '8px 10px',
|
||||
backgroundColor: 'var(--navbar)',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={Logo}
|
||||
style={{
|
||||
width: '100px',
|
||||
height: '24px',
|
||||
}}
|
||||
alt="Vytal logo"
|
||||
/>
|
||||
<a
|
||||
href="https://locatejs.com"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
style={{
|
||||
height: '18px',
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={Link}
|
||||
alt="Test Vytal"
|
||||
style={{
|
||||
width: '18px',
|
||||
height: '18px',
|
||||
}}
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default Navbar
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<div className="App">
|
||||
<button type="button" onClick={() => getIP()}>Click Me!</button>
|
||||
<Navbar />
|
||||
<div
|
||||
style={{
|
||||
padding: '10px',
|
||||
}}
|
||||
>
|
||||
<IpSettings />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default Popup;
|
||||
export default Popup
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
62
src/pages/Popup/ipSettings.js
Normal file
62
src/pages/Popup/ipSettings.js
Normal file
|
|
@ -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 (
|
||||
<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
|
||||
Loading…
Add table
Reference in a new issue