am0 3512386b2b refactor: migracja wywołań API przeglądarki do abstrakcji browserAPI
Zmigrowano wszystkie bezpośrednie wywołania browser.* API do zunifikowanej abstrakcji browserAPI, umożliwiając budowanie rozszerzenia zarówno dla Firefox (browser.browserAction) jak i Chrome (chrome.action) z jednego kodu źródłowego.

## Zmigrowane pliki aplikacji (4):

### 1. memory.ts
Dodano import:
- import browserAPI from ./lib/browser-api

Zastąpiono wywołania API:
- browser.browserAction.setBadgeText → browserAPI.badge.setBadgeText
- browser.browserAction.setTitle → browserAPI.badge.setTitle
- browser.browserAction.setBadgeBackgroundColor → browserAPI.badge.setBadgeBackgroundColor
- browser.webRequest.onBeforeRequest.addListener → browserAPI.webRequest.onBeforeRequest.addListener
- browser.webRequest.onBeforeSendHeaders.addListener → browserAPI.webRequest.onBeforeSendHeaders.addListener
- browser.cookies.getAll → browserAPI.cookies.getAll
- browser.cookies.remove → browserAPI.cookies.remove
- browser.extension.getBackgroundPage() → browserAPI.extension.getBackgroundPage()

Dodano obsługę null:
- Funkcja getMemory() sprawdza teraz czy getBackgroundPage() nie zwraca null

### 2. components/toolbar/toolbar.tsx
Dodano import:
- import browserAPI from ../../lib/browser-api

Zastąpiono wywołania API:
- browser.tabs.query → browserAPI.tabs.query
- browser.windows.WINDOW_ID_CURRENT → browserAPI.windows.WINDOW_ID_CURRENT
- browser.tabs.onUpdated.addListener → browserAPI.tabs.onUpdated.addListener
- browser.tabs.onUpdated.removeListener → browserAPI.tabs.onUpdated.removeListener

Zachowano całą funkcjonalność:
- Wszystkie sekcje UI (header, summary z licznikami, details, about, actions)
- Wszystkie hooki React i logika biznesowa
- Funkcje pomocnicze (getCurrentTab, isDomainHighlySuspicious, autoMark)

### 3. components/tab-dropdown.tsx
Zmieniono importy:
- Usunięto: import { Tab } from ../../util
- Dodano: import browserAPI, { Tab } from ../../lib/browser-api

Zastąpiono wywołania API:
- browser.tabs.query({ currentWindow: true }) → browserAPI.tabs.query({ currentWindow: true })

Poprawka typów:
- Typ Tab teraz pochodzi z browserAPI, zapewniając zgodność typów

### 4. util.ts
Dodano import:
- import browserAPI from ./lib/browser-api

Zastąpiono wywołania API:
- Typ Tab pochodzi teraz z browserAPI.tabs.query zamiast browser.tabs.query
- browser.tabs.query({ currentWindow: true }) → browserAPI.tabs.query({ currentWindow: true }) w funkcji getTabByID

Zachowano wszystkie funkcje:
- getshorthost, useEmitter, parseCookie, getTabByID
- parseToObject, isJSONObject, isURL, hyphenate, unique
- allSubhosts, reduceConcat, getDate, toBase64, makeThrottle
- isSameURL, isBase64, isBase64JSON
- flattenObject, flattenObjectEntries
- maskString, safeDecodeURIComponent, normalizeForClassname
- wordlist, dataLocationToText, downloadText

## Rozszerzenie abstrakcji browserAPI:

### lib/browser-api/types.ts
Dlaczego rozszerzono:
Początkowy minimalny interfejs RequestDetails był niewystarczający, ponieważ brakowało kluczowych właściwości wymaganych przez konstruktor ExtendedRequest. Gdy listenery webRequest są wywoływane, przekazują kompletny obiekt Request do ExtendedRequest, a nie tylko podstawowe szczegóły.

Co zostało dodane:
Pełny typ Request z util.ts, zawierający:
- Właściwości główne: requestId, tabId, url, method, type
- Nawigacja ramek: frameId, parentFrameId, documentUrl, originUrl
- Opcjonalne metadane: cookieStoreId, incognito, thirdParty, timeStamp
- Szczegóły żądania: requestHeaders, urlClassification, proxyInfo

Przyczyna źródłowa błędów TypeScript:
Konstruktor ExtendedRequest oczekiwał właściwości takich jak frameId, method,
originUrl, parentFrameId, documentUrl, urlClassification, etc. Minimalny
interfejs powodował błędy:
- Argument of type RequestDetails is not assignable to parameter of type Request
- Type RequestDetails is missing properties: frameId, method, originUrl, parentFrameId, and 4 more

