diff --git a/icons/logo-black-square.svg b/icons/logo-black-square.svg new file mode 100644 index 0000000..996111e --- /dev/null +++ b/icons/logo-black-square.svg @@ -0,0 +1,97 @@ + + + + + + + + + + + + + Pr + . + + + + + + diff --git a/manifest.json b/manifest.json index 048c123..2b2ad73 100644 --- a/manifest.json +++ b/manifest.json @@ -1,33 +1,35 @@ { - "manifest_version": 2, - "name": "Problematyczne requesty", - "version": "1.0", + "manifest_version": 2, + "name": "Problematyczne requesty", + "version": "1.0", - "description": "", + "description": "", - "sidebar_action": { - "default_title": "ICD", - "default_panel": "sidebar/sidebar.html", - "default_icon": "sidebar_icon.png" - }, - "background": { - "scripts": ["lib/background.js"] - }, - "icons": { - "48": "icons/border-48.png" - }, - "permissions": [ - "proxy", - "storage", - "", - "webRequest", - "webRequestBlocking", - "cookies", - "privacy" - ], - "browser_specific_settings": { - "gecko": { - "id": "problematic-requests@internet-czas-dzialac.pl" + "sidebar_action": { + "default_title": "Problematic requests", + "default_panel": "sidebar/sidebar.html", + "default_icon": "icons/logo-black-square.svg", + "browser_style": true, + "open_at_install": true + }, + "background": { + "scripts": ["lib/background.js"] + }, + "icons": { + "48": "icons/border-48.png" + }, + "permissions": [ + "proxy", + "storage", + "", + "webRequest", + "webRequestBlocking", + "cookies", + "privacy" + ], + "browser_specific_settings": { + "gecko": { + "id": "problematic-requests@internet-czas-dzialac.pl" + } } - } } diff --git a/options.tsx b/options.tsx index 61e0e90..695c921 100644 --- a/options.tsx +++ b/options.tsx @@ -10,6 +10,8 @@ export default function Options({ setCookiesOrOriginOnly, readWarningDataDialog, setReadWarningDataDialog, + logoVisibility, + setLogoVisibility, }: { minValueLength: number; setMinValueLength: (n: number) => void; @@ -19,6 +21,8 @@ export default function Options({ setCookiesOrOriginOnly: (b: boolean) => void; readWarningDataDialog: string; setReadWarningDataDialog: (s: string) => void; + logoVisibility: string; + setLogoVisibility: (s: string) => void; }) { return (
@@ -43,7 +47,24 @@ export default function Options({ className="label-checkbox" htmlFor="readWarningDataDialog" > - Wyświetlaj informację o pozyskiwanych danych + Wyświetlaj komunikat o pozyskiwanych danych + +
+
+ { + setLogoVisibility(e.target.checked ? '1' : '0'); + localStorage.setItem( + 'logoVisibility', + e.target.checked ? '1' : '0' + ); + }} + /> +
diff --git a/report-window/email-template.tsx b/report-window/email-template.tsx index 0a82151..c2bdca5 100644 --- a/report-window/email-template.tsx +++ b/report-window/email-template.tsx @@ -1,33 +1,33 @@ -import React, { useState } from "react"; -import { RequestCluster } from "../request-cluster"; -import { StolenDataEntry } from "../stolen-data-entry"; -import EmailTemplate1 from "./email-template-1"; -import EmailTemplate2 from "./email-template-2"; +import React, { useState } from 'react'; +import { RequestCluster } from '../request-cluster'; +import { StolenDataEntry } from '../stolen-data-entry'; +import EmailTemplate1 from './email-template-1'; +import EmailTemplate2 from './email-template-2'; export default function EmailTemplate({ - entries, - clusters, - version, + entries, + clusters, + version, }: { - entries: StolenDataEntry[]; - clusters: Record; - version: number; + entries: StolenDataEntry[]; + clusters: Record; + version: number; }) { - const [templateVersion, setTemplateVersion] = useState("2"); - return ( -
- - {templateVersion === "1" ? ( - - ) : ( - - )} -
- ); + const [templateVersion, setTemplateVersion] = useState('2'); + return ( +
+ + {templateVersion === '1' ? ( + + ) : ( + + )} +
+ ); } diff --git a/report-window/har-converter.tsx b/report-window/har-converter.tsx index f79e7cb..2829c5c 100644 --- a/report-window/har-converter.tsx +++ b/report-window/har-converter.tsx @@ -1,117 +1,124 @@ -import React, { useEffect, useState } from "react"; -import { HAREntry } from "../extended-request"; -import { StolenDataEntry } from "../stolen-data-entry"; -import { getshorthost, unique } from "../util"; +import React, { useEffect, useState } from 'react'; +import { HAREntry } from '../extended-request'; +import { StolenDataEntry } from '../stolen-data-entry'; +import { getshorthost, unique } from '../util'; function handleNewFile( - element: HTMLInputElement, - entries: StolenDataEntry[], - setFiltered: (Blob) => void + element: HTMLInputElement, + entries: StolenDataEntry[], + setFiltered: (Blob) => void ): void { - const reader = new FileReader(); - reader.addEventListener("load", () => { - const content = JSON.parse(reader.result as string); - content.log.entries = content.log.entries.filter((har_entry: HAREntry) => - entries.some((entry) => entry.matchesHAREntry(har_entry)) - ); - setFiltered( - new Blob([JSON.stringify(content)], { type: "application/json" }) - ); - }); - reader.readAsText(element.files[0]); + const reader = new FileReader(); + reader.addEventListener('load', () => { + const content = JSON.parse(reader.result as string); + content.log.entries = content.log.entries.filter( + (har_entry: HAREntry) => + entries.some((entry) => entry.matchesHAREntry(har_entry)) + ); + setFiltered( + new Blob([JSON.stringify(content)], { type: 'application/json' }) + ); + }); + reader.readAsText(element.files[0]); } function generateFakeHAR(entries: StolenDataEntry[]) { - const requests = unique(entries.map((entry) => entry.request)) - .sort((request1, request2) => { - if (request1.shorthost < request2.shorthost) { - return -1; - } else if (request1.shorthost > request2.shorthost) { - return 1; - } else { - return request2.getBalancedPriority() - request1.getBalancedPriority(); - } - }) - .filter((_, index, array) => { - if (index == 0) return true; - if (array[index].shorthost == array[index - 1].shorthost) { - return false; - } - return true; - }) - .sort( - (entry1, entry2) => - entry2.getBalancedPriority() - entry1.getBalancedPriority() - ); + const requests = unique(entries.map((entry) => entry.request)) + .sort((request1, request2) => { + if (request1.shorthost < request2.shorthost) { + return -1; + } else if (request1.shorthost > request2.shorthost) { + return 1; + } else { + return ( + request2.getBalancedPriority() - + request1.getBalancedPriority() + ); + } + }) + .filter((_, index, array) => { + if (index == 0) return true; + if (array[index].shorthost == array[index - 1].shorthost) { + return false; + } + return true; + }) + .sort( + (entry1, entry2) => + entry2.getBalancedPriority() - entry1.getBalancedPriority() + ); - return { - log: { - version: "1.2", - creator: { - name: "Firefox", - version: "94.0", - }, - browser: { - name: "Firefox", - version: "94.0", - }, - pages: [ - { - startedDateTime: "2021-11-08T20:27:23.195+01:00", - id: "page_1", - title: "HAR DUmp", - pageTimings: { - onContentLoad: 467, - onLoad: 4226, - }, + return { + log: { + version: '1.2', + creator: { + name: 'Firefox', + version: '94.0', + }, + browser: { + name: 'Firefox', + version: '94.0', + }, + pages: [ + { + startedDateTime: '2021-11-08T20:27:23.195+01:00', + id: 'page_1', + title: 'HAR DUmp', + pageTimings: { + onContentLoad: 467, + onLoad: 4226, + }, + }, + ], + entries: requests.map((r) => r.toHAR()), }, - ], - entries: requests.map((r) => r.toHAR()), - }, - }; + }; } export default function HARConverter({ - entries, + entries, }: { - entries: StolenDataEntry[]; + entries: StolenDataEntry[]; }) { - const [filtered, setFiltered] = useState(null); - const [filename, setFilename] = useState(""); - const [fakeHAR, setFakeHAR] = useState>(); - useEffect(() => { - setFakeHAR(generateFakeHAR(entries)); - }, []); + const [filtered, setFiltered] = useState(null); + const [filename, setFilename] = useState(''); + const [fakeHAR, setFakeHAR] = + useState>(); + useEffect(() => { + setFakeHAR(generateFakeHAR(entries)); + }, []); - return ( -
- { - setFilename(e.target.files[0].name); - handleNewFile(e.target, entries, setFiltered); - }} - /> - {(filtered && ( - - Pobierz wyfiltrowany HAR - - )) || - null} - - Pobierz "zfałszowany" HAR - -
- ); + return ( +
+ { + setFilename(e.target.files[0].name); + handleNewFile(e.target, entries, setFiltered); + }} + /> + {(filtered && ( + + Pobierz wyfiltrowany HAR + + )) || + null} + + Pobierz "zredukowany" HAR + +
+ ); } diff --git a/sidebar/global.scss b/sidebar/global.scss index 405ac44..3f2fc06 100644 --- a/sidebar/global.scss +++ b/sidebar/global.scss @@ -47,7 +47,7 @@ select { #app { user-select: text; - padding: 0rem 1rem; + padding: 0rem 0.75rem; display: flex; flex-flow: column; justify-content: flex-start; diff --git a/sidebar/sidebar.scss b/sidebar/sidebar.scss index c839db6..4a4c089 100644 --- a/sidebar/sidebar.scss +++ b/sidebar/sidebar.scss @@ -3,8 +3,9 @@ .sidebar { .header { display: grid; - grid-template-columns: 8rem 1fr 1rem; - max-height: 4rem; + grid-template-columns: 6.67rem 1fr 1rem; + align-items: flex-start; + max-height: 3.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid $light-grey; diff --git a/sidebar/sidebar.tsx b/sidebar/sidebar.tsx index aed7ec8..e06f8ed 100644 --- a/sidebar/sidebar.tsx +++ b/sidebar/sidebar.tsx @@ -34,6 +34,9 @@ const Sidebar = () => { const [readWarningDataDialog, setReadWarningDataDialog] = useState< string | null >(localStorage.getItem('readWarningDataDialog')); + const [logoVisibility, setLogoVisibility] = useState( + localStorage.getItem('setLogoVisibility') + ); useEffect(() => { const listener = async (data: any) => { @@ -76,13 +79,19 @@ const Sidebar = () => {
- Analiza strony - - {origin} - + {origin ? ( + + Analiza strony + + {origin} + + + ) : ( + Przejdź do wybranej strony internetowej + )}
{stolenDataView ? ( @@ -199,6 +208,8 @@ const Sidebar = () => { setCookiesOrOriginOnly={setCookiesOrOriginOnly} readWarningDataDialog={readWarningDataDialog} setReadWarningDataDialog={setReadWarningDataDialog} + logoVisibility={logoVisibility} + setLogoVisibility={setLogoVisibility} /> )} diff --git a/sidebar/tab-dropdown.tsx b/sidebar/tab-dropdown.tsx index 843e5fd..4811a0f 100644 --- a/sidebar/tab-dropdown.tsx +++ b/sidebar/tab-dropdown.tsx @@ -1,30 +1,30 @@ -import React from "react"; -import { useEffect, useState } from "react"; +import React from 'react'; +import { useEffect, useState } from 'react'; export default function TabDropdown({ - setPickedTab, - pickedTab, + setPickedTab, + pickedTab, }: { - setPickedTab: (tab_id: number) => void; - pickedTab: number; + setPickedTab: (tab_id: number) => void; + pickedTab: number; }) { - const [tabs, setTabs] = useState([]); - useEffect(() => { - browser.tabs.query({ currentWindow: true }).then(setTabs); - }, []); - return ( - - ); + const [tabs, setTabs] = useState([]); + useEffect(() => { + browser.tabs.query({ currentWindow: true }).then(setTabs); + }, []); + return ( + + ); }