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

Merge branch 'dev'

Browse source
This commit is contained in:
z0ccc 2021-06-27 00:34:46 -04:00
commit 8e5791dd45
9 changed files with 119 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
public/manifest.json
View file

@ -3,7 +3,7 @@
"description": "Vytal", "description": "Vytal",
"manifest_version": 3, "manifest_version": 3,
"version": "1.0.0", "version": "1.0.0",
"permissions": [], "permissions": ["storage"],
"icons": { "icons": {
"16": "icon_16.png", "16": "icon_16.png",
"32": "icon_32.png", "32": "icon_32.png",
@ -18,5 +18,9 @@
"48": "icon_48.png", "48": "icon_48.png",
"128": "icon_128.png" "128": "icon_128.png"
} }
},
"options_ui": {
"page": "options.html",
"open_in_tab": false
} }
} }

14
public/options.css Normal file
View file

@ -0,0 +1,14 @@
.checkBoxWrap {
display: flex;
align-items: center;
margin: 0 0 12px 0;
}
a {
color: #0079d3;
text-decoration: none;
}
.optionText {
margin: 3px 3px 3px 4px;
}

16
public/options.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="options.css" />
<meta charset="utf-8" />
</head>
<body>
<div class="checkBoxWrap">
<input type="checkbox" id="sendData" name="sendData"/>
<label for="sendData">Do not send anonymous data that improves fingerprint accuracy</label>
</div>
<div class="optionText">Github: <a target="_blank" href="https://github.com/z0ccc/vytal-extension">https://github.com/z0ccc/vytal-extension</a></div>
</body>
</body>
<script src="options.js"></script>
</html>

12
public/options.js Normal file
View file

@ -0,0 +1,12 @@
chrome.storage.sync.get('sendData', ({ sendData }) => {
document.getElementById('sendData').checked = sendData;
});
window.onchange = function change(event) {
if (event.target.matches('#sendData')) {
chrome.storage.sync.get('sendData', ({ sendData }) => {
const value = !sendData;
chrome.storage.sync.set({ sendData: value });
});
}
};

19
src/components/Navbar.js
View file