Rozwiązanie:
Używając pełnej definicji typu Request, abstrakcja browserAPI poprawnie typuje callbacki webRequest, zapewniając bezpieczeństwo typów zarówno dla buildu Firefox jak i Chrome, przy zachowaniu kompatybilności z istniejącą implementacją ExtendedRequest.

Zmiana w RequestListener:
- Było: (details: RequestDetails) => void
- Jest: (details: Request) => void

## Wpływ zmian:
- memory.ts, toolbar.tsx, tab-dropdown.tsx, util.ts działają z TARGET=firefox i TARGET=chrome
- Zachowano bezpieczeństwo typów w całym kodzie
- Brak zmian funkcjonalnych - tylko warstwa abstrakcji
- Gotowość do kompatybilności z Chrome Manifest V3 (chrome.action vs browser.browserAction)

## Następne kroki:
- Aktualizacja esbuild.config.js dla budowania z TARGET=chrome do dist-chrome/
- Aktualizacja manifestu Chrome zgodnie z regułami Manifest v3
- Skrypt konwertujący SVG na PNG dla Chrome
- Testowanie rozszerzenia w przeglądarce Chrome
2025-09-30 12:17:18 +02:00

139 lines
4.0 KiB
TypeScript

/**
* Browser API Abstraction - Typy na podstawie faktycznego użycia w kodzie
*
* Przeanalizowane pliki:
* - util.ts: tabs.query, Tab.id
* - tab-dropdown.tsx: tabs.query, Tab.id, Tab.title
* - toolbar.tsx: tabs.query, tabs.onUpdated, Tab.url, windows.WINDOW_ID_CURRENT
* - 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
title?: string; // tab-dropdown.tsx: tab.title
url?: string; // toolbar.tsx: tab.url
}
export interface TabQuery {
currentWindow?: boolean; // util.ts, tab-dropdown.tsx
active?: boolean; // toolbar.tsx
windowId?: number; // toolbar.tsx
}
// === Badge/BrowserAction API (memory.ts) ===
export interface BadgeTextDetails {
text: string; // memory.ts: setBadgeText
tabId?: number; // memory.ts: setBadgeText (optional)
}
export interface BadgeTitleDetails {
title: string; // memory.ts: setTitle
tabId?: number; // memory.ts: setTitle (optional)
}
export interface BadgeColorDetails {
color: string; // memory.ts: setBadgeBackgroundColor
}
// === WebRequest API (memory.ts) ===
export interface RequestFilter {
urls: string[]; // memory.ts: { urls: ['<all_urls>'] }
}
export type RequestListener = (details: Request) => void;
// === Cookies API (memory.ts) ===
export interface Cookie {
name: string; // memory.ts: cookie.name
domain: string; // memory.ts: cookie.domain
}
export interface CookieQuery {
domain?: string; // memory.ts: { domain: shorthost }
}
export interface CookieRemove {
name: string; // memory.ts: { name: cookie.name, url: ... }
url: string; // memory.ts: { url: `https://${cookie.domain}` }
}
// === Main Browser API Interface ===
export interface BrowserAPI {
// Tabs API
tabs: {
query(queryInfo: TabQuery): Promise<Tab[]>;
onUpdated: {
addListener(listener: (tabId: number, changeInfo: any, tab: Tab) => void): void;
removeListener(listener: (tabId: number, changeInfo: any, tab: Tab) => void): void;
};
};
// Badge API (Firefox: browserAction, Chrome: action)
badge: {
setBadgeText(details: BadgeTextDetails): void;
setTitle(details: BadgeTitleDetails): void;
setBadgeBackgroundColor(details: BadgeColorDetails): void;
};
// WebRequest API
webRequest: {
onBeforeRequest: {
addListener(
listener: RequestListener,
filter: RequestFilter,
extraInfoSpec?: string[]
): void;
};
onBeforeSendHeaders: {
addListener(
listener: RequestListener,
filter: RequestFilter,
extraInfoSpec?: string[]
): void;
};
};
// Cookies API
cookies: {
getAll(details: CookieQuery): Promise<Cookie[]>;
remove(details: CookieRemove): Promise<Cookie | null>;
};
// Extension API
extension: {
getBackgroundPage(): Window | null;
};
// Windows API
windows: {
WINDOW_ID_CURRENT: number;
};
}