Merge pull request 'chore(package.json): początek dodawania abstrakcji w build-time' (#125 ) from refactor/build_time_abstraction into develop

Reviewed-on: #125
2025-09-22 12:10:18 +02:00
5 changed files with 93 additions and 100 deletions
--- a/components/sidebar/tab-dropdown.tsx
+++ b/components/sidebar/tab-dropdown.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import browserAPI, { Tab } from '../../lib/browser-api';
+import { Tab } from '../../util';

 export default function TabDropdown({
    setPickedTab,
@ -10,7 +10,7 @@ export default function TabDropdown({
 }) {
    const [tabs, setTabs] = React.useState<Tab[]>([]);
    React.useEffect(() => {
-        browserAPI.tabs.query({ currentWindow: true }).then(setTabs);
+        browser.tabs.query({ currentWindow: true }).then(setTabs);
    }, []);
    return (
        <select
@ -27,4 +27,4 @@ export default function TabDropdown({
            ))}
        </select>
    );
-}
+}
--- a/components/toolbar/toolbar.tsx
+++ b/components/toolbar/toolbar.tsx
@ -1,18 +1,20 @@
 import React, { Fragment } from 'react';
 import ReactDOM from 'react-dom';
+import { useEmitter } from '../../util';
 import { getMemory } from '../../memory';
-import { useEmitter, getshorthost } from '../../util';
-import browserAPI from '../../lib/browser-api';

 async function getCurrentTab() {
-    const [tab] = await browserAPI.tabs.query({
+    const [tab] = await browser.tabs.query({
        active: true,
-        windowId: browserAPI.windows.WINDOW_ID_CURRENT,
+        windowId: browser.windows.WINDOW_ID_CURRENT,
    });
    return tab;
 }

-function isDomainHighlySuspicious(domain: string) {
+import './../../styles/global.scss';
+import './toolbar.scss';
+
+function isDomainHighlySuspicious(domain: string): boolean {
    return (
        domain.includes('facebook') ||
        domain.includes('twitter') ||
@ -25,19 +27,19 @@ const Toolbar = () => {
    const [origin, setOrigin] = React.useState<string | null>(null);
    const [eventCounts] = useEmitter(getMemory());
    const [cookieDomainCopy, setCookieDomainCopy] = React.useState<string | null>(null);
-    const [_, setMarksOccurrence] = React.useState(false);
+    const [_, setMarksOccurrence] = React.useState<boolean>(false);
    const [exposedOriginDomainCopy, setExposedOriginDomainCopy] = React.useState<string | null>(
        null
    );

-    const first_sentence_cookie =
-        'Strona dokonała zapisu i odczytu plików Cookie dla domen ';
+    const first_sentence_cookie = 'Strona dokonała zapisu i odczytu plików Cookie dla domen ';
    const first_sentence_history =
        'Część informacji o Twojej historii przeglądania została wysłana do ';

    React.useEffect(() => {
        const listener = async () => {
            const tab = await getCurrentTab();
+
            if (tab !== undefined && tab.url) {
                const url = new URL(tab.url);
                if (url.origin.startsWith('moz-extension')) {
@ -48,27 +50,26 @@ const Toolbar = () => {
                console.warn('Out of the tab scope');
            }
        };
-        browserAPI.tabs.onUpdated.addListener(listener);
+
+        browser.tabs.onUpdated.addListener(listener);
        listener();
        return () => {
-            browserAPI.tabs.onUpdated.removeListener(listener);
+            browser.tabs.onUpdated.removeListener(listener);
        };
    });

    React.useEffect(() => {
        if (!origin) return;
-
        const exposedOriginDomains = Object.values(getMemory().getClustersForOrigin(origin))
            .filter((cluster) => cluster.exposesOrigin())
            .sort((cluster1, cluster2) =>
                isDomainHighlySuspicious(cluster1.id)
                    ? -1
                    : isDomainHighlySuspicious(cluster2.id)
-                    ? 1
-                    : 0
+                      ? 1
+                      : 0
            )
            .map((cluster) => cluster.id);
-
        setExposedOriginDomainCopy('');

        switch (exposedOriginDomains.length) {
@ -99,18 +100,16 @@ const Toolbar = () => {

    React.useEffect(() => {
        if (!origin) return;
-
        const cookieDomains = Object.values(getMemory().getClustersForOrigin(origin))
            .filter((cluster) => cluster.hasCookies())
            .sort((cluster1, cluster2) =>
                isDomainHighlySuspicious(cluster1.id)
                    ? -1
                    : isDomainHighlySuspicious(cluster2.id)
-                    ? 1
-                    : 0
+                      ? 1
+                      : 0
            )
            .map((cluster) => cluster.id);
-
        setCookieDomainCopy('');

        switch (cookieDomains.length) {
@ -129,7 +128,7 @@ const Toolbar = () => {
                break;
            default:
                setCookieDomainCopy(
-                    `${cookieDomains[0]}, ${cookieDomains[1]} (i ${
+                    `${cookieDomains[0]}, ${cookieDomains[1]} (i ${
                        cookieDomains.length - 2 < 2 ? 2 : cookieDomains.length - 2
                    } innych).`
                );
@ -137,37 +136,44 @@ const Toolbar = () => {
        }
    }, [eventCounts['*'], origin]);

-    const autoMark = () => {
-        Object.values(getMemory().getClustersForOrigin(origin || '')).forEach((cluster) =>
-            cluster.autoMark()
-        );
-        setMarksOccurrence(true);
-    };
+    React.useEffect(() => {
+        if (!origin) return;
+        for (const cluster of Object.values(getMemory().getClustersForOrigin(origin))) {
+            if (cluster.hasMarks()) {
+                return setMarksOccurrence(true);
+            }
+        }
+
+        return setMarksOccurrence(false);
+    }, [eventCounts['*']]);
+
+    function autoMark() {
+        if (!origin) return;
+        for (const cluster of Object.values(getMemory().getClustersForOrigin(origin))) {
+            cluster.autoMark();
+        }
+        return setMarksOccurrence(true);
+    }

    return (
        <div className="toolbar">
            <header className={origin ? 'header' : 'header header--no-page'}>
-                <img src="../../assets/icon-addon.svg" height="24" />
+                <img src="../../assets/icon-addon.svg" height={32}></img>
                <div className="webpage-metadata">
                    {origin ? (
-                        <div className="webpage-metadata--hyperlink">{origin}</div>
+                        <>
+                            <span>Analiza strony</span>
+                            <span className="webpage-metadata--hyperlink">{origin}</span>
+                        </>
                    ) : (
-                        <div>Rentgen - wtyczka do przeglądania</div>
+                        <span>Przejdź do wybranej strony internetowej</span>
                    )}
                </div>
                {origin ? (
-                    <button
-                        onClick={() => {
-                            window.close();
-                        }}
-                    >
-                        <img src="../../assets/icons/x_thick.svg" width="12" height="12" />
-                    </button>
-                ) : (
                    <a href="https://internet-czas-dzialac.pl">
                        <img src="/assets/icons/info_circle_outline.svg" width="20" height="20" />
                    </a>
-                )}
+                ) : null}
            </header>

            {origin ? (
@ -177,22 +183,30 @@ const Toolbar = () => {
                        <div className="counters-wrapper">
                            <div className="counters">
                                <div className="counter counter--cookies">
-                                    <img src="/assets/icons/cookie.svg#color" width="24" height="24" />
+                                    <img
+                                        src="/assets/icons/cookie.svg#color"
+                                        width="24"
+                                        height="24"
+                                    />
                                    <span data-event={`${eventCounts['*']}`}>
                                        {
-                                            Object.values(getMemory().getClustersForOrigin(origin)).filter(
-                                                (cluster) => cluster.hasCookies()
-                                            ).length
+                                            Object.values(
+                                                getMemory().getClustersForOrigin(origin)
+                                            ).filter((cluster) => cluster.hasCookies()).length
                                        }
                                    </span>
                                </div>
                                <div className="counter counter--browser-history">
-                                    <img src="/assets/icons/warning.svg#color" width="24" height="24" />
+                                    <img
+                                        src="/assets/icons/warning.svg#color"
+                                        width="24"
+                                        height="24"
+                                    />
                                    <span data-event={`${eventCounts['*']}`}>
                                        {
-                                            Object.values(getMemory().getClustersForOrigin(origin)).filter(
-                                                (cluster) => cluster.exposesOrigin()
-                                            ).length
+                                            Object.values(
+                                                getMemory().getClustersForOrigin(origin)
+                                            ).filter((cluster) => cluster.exposesOrigin()).length
                                        }
                                    </span>
                                </div>
@ -233,9 +247,9 @@ const Toolbar = () => {
                        <Fragment>
                            <section className="about">
                                <p>
-                                    Takie przetwarzanie danych może być niezgodne z&nbsp;prawem.
-                                    Przejdź do analizy aby pomóc ustalić, czy ta strona nie narusza
-                                    RODO lub ustawy Prawo Komunikacji Elektronicznej.
+                                    Takie przetwarzanie danych może być niezgodne z prawem. Przejdź
+                                    do analizy aby pomóc ustalić, czy ta strona nie narusza RODO lub
+                                    ustawy Prawo Komunikacji Elektronicznej.
                                </p>
                            </section>
                            <section className="actions">
@ -247,7 +261,7 @@ const Toolbar = () => {
                                            `/components/sidebar/sidebar.html?origin=${origin}`,
                                            'new_tab'
                                        );
-                                        window.close();
+                                        window.close(); // close toolbar popup
                                    }}
                                >
                                    Przejdź do analizy
@ -267,4 +281,4 @@ const Toolbar = () => {
    );
 };

-ReactDOM.render(<Toolbar />, document.getElementById('toolbar'));
+ReactDOM.render(<Toolbar />, document.getElementById('toolbar'));
--- a/lib/browser-api/types.ts
+++ b/lib/browser-api/types.ts
@ -8,33 +8,6 @@
 * - memory.ts: browserAction.*, webRequest.*, cookies.*, extension.*
 */

-// Import full Request type from util.ts
-export type Request = {
-    cookieStoreId?: string;
-    documentUrl?: string;
-    frameId: number;
-    incognito?: boolean;
-    method: string;
-    originUrl: string;
-    parentFrameId: number;
-    proxyInfo?: {
-        host: string;
-        port: number;
-        type: string;
-        username: string;
-        proxyDNS: boolean;
-        failoverTimeout: number;
-    };
-    requestHeaders?: { name: string; value?: string; binaryValue?: number[] }[];
-    requestId: string;
-    tabId: number;
-    thirdParty?: boolean;
-    timeStamp: number;
-    type: string;
-    url: string;
-    urlClassification?: { firstParty: string[]; thirdParty: string[] };
-};
-
 // === Tab API (util.ts, tab-dropdown.tsx, toolbar.tsx) ===
 export interface Tab {
    id?: number;      // util.ts: tab.id, tab-dropdown.tsx: tab.id
@ -64,11 +37,23 @@ export interface BadgeColorDetails {
 }

 // === WebRequest API (memory.ts) ===
+export interface RequestDetails {
+    requestId: string;                    // memory.ts: request.requestId
+    requestHeaders?: RequestHeader[];     // memory.ts: request.requestHeaders
+    // Note: ExtendedRequest konstruktor używa więcej pól, 
+    // ale tu skupiamy się na tym co bezpośrednio używa browser API
+}
+
+export interface RequestHeader {
+    name: string;
+    value?: string;
+}
+
 export interface RequestFilter {
    urls: string[];  // memory.ts: { urls: ['<all_urls>'] }
 }

-export type RequestListener = (details: Request) => void;
+export type RequestListener = (details: RequestDetails) => void;

 // === Cookies API (memory.ts) ===
 export interface Cookie {
--- a/memory.ts
+++ b/memory.ts
@ -2,11 +2,10 @@ import ExtendedRequest from './extended-request';
 import { getshorthost } from './util';
 import { RequestCluster } from './request-cluster';
 import { SaferEmitter } from './safer-emitter';
-import browserAPI from './lib/browser-api';

 function setDomainsCount(counter: number, tabId: number) {
-    browserAPI.badge.setBadgeText({ text: counter < 0 ? '0' : counter.toString(), tabId });
-    browserAPI.badge.setTitle({
+    browser.browserAction.setBadgeText({ text: counter < 0 ? '0' : counter.toString(), tabId });
+    browser.browserAction.setTitle({
        title: 'Rentgen',
        tabId,
    });
@ -33,8 +32,8 @@ export default class Memory extends SaferEmitter {
        Object.values(this.getClustersForOrigin(request.origin)).some((cluster) =>
            cluster.hasCookies()
        )
-            ? browserAPI.badge.setBadgeBackgroundColor({ color: '#ff726b' })
-            : browserAPI.badge.setBadgeBackgroundColor({ color: '#ffb900' });
+            ? browser.browserAction.setBadgeBackgroundColor({ color: '#ff726b' })
+            : browser.browserAction.setBadgeBackgroundColor({ color: '#ffb900' });

        if (request.tabId >= 0) {
            setDomainsCount(
@ -47,14 +46,14 @@ export default class Memory extends SaferEmitter {
    constructor() {
        super();

-        browserAPI.webRequest.onBeforeRequest.addListener(
+        browser.webRequest.onBeforeRequest.addListener(
            async (request) => {
                new ExtendedRequest(request);
            },
            { urls: ['<all_urls>'] },
            ['requestBody']
        );
-        browserAPI.webRequest.onBeforeSendHeaders.addListener(
+        browser.webRequest.onBeforeSendHeaders.addListener(
            async (request) => {
                const extendedRequest = ExtendedRequest.by_id[request.requestId].addHeaders(
                    request.requestHeaders || []
@ -77,9 +76,9 @@ export default class Memory extends SaferEmitter {

    async removeCookiesFor(origin: string, shorthost?: string): Promise<void> {
        if (shorthost) {
-            const cookies = await browserAPI.cookies.getAll({ domain: shorthost });
+            const cookies = await browser.cookies.getAll({ domain: shorthost });
            for (const cookie of cookies) {
-                await browserAPI.cookies.remove({
+                await browser.cookies.remove({
                    name: cookie.name,
                    url: `https://${cookie.domain}`,
                });
@ -107,9 +106,5 @@ export function init() {
 }

 export function getMemory(): Memory {
-    const backgroundPage = browserAPI.extension.getBackgroundPage();
-    if (!backgroundPage) {
-        throw new Error('Background page not available');
-    }
-    return (backgroundPage.window as any).memory as Memory;
-}
+    return (browser.extension.getBackgroundPage().window as any).memory as Memory;
+}
--- a/util.ts
+++ b/util.ts
@ -1,12 +1,11 @@
 import { EventEmitter } from 'events';
 import React from 'react';
 import { DataLocation, Sources } from './stolen-data-entry';
-import browserAPI from './lib/browser-api';

 export type Unpromisify<T> = T extends Promise<infer R> ? R : T;
 export type Unarray<T> = T extends Array<infer R> ? R : T;

-export type Tab = Unarray<Unpromisify<ReturnType<typeof browserAPI.tabs.query>>>;
+export type Tab = Unarray<Unpromisify<ReturnType<typeof browser.tabs.query>>>;
 export type Request = {
    cookieStoreId?: string;
    documentUrl?: string; // RL of the document in which the resource will be loaded. For example, if the web page at "https://example.com" contains an image or an iframe, then the documentUrl for the image or iframe will be "https://example.com". For a top-level document, documentUrl is undefined.
@ -90,7 +89,7 @@ export function parseCookie(cookie: string): Record<string, string> {
 }

 export async function getTabByID(id: number) {
-    const tabs = await browserAPI.tabs.query({ currentWindow: true });
+    const tabs = await browser.tabs.query({ currentWindow: true });
    return tabs.find((tab) => tab.id == id);
 }

@ -318,4 +317,4 @@ export function downloadText(filename: string, text: string) {
    element.click();

    document.body.removeChild(element);
-}
+}