me/vytal-redux
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added profile options

Browse source
This commit is contained in:
z0ccc 2022-05-06 13:01:20 -04:00
parent cf406dac30
commit 5beece744d
8 changed files with 166 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/pages/Background/index.js
View file

@ -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)
}
}
)
}

72
src/pages/Popup/DebugSettings.js
View file

@ -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) {
chrome.storage.sync.get([type, matchIPStorage], (result) => {
result[matchIPStorage] && setMatchIP(result[matchIPStorage])
if (result[matchIPStorage]) {
setValue(ip[type])
chrome.storage.sync.set({ [type]: ip[type] })
} else if (result[type]) {
setValue(result[type])
}
if (profile === 'match') {
console.log(ip)
if (ip) {
setValue(ip[type])
chrome.storage.sync.set({ [type]: ip[type] })
}
} else if (profile === 'custom') {
console.log(111)
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({ [matchIPStorage]: !matchIP })
setMatchIP(!matchIP)
}
// detachDebugger()
}
const toggleMatchIP = (e) => {
chrome.storage.sync.set({
[type]: ip[type],
[matchIPStorage]: !matchIP,
})
!matchIP && setValue(ip[type])
setMatchIP(e.target.checked)
chrome.storage.sync.set({ profile: 'custom' })
setProfile('custom')
}
return (
@ -48,22 +37,19 @@ const DebugSettings = ({ type, title, ip }) => {
margin: '12px 0 0 0',
}}
>
<label>
<input
type="text"
value={value}
onChange={changeTextValue}
style={{
width: '120px',
margin: '0 5px 0 0',
}}
/>
{title}
</label>
<label>
<input
type="text"
value={value}
onChange={changeTextValue}
style={{
width: '168px',
}}
/>
<label>{title}</label>
{/* <label>
<input type="checkbox" checked={matchIP} onChange={toggleMatchIP} />
Match IP
</label>
</label> */}
</div>
)
}

2
src/pages/Popup/LocaleSettings.js
View file

@ -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) => {

94
src/pages/Popup/Popup.jsx
View file

@ -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} />
<DebugSettings type="lat" title="Latitude" ip={ip} />
<DebugSettings type="lon" title="Longitude" ip={ip} />
<LocaleSettings ip={ip} />
<div
style={{
display: 'flex',
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={{

21
src/pages/Popup/UserAgentSettings.js
View file

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

2
src/pages/Popup/index.css
View file

@ -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;

11
src/utils/profiles.js Normal file
View file

@ -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

24
webpack.config.js
View file

@ -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');
var { CleanWebpackPlugin } = require('clean-webpack-plugin');
TerserPlugin = require('terser-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