rentgen/memory.ts
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

115 lines
3.8 KiB
TypeScript

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({
title: 'Rentgen',
tabId,
});
}
export default class Memory extends SaferEmitter {
origin_to_history = {} as Record<string, Record<string, RequestCluster>>;
async register(request: ExtendedRequest) {
await request.init();
if (!request.isThirdParty()) {
return;
}
if (!this.origin_to_history[request.origin]) {
this.origin_to_history[request.origin] = {};
}
const shorthost = getshorthost(new URL(request.url).host);
if (!this.origin_to_history[request.origin][shorthost]) {
const cluster = new RequestCluster(shorthost);
this.origin_to_history[request.origin][shorthost] = cluster;
}
this.origin_to_history[request.origin][shorthost].add(request);
this.emit('change', shorthost);
Object.values(this.getClustersForOrigin(request.origin)).some((cluster) =>
cluster.hasCookies()
)
? browserAPI.badge.setBadgeBackgroundColor({ color: '#ff726b' })
: browserAPI.badge.setBadgeBackgroundColor({ color: '#ffb900' });
if (request.tabId >= 0) {
setDomainsCount(
Object.values(this.getClustersForOrigin(request.origin)).length,
request.tabId
);
}
}
constructor() {
super();
browserAPI.webRequest.onBeforeRequest.addListener(
async (request) => {
new ExtendedRequest(request);
},
{ urls: ['<all_urls>'] },
['requestBody']
);
browserAPI.webRequest.onBeforeSendHeaders.addListener(
async (request) => {
const extendedRequest = ExtendedRequest.by_id[request.requestId].addHeaders(
request.requestHeaders || []
);
this.register(extendedRequest);
},
{ urls: ['<all_urls>'] },
['requestHeaders']
);
}
emit(eventName: string, data = 'any'): boolean {
setTimeout(() => super.emit(eventName, data), 0);
return true;
}
getClustersForOrigin(origin: string): Record<string, RequestCluster> {
return this.origin_to_history[origin] || {};
}
async removeCookiesFor(origin: string, shorthost?: string): Promise<void> {
if (shorthost) {
const cookies = await browserAPI.cookies.getAll({ domain: shorthost });
for (const cookie of cookies) {
await browserAPI.cookies.remove({
name: cookie.name,
url: `https://${cookie.domain}`,
});
}
} else {
const clusters = this.getClustersForOrigin(origin);
await Promise.all(
Object.values(clusters)
.filter((cluster) => !shorthost || cluster.id === shorthost)
.map((cluster) => this.removeCookiesFor(origin, cluster.id))
);
}
}
async removeRequestsFor(origin: string) {
this.origin_to_history[origin] = {};
}
}
export function init() {
const memory = new Memory();
(window as any).memory = memory;
}
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;
}