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
139 lines
4.0 KiB
TypeScript
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;
|
|
};
|
|
} |