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
115 lines
3.8 KiB
TypeScript
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;
|
|
} |