@ -3,6 +3,10 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faExternalLinkAlt, faCog } from '@fortawesome/free-solid-svg-icons'; import { faExternalLinkAlt, faCog } from '@fortawesome/free-solid-svg-icons';
import Logo from '../images/logo.svg'; import Logo from '../images/logo.svg';
const openOptions = () => {
chrome.runtime.openOptionsPage();
};
const Navbar = () => ( const Navbar = () => (
<div className="navbar"> <div className="navbar">
<div className="logo"> <div className="logo">
@ -10,11 +14,18 @@ const Navbar = () => (
</div> </div>
<div className="menu"> <div className="menu">
<a href="https://vytal.io" target="_blank" rel="noreferrer"> <a href="https://vytal.io" target="_blank" rel="noreferrer">
<FontAwesomeIcon icon={faExternalLinkAlt} size="lg" /> <FontAwesomeIcon
</a> icon={faExternalLinkAlt}
<a href="url" target="_blank"> size="lg"
<FontAwesomeIcon icon={faCog} size="lg" /> className="navIcon"
/>
</a> </a>
<FontAwesomeIcon
icon={faCog}
size="lg"
className="navIcon"
onClick={openOptions}
/>
</div> </div>
</div> </div>
); );

63
src/components/TableWrap.js
View file

@ -13,17 +13,28 @@ const sortArr = (arr) => {
return list; return list;
}; };
const TableWrap = () => { const sortPlugins = (data) => {
const uaResult = Bowser.parse(navigator.userAgent); const length = data.length;
const date = new Date();
const pluginsLength = navigator.plugins.length;
let pluginList = ''; let list = '';
for (let i = 0; i < pluginsLength; i++) { for (let i = 0; i < length; i++) {
if (i !== 0) pluginList += ', '; if (i !== 0) list += ', ';
pluginList += navigator.plugins[i].name; list += data[i].name;
} }
return list;
};
const fetchData = (data) => {
fetch('http://localhost:8000/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});
};
const TableWrap = () => {
const [batLevel, setBatLevel] = useState(''); const [batLevel, setBatLevel] = useState('');
const [batStatus, setBatStatus] = useState(''); const [batStatus, setBatStatus] = useState('');
@ -37,116 +48,150 @@ const TableWrap = () => {
setBatLevel('N/A'); setBatLevel('N/A');
setBatStatus('N/A'); setBatStatus('N/A');
} }
chrome.storage.sync.get('sendData', ({ sendData }) => {
if (!sendData) {
fetchData(software.concat(hardware));
}
});
}, []); }, []);
const uaResult = Bowser.parse(navigator.userAgent);
const date = new Date();
const gl = document.createElement('canvas').getContext('webgl'); const gl = document.createElement('canvas').getContext('webgl');
const ext = gl.getExtension('WEBGL_debug_renderer_info'); const ext = gl.getExtension('WEBGL_debug_renderer_info');
const software = [ const software = [
{ {
key: 'browser',
title: 'Browser', title: 'Browser',
value: uaResult.browser.name, value: uaResult.browser.name,
}, },
{ {
key: 'browserVersion',
title: 'Browser version', title: 'Browser version',
value: uaResult.browser.version, value: uaResult.browser.version,
}, },
{ {
key: 'browserEngine',
title: 'Browser engine', title: 'Browser engine',
value: uaResult.browser.engine || 'N/A', value: uaResult.browser.engine || 'N/A',
}, },
{ {
key: 'os',
title: 'OS', title: 'OS',
value: `${uaResult.os.name} ${uaResult.os.versionName}`, value: `${uaResult.os.name} ${uaResult.os.versionName}`,
}, },
{ {
key: 'osVersion',
title: 'OS version', title: 'OS version',
value: uaResult.os.version, value: uaResult.os.version,
}, },
{ {
key: 'platform',
title: 'Platform', title: 'Platform',
value: navigator.platform, value: navigator.platform,
}, },
{ {
key: 'systemType',
title: 'System type', title: 'System type',
value: uaResult.platform.type, value: uaResult.platform.type,
}, },
{ {
key: 'userAgent',
title: 'User Agent', title: 'User Agent',
value: navigator.userAgent || 'N/A', value: navigator.userAgent || 'N/A',
}, },
{ {
key: 'preferredLanguage',
title: 'Preferred language', title: 'Preferred language',
value: navigator.language || 'N/A', value: navigator.language || 'N/A',
}, },
{ {
key: 'languages',
title: 'Languages', title: 'Languages',
value: sortArr(navigator.languages) || 'N/A', value: sortArr(navigator.languages) || 'N/A',
}, },
{ {
key: 'timezone',
title: 'Timezone', title: 'Timezone',
value: Intl.DateTimeFormat().resolvedOptions().timeZone || 'N/A', value: Intl.DateTimeFormat().resolvedOptions().timeZone || 'N/A',
}, },
{ {
key: 'timezoneOffset',
title: 'Timezone offset', title: 'Timezone offset',
value: date.getTimezoneOffset() || 'N/A', value: date.getTimezoneOffset() || 'N/A',
}, },
{ {
key: 'cookiesEnabled',
title: 'Cookies enabled', title: 'Cookies enabled',
value: navigator.cookieEnabled ? 'True' : 'False', value: navigator.cookieEnabled ? 'True' : 'False',
}, },
{ {
key: 'javaEnabled',
title: 'Java enabled', title: 'Java enabled',
value: navigator.javaEnabled() ? 'True' : 'False', value: navigator.javaEnabled() ? 'True' : 'False',
}, },
{ {
key: 'dntHeader',
title: 'DNT header enabled', title: 'DNT header enabled',
value: navigator.doNotTrack ? 'True' : 'False', value: navigator.doNotTrack ? 'True' : 'False',
}, },
{ {
key: 'automatedBrowser',
title: 'Automated browser', title: 'Automated browser',
value: navigator.webdriver ? 'True' : 'False', value: navigator.webdriver ? 'True' : 'False',
}, },
{ {
key: 'plugins',
title: 'Plugins', title: 'Plugins',
value: pluginList || 'N/A', value: sortPlugins(navigator.plugins) || 'N/A',
}, },
]; ];
const hardware = [ const hardware = [
{ {
key: 'screenResolution',
title: 'Screen resolution', title: 'Screen resolution',
value: `${window.screen.width}x${window.screen.height}`, value: `${window.screen.width}x${window.screen.height}`,
}, },
{ {
key: 'colorResolution',
title: 'Color Resolution', title: 'Color Resolution',
value: window.screen.colorDepth, value: window.screen.colorDepth,
}, },
{ {
key: 'batteryLevel',
title: 'Battery level', title: 'Battery level',
value: batLevel, value: batLevel,
}, },
{ {
key: 'batteryStatus',
title: 'Battery status', title: 'Battery status',
value: batStatus, value: batStatus,
}, },
{ {
key: 'deviceMemory',
title: 'Device memory', title: 'Device memory',
value: navigator.deviceMemory ? `${navigator.deviceMemory}GB` : 'N/A', value: navigator.deviceMemory ? `${navigator.deviceMemory}GB` : 'N/A',
}, },
{ {
key: 'cpuCores',
title: '# of CPU cores', title: '# of CPU cores',
value: navigator.hardwareConcurrency || 'N/A', value: navigator.hardwareConcurrency || 'N/A',
}, },
{ {
key: 'maxTouchpoints',
title: 'Max touchpoints', title: 'Max touchpoints',
value: navigator.maxTouchPoints, value: navigator.maxTouchPoints,
}, },
{ {
key: 'webGLVendor',
title: 'WebGL vendor', title: 'WebGL vendor',
value: gl.getParameter(ext.UNMASKED_VENDOR_WEBGL), value: gl.getParameter(ext.UNMASKED_VENDOR_WEBGL),
}, },
{ {
key: 'webglRenderer',
title: 'WebGL renderer', title: 'WebGL renderer',
value: gl.getParameter(ext.UNMASKED_RENDERER_WEBGL), value: gl.getParameter(ext.UNMASKED_RENDERER_WEBGL),
}, },

1
src/components/popup.js
View file

@ -2,7 +2,6 @@ import * as React from 'react';
import * as ReactDOM from 'react-dom'; import * as ReactDOM from 'react-dom';
import App from './App'; import App from './App';
import '../styles/popup.css';
const mountNode = document.getElementById('popup'); const mountNode = document.getElementById('popup');
ReactDOM.render(<App />, mountNode); ReactDOM.render(<App />, mountNode);

5
src/styles/App.css
View file

@ -18,11 +18,12 @@ body {
overflow: overlay overflow: overlay
} }
a { .navIcon {
color: var(--icon); color: var(--icon);
cursor: pointer;
} }
a:hover { .navIcon:hover {
color: var( --main); color: var( --main);
} }

0
src/styles/popup.css
View file