Prettier

icons/logo-black-square.svg

@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="2048"
+   height="2048"
+   viewBox="0 0 541.86667 541.86667"
+   version="1.1"
+   id="svg2399"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)"
+   sodipodi:docname="logo-black-square.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview2401"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     units="px"
+     lock-margins="true"
+     inkscape:zoom="0.083628825"
+     inkscape:cx="-131.53359"
+     inkscape:cy="2845.9087"
+     inkscape:window-width="1920"
+     inkscape:window-height="1024"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g5214-0-20-3-1-92" />
+  <defs
+     id="defs2396" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(195.39804,196.97992)">
+    <g
+       id="g2559">
+      <rect
+         y="-196.9799"
+         x="-195.39803"
+         height="541.86664"
+         width="541.86664"
+         id="rect5174-5-2-1-8-9"
+         style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:89.9968;stroke-opacity:1"
+         inkscape:export-xdpi="562.5"
+         inkscape:export-ydpi="562.5" />
+      <g
+         id="g5216-6-9-9-2-87"
+         transform="matrix(25.209725,0,0,25.209725,-5013.7768,-42754.638)"
+         style="fill:#ffffff;fill-opacity:1">
+        <g
+           id="g5214-0-20-3-1-92"
+           transform="translate(-146.29537,198.647)"
+           style="fill:#ffffff;fill-opacity:1">
+          <g
+             id="g17009"
+             transform="matrix(1.0494588,0,0,1.0494588,-16.219745,-80.475607)">
+            <text
+               xml:space="preserve"
+               style="font-size:13.4678px;line-height:1.25;font-family:Poppins;-inkscape-font-specification:Poppins;word-spacing:0px;stroke-width:0.0935269"
+               x="338.93002"
+               y="1510.9918"
+               id="text3426"><tspan
+                 sodipodi:role="line"
+                 id="tspan3424"
+                 style="font-style:italic;font-variant:normal;font-weight:900;font-stretch:normal;font-size:13.4678px;font-family:Poppins;-inkscape-font-specification:'Poppins Heavy Italic';stroke-width:0.0935269"
+                 x="338.93002"
+                 y="1510.9918">Pr</tspan></text>
+            <text
+               xml:space="preserve"
+               style="font-size:13.4678px;line-height:1.25;font-family:Poppins;-inkscape-font-specification:Poppins;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke-width:0.0935269"
+               x="352.05331"
+               y="1510.884"
+               id="text3426-3"><tspan
+                 sodipodi:role="line"
+                 id="tspan3424-6"
+                 style="font-style:italic;font-variant:normal;font-weight:900;font-stretch:normal;font-size:13.4678px;font-family:Poppins;-inkscape-font-specification:'Poppins Heavy Italic';stroke-width:0.0935269"
+                 x="352.05331"
+                 y="1510.884">.</tspan></text>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

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",
-    "<all_urls>",
-    "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",
+        "<all_urls>",
+        "webRequest",
+        "webRequestBlocking",
+        "cookies",
+        "privacy"
+    ],
+    "browser_specific_settings": {
+        "gecko": {
+            "id": "problematic-requests@internet-czas-dzialac.pl"
+        }
     }
-  }
 }

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 (
         <div className="options-container">
@@ -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
+                    </label>
+                </div>
+                <div className="input-container">
+                    <input
+                        type="checkbox"
+                        id="logoVisibility"
+                        checked={logoVisibility != '0'}
+                        onChange={(e) => {
+                            setLogoVisibility(e.target.checked ? '1' : '0');
+                            localStorage.setItem(
+                                'logoVisibility',
+                                e.target.checked ? '1' : '0'
+                            );
+                        }}
+                    />
+                    <label className="label-checkbox" htmlFor="logoVisibility">
+                        Wyświetlaj logo <i>Internet. Czas działać!</i>
                     </label>
                 </div>
             </fieldset>

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<string, RequestCluster>;
-  version: number;
+    entries: StolenDataEntry[];
+    clusters: Record<string, RequestCluster>;
+    version: number;
 }) {
-  const [templateVersion, setTemplateVersion] = useState("2");
-  return (
-    <div>
-      <select
-        value={templateVersion}
-        onChange={(e) => setTemplateVersion(e.target.value)}
-      >
-        <option value="1">wersja 1</option>
-        <option value="2">wersja 2</option>
-      </select>
-      {templateVersion === "1" ? (
-        <EmailTemplate1 {...{ entries, clusters, version }} />
-      ) : (
-        <EmailTemplate2 {...{ entries, clusters, version }} />
-      )}
-    </div>
-  );
+    const [templateVersion, setTemplateVersion] = useState('2');
+    return (
+        <div>
+            <select
+                value={templateVersion}
+                onChange={(e) => setTemplateVersion(e.target.value)}
+            >
+                <option value="1">wersja 1</option>
+                <option value="2">wersja 2</option>
+            </select>
+            {templateVersion === '1' ? (
+                <EmailTemplate1 {...{ entries, clusters, version }} />
+            ) : (
+                <EmailTemplate2 {...{ entries, clusters, version }} />
+            )}
+        </div>
+    );
 }

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<Blob | null>(null);
-  const [filename, setFilename] = useState("");
-  const [fakeHAR, setFakeHAR] = useState<ReturnType<typeof generateFakeHAR>>();
-  useEffect(() => {
-    setFakeHAR(generateFakeHAR(entries));
-  }, []);
+    const [filtered, setFiltered] = useState<Blob | null>(null);
+    const [filename, setFilename] = useState('');
+    const [fakeHAR, setFakeHAR] =
+        useState<ReturnType<typeof generateFakeHAR>>();
+    useEffect(() => {
+        setFakeHAR(generateFakeHAR(entries));
+    }, []);
 
