Merge branch 'dev'
This commit is contained in:
z0ccc
commit
8e5791dd45
9 changed files with 119 additions and 17 deletions
|
|
@ -3,7 +3,7 @@
|
|||
"description": "Vytal",
|
||||
"manifest_version": 3,
|
||||
"version": "1.0.0",
|
||||
"permissions": [],
|
||||
"permissions": ["storage"],
|
||||
"icons": {
|
||||
"16": "icon_16.png",
|
||||
"32": "icon_32.png",
|
||||
|
|
@ -18,5 +18,9 @@
|
|||
"48": "icon_48.png",
|
||||
"128": "icon_128.png"
|
||||
}
|
||||
},
|
||||
"options_ui": {
|
||||
"page": "options.html",
|
||||
"open_in_tab": false
|
||||
}
|
||||
}
|
||||
|
|
|
|||
14
public/options.css
Normal file
14
public/options.css
Normal 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
16
public/options.html
Normal 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
12
public/options.js
Normal 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 });
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
@ -3,6 +3,10 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|||
import { faExternalLinkAlt, faCog } from '@fortawesome/free-solid-svg-icons';
|
||||
import Logo from '../images/logo.svg';
|
||||
|
||||
const openOptions = () => {
|
||||
chrome.runtime.openOptionsPage();
|
||||
};
|
||||
|
||||
const Navbar = () => (
|
||||
<div className="navbar">
|
||||
<div className="logo">
|
||||
|
|
@ -10,11 +14,18 @@ const Navbar = () => (
|
|||
</div>
|
||||
<div className="menu">
|
||||
<a href="https://vytal.io" target="_blank" rel="noreferrer">
|
||||
<FontAwesomeIcon icon={faExternalLinkAlt} size="lg" />
|
||||
</a>
|
||||
<a href="url" target="_blank">
|
||||
<FontAwesomeIcon icon={faCog} size="lg" />
|
||||
<FontAwesomeIcon
|
||||
icon={faExternalLinkAlt}
|
||||
size="lg"
|
||||
className="navIcon"
|
||||
/>
|
||||
</a>
|
||||
<FontAwesomeIcon
|
||||
icon={faCog}
|
||||
size="lg"
|
||||
className="navIcon"
|
||||
onClick={openOptions}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -13,17 +13,28 @@ const sortArr = (arr) => {
|
|||
return list;
|
||||
};
|
||||
|
||||
const TableWrap = () => {
|
||||
const uaResult = Bowser.parse(navigator.userAgent);
|
||||
const date = new Date();
|
||||
const pluginsLength = navigator.plugins.length;
|
||||
const sortPlugins = (data) => {
|
||||
const length = data.length;
|
||||
|
||||
let pluginList = '';
|
||||
for (let i = 0; i < pluginsLength; i++) {
|
||||
if (i !== 0) pluginList += ', ';
|
||||
pluginList += navigator.plugins[i].name;
|
||||
let list = '';
|
||||
for (let i = 0; i < length; i++) {
|
||||
if (i !== 0) list += ', ';
|
||||
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 [batStatus, setBatStatus] = useState('');
|
||||
|
||||
|
|
@ -37,116 +48,150 @@ const TableWrap = () => {
|
|||
setBatLevel('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 ext = gl.getExtension('WEBGL_debug_renderer_info');
|
||||
|
||||
const software = [
|
||||
{
|
||||
key: 'browser',
|
||||
title: 'Browser',
|
||||
value: uaResult.browser.name,
|
||||
},
|
||||
{
|
||||
key: 'browserVersion',
|
||||
title: 'Browser version',
|
||||
value: uaResult.browser.version,
|
||||
},
|
||||
{
|
||||
key: 'browserEngine',
|
||||
title: 'Browser engine',
|
||||
value: uaResult.browser.engine || 'N/A',
|
||||
},
|
||||
{
|
||||
key: 'os',
|
||||
title: 'OS',
|
||||
value: `${uaResult.os.name} ${uaResult.os.versionName}`,
|
||||
},
|
||||
{
|
||||
key: 'osVersion',
|
||||
title: 'OS version',
|
||||
value: uaResult.os.version,
|
||||
},
|
||||
{
|
||||
key: 'platform',
|
||||
title: 'Platform',
|
||||
value: navigator.platform,
|
||||
},
|
||||
{
|
||||
key: 'systemType',
|
||||
title: 'System type',
|
||||
value: uaResult.platform.type,
|
||||
},
|
||||
{
|
||||
key: 'userAgent',
|
||||
title: 'User Agent',
|
||||
value: navigator.userAgent || 'N/A',
|
||||
},
|
||||
{
|
||||
key: 'preferredLanguage',
|
||||
title: 'Preferred language',
|
||||
value: navigator.language || 'N/A',
|
||||
},
|
||||
{
|
||||
key: 'languages',
|
||||
title: 'Languages',
|
||||
value: sortArr(navigator.languages) || 'N/A',
|
||||
},
|
||||
{
|
||||
key: 'timezone',
|
||||
title: 'Timezone',
|
||||
value: Intl.DateTimeFormat().resolvedOptions().timeZone || 'N/A',
|
||||
},
|
||||
{
|
||||
key: 'timezoneOffset',
|
||||
title: 'Timezone offset',
|
||||
value: date.getTimezoneOffset() || 'N/A',
|
||||
},
|
||||
{
|
||||
key: 'cookiesEnabled',
|
||||
title: 'Cookies enabled',
|
||||
value: navigator.cookieEnabled ? 'True' : 'False',
|
||||
},
|
||||
{
|
||||
key: 'javaEnabled',
|
||||
title: 'Java enabled',
|
||||
value: navigator.javaEnabled() ? 'True' : 'False',
|
||||
},
|
||||
{
|
||||
key: 'dntHeader',
|
||||
title: 'DNT header enabled',
|
||||
value: navigator.doNotTrack ? 'True' : 'False',
|
||||
},
|
||||
{
|
||||
key: 'automatedBrowser',
|
||||
title: 'Automated browser',
|
||||
value: navigator.webdriver ? 'True' : 'False',
|
||||
},
|
||||
{
|
||||
key: 'plugins',
|
||||
title: 'Plugins',
|
||||
value: pluginList || 'N/A',
|
||||
value: sortPlugins(navigator.plugins) || 'N/A',
|
||||
},
|
||||
];
|
||||
|
||||
const hardware = [
|
||||
{
|
||||
key: 'screenResolution',
|
||||
title: 'Screen resolution',
|
||||
value: `${window.screen.width}x${window.screen.height}`,
|
||||
},
|
||||
{
|
||||
key: 'colorResolution',
|
||||
title: 'Color Resolution',
|
||||
value: window.screen.colorDepth,
|
||||
},
|
||||
{
|
||||
key: 'batteryLevel',
|
||||
title: 'Battery level',
|
||||
value: batLevel,
|
||||
},
|
||||
{
|
||||
key: 'batteryStatus',
|
||||
title: 'Battery status',
|
||||
value: batStatus,
|
||||
},
|
||||
{
|
||||
key: 'deviceMemory',
|
||||
title: 'Device memory',
|
||||
value: navigator.deviceMemory ? `${navigator.deviceMemory}GB` : 'N/A',
|
||||
},
|
||||
{
|
||||
key: 'cpuCores',
|
||||
title: '# of CPU cores',
|
||||
value: navigator.hardwareConcurrency || 'N/A',
|
||||
},
|
||||
{
|
||||
key: 'maxTouchpoints',
|
||||
title: 'Max touchpoints',
|
||||
value: navigator.maxTouchPoints,
|
||||
},
|
||||
{
|
||||
key: 'webGLVendor',
|
||||
title: 'WebGL vendor',
|
||||
value: gl.getParameter(ext.UNMASKED_VENDOR_WEBGL),
|
||||
},
|
||||
{
|
||||
key: 'webglRenderer',
|
||||
title: 'WebGL renderer',
|
||||
value: gl.getParameter(ext.UNMASKED_RENDERER_WEBGL),
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import * as React from 'react';
|
|||
import * as ReactDOM from 'react-dom';
|
||||
|
||||
import App from './App';
|
||||
import '../styles/popup.css';
|
||||
|
||||
const mountNode = document.getElementById('popup');
|
||||
ReactDOM.render(<App />, mountNode);
|
||||
|
|
|
|||
|
|
@ -18,11 +18,12 @@ body {
|
|||
overflow: overlay
|
||||
}
|
||||
|
||||
a {
|
||||
.navIcon {
|
||||
color: var(--icon);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
.navIcon:hover {
|
||||
color: var( --main);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue