diff --git a/public/manifest.json b/public/manifest.json index f31190c..69f0b92 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -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 } } diff --git a/public/options.css b/public/options.css new file mode 100644 index 0000000..09d1cb4 --- /dev/null +++ b/public/options.css @@ -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; +} \ No newline at end of file diff --git a/public/options.html b/public/options.html new file mode 100644 index 0000000..6d23b4a --- /dev/null +++ b/public/options.html @@ -0,0 +1,16 @@ + + + + + + + +
+ + +
+
Github: https://github.com/z0ccc/vytal-extension
+ + + + \ No newline at end of file diff --git a/public/options.js b/public/options.js new file mode 100644 index 0000000..004ac64 --- /dev/null +++ b/public/options.js @@ -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 }); + }); + } +}; diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 8069dca..ba76688 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -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 = () => (
@@ -10,11 +14,18 @@ const Navbar = () => (
- - - - + +
); diff --git a/src/components/TableWrap.js b/src/components/TableWrap.js index 88736fc..c9d4e53 100644 --- a/src/components/TableWrap.js +++ b/src/components/TableWrap.js @@ -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), }, diff --git a/src/components/popup.js b/src/components/popup.js index 5741818..7367601 100644 --- a/src/components/popup.js +++ b/src/components/popup.js @@ -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(, mountNode); diff --git a/src/styles/App.css b/src/styles/App.css index f2e93b3..d5ec2b9 100644 --- a/src/styles/App.css +++ b/src/styles/App.css @@ -18,11 +18,12 @@ body { overflow: overlay } -a { +.navIcon { color: var(--icon); + cursor: pointer; } -a:hover { +.navIcon:hover { color: var( --main); } diff --git a/src/styles/popup.css b/src/styles/popup.css deleted file mode 100644 index e69de29..0000000