-  return (
-    <div>
-      <input
-        type="file"
-        accept=".har"
-        onChange={(e) => {
-          setFilename(e.target.files[0].name);
-          handleNewFile(e.target, entries, setFiltered);
-        }}
-      />
-      {(filtered && (
-        <a
-          href={URL.createObjectURL(filtered)}
-          download={filename.replace(".har", "-filtered.har")}
-        >
-          Pobierz wyfiltrowany HAR
-        </a>
-      )) ||
-        null}
-      <a
-        href={URL.createObjectURL(
-          new Blob([JSON.stringify(fakeHAR)], { type: "application/json" })
-        )}
-        download={`${getshorthost(
-          entries[0].request.originalURL
-        )}-${new Date().toJSON()}-trimmed.har`}
-      >
-        Pobierz "zfałszowany" HAR
-      </a>
-    </div>
-  );
+    return (
+        <div>
+            <input
+                type="file"
+                accept=".har"
+                onChange={(e) => {
+                    setFilename(e.target.files[0].name);
+                    handleNewFile(e.target, entries, setFiltered);
+                }}
+            />
+            {(filtered && (
+                <a
+                    href={URL.createObjectURL(filtered)}
+                    download={filename.replace('.har', '-filtered.har')}
+                >
+                    Pobierz wyfiltrowany HAR
+                </a>
+            )) ||
+                null}
+            <a
+                href={URL.createObjectURL(
+                    new Blob([JSON.stringify(fakeHAR)], {
+                        type: 'application/json',
+                    })
+                )}
+                download={`${getshorthost(
+                    entries[0].request.originalURL
+                )}-${new Date().toJSON()}-trimmed.har`}
+            >
+                Pobierz "zredukowany" HAR
+            </a>
+        </div>
+    );
 }

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;

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;

sidebar/sidebar.tsx

@@ -34,6 +34,9 @@ const Sidebar = () => {
     const [readWarningDataDialog, setReadWarningDataDialog] = useState<
         string | null
     >(localStorage.getItem('readWarningDataDialog'));
+    const [logoVisibility, setLogoVisibility] = useState<string | null>(
+        localStorage.getItem('setLogoVisibility')
+    );
 
     useEffect(() => {
         const listener = async (data: any) => {
@@ -76,13 +79,19 @@ const Sidebar = () => {
             <header className="header">
                 <img
                     src="../assets/logo-internet-czas-dzialac.svg"
-                    height={48}
+                    height={40}
                 ></img>
                 <div className="webpage-metadata">
-                    <span>Analiza strony</span>
-                    <span className="webpage-metadata--hyperlink">
-                        {origin}
-                    </span>
+                    {origin ? (
+                        <Fragment>
+                            <span>Analiza strony</span>
+                            <span className="webpage-metadata--hyperlink">
+                                {origin}
+                            </span>
+                        </Fragment>
+                    ) : (
+                        <span>Przejdź do wybranej strony internetowej</span>
+                    )}
                 </div>
                 {stolenDataView ? (
                     <a href="https://internet-czas-dzialac.pl">
@@ -199,6 +208,8 @@ const Sidebar = () => {
                         setCookiesOrOriginOnly={setCookiesOrOriginOnly}
                         readWarningDataDialog={readWarningDataDialog}
                         setReadWarningDataDialog={setReadWarningDataDialog}
+                        logoVisibility={logoVisibility}
+                        setLogoVisibility={setLogoVisibility}
                     />
                 )}
             </section>

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 (
-    <select
-      id="tab_dropdown"
-      value={pickedTab}
-      onChange={async (e) => {
-        setPickedTab(parseInt(e.target.value));
-      }}
-    >
-      {tabs.map((tab) => (
-        <option value={tab.id} key={tab.id}>
-          {tab.title}
-        </option>
-      ))}
-    </select>
-  );
+    const [tabs, setTabs] = useState([]);
+    useEffect(() => {
+        browser.tabs.query({ currentWindow: true }).then(setTabs);
+    }, []);
+    return (
+        <select
+            id="tab_dropdown"
+            value={pickedTab}
+            onChange={async (e) => {
+                setPickedTab(parseInt(e.target.value));
+            }}
+        >
+            {tabs.map((tab) => (
+                <option value={tab.id} key={tab.id}>
+                    {tab.title}
+                </option>
+            ))}
+        </select>
+    );
 }