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
This commit is contained in:
parent
e1d9b8c874
commit
3512386b2b
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Tab } from '../../util';
|
||||
import browserAPI, { Tab } from '../../lib/browser-api';
|
||||
|
||||
export default function TabDropdown({
|
||||
setPickedTab,
|
||||
@ -10,7 +10,7 @@ export default function TabDropdown({
|
||||
}) {
|
||||
const [tabs, setTabs] = React.useState<Tab[]>([]);
|
||||
React.useEffect(() => {
|
||||
browser.tabs.query({ currentWindow: true }).then(setTabs);
|
||||
browserAPI.tabs.query({ currentWindow: true }).then(setTabs);
|
||||
}, []);
|
||||
return (
|
||||
<select
|
||||
|
||||
@ -1,20 +1,18 @@
|
||||
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 browser.tabs.query({
|
||||
const [tab] = await browserAPI.tabs.query({
|
||||
active: true,
|
||||
windowId: browser.windows.WINDOW_ID_CURRENT,
|
||||
windowId: browserAPI.windows.WINDOW_ID_CURRENT,
|
||||
});
|
||||
return tab;
|
||||
}
|
||||
|
||||
import './../../styles/global.scss';
|
||||
import './toolbar.scss';
|
||||
|
||||
function isDomainHighlySuspicious(domain: string): boolean {
|
||||
function isDomainHighlySuspicious(domain: string) {
|
||||
return (
|
||||
domain.includes('facebook') ||
|
||||
domain.includes('twitter') ||
|
||||
@ -27,19 +25,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<boolean>(false);
|
||||
const [_, setMarksOccurrence] = React.useState(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')) {
|
||||
@ -50,26 +48,27 @@ const Toolbar = () => {
|
||||
console.warn('Out of the tab scope');
|
||||
}
|
||||
};
|
||||
|
||||
browser.tabs.onUpdated.addListener(listener);
|
||||
browserAPI.tabs.onUpdated.addListener(listener);
|
||||
listener();
|
||||
return () => {
|
||||
browser.tabs.onUpdated.removeListener(listener);
|
||||
browserAPI.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) {
|
||||
@ -100,16 +99,18 @@ 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) {
|
||||
@ -128,7 +129,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).`
|
||||
);
|
||||
@ -136,44 +137,37 @@ const Toolbar = () => {
|
||||
}
|
||||
}, [eventCounts['*'], origin]);
|
||||
|
||||
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);
|
||||
}
|
||||
const autoMark = () => {
|
||||
Object.values(getMemory().getClustersForOrigin(origin || '')).forEach((cluster) =>
|
||||
cluster.autoMark()
|
||||
);
|
||||
setMarksOccurrence(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="toolbar">
|
||||
<header className={origin ? 'header' : 'header header--no-page'}>
|
||||
<img src="../../assets/icon-addon.svg" height={32}></img>
|
||||
<img src="../../assets/icon-addon.svg" height="24" />
|
||||
<div className="webpage-metadata">
|
||||
{origin ? (
|
||||
<>
|
||||
<span>Analiza strony</span>
|
||||
<span className="webpage-metadata--hyperlink">{origin}</span>
|
||||
</>
|
||||
<div className="webpage-metadata--hyperlink">{origin}</div>
|
||||
) : (
|
||||
<span>Przejdź do wybranej strony internetowej</span>
|
||||
<div>Rentgen - wtyczka do przeglądania</div>
|
||||
)}
|
||||
</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 ? (
|
||||
@ -183,30 +177,22 @@ 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>
|
||||
@ -247,9 +233,9 @@ const Toolbar = () => {
|
||||
<Fragment>
|
||||
<section className="about">
|
||||
<p>
|
||||
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.
|
||||
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">
|
||||
@ -261,7 +247,7 @@ const Toolbar = () => {
|
||||
`/components/sidebar/sidebar.html?origin=${origin}`,
|
||||
'new_tab'
|
||||
);
|
||||
window.close(); // close toolbar popup
|
||||
window.close();
|
||||
}}
|
||||
>
|
||||
Przejdź do analizy
|
||||
|
||||
@ -8,6 +8,33 @@
|
||||
* - 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
|
||||
@ -37,23 +64,11 @@ 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: RequestDetails) => void;
|
||||
export type RequestListener = (details: Request) => void;
|
||||
|
||||
// === Cookies API (memory.ts) ===
|
||||
export interface Cookie {
|
||||
|
||||
23
memory.ts
23
memory.ts
@ -2,10 +2,11 @@ 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) {
|
||||
browser.browserAction.setBadgeText({ text: counter < 0 ? '0' : counter.toString(), tabId });
|
||||
browser.browserAction.setTitle({
|
||||
browserAPI.badge.setBadgeText({ text: counter < 0 ? '0' : counter.toString(), tabId });
|
||||
browserAPI.badge.setTitle({
|
||||
title: 'Rentgen',
|
||||
tabId,
|
||||
});
|
||||
@ -32,8 +33,8 @@ export default class Memory extends SaferEmitter {
|
||||
Object.values(this.getClustersForOrigin(request.origin)).some((cluster) =>
|
||||
cluster.hasCookies()
|
||||
)
|
||||
? browser.browserAction.setBadgeBackgroundColor({ color: '#ff726b' })
|
||||
: browser.browserAction.setBadgeBackgroundColor({ color: '#ffb900' });
|
||||
? browserAPI.badge.setBadgeBackgroundColor({ color: '#ff726b' })
|
||||
: browserAPI.badge.setBadgeBackgroundColor({ color: '#ffb900' });
|
||||
|
||||
if (request.tabId >= 0) {
|
||||
setDomainsCount(
|
||||
@ -46,14 +47,14 @@ export default class Memory extends SaferEmitter {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
browser.webRequest.onBeforeRequest.addListener(
|
||||
browserAPI.webRequest.onBeforeRequest.addListener(
|
||||
async (request) => {
|
||||
new ExtendedRequest(request);
|
||||
},
|
||||
{ urls: ['<all_urls>'] },
|
||||
['requestBody']
|
||||
);
|
||||
browser.webRequest.onBeforeSendHeaders.addListener(
|
||||
browserAPI.webRequest.onBeforeSendHeaders.addListener(
|
||||
async (request) => {
|
||||
const extendedRequest = ExtendedRequest.by_id[request.requestId].addHeaders(
|
||||
request.requestHeaders || []
|
||||
@ -76,9 +77,9 @@ export default class Memory extends SaferEmitter {
|
||||
|
||||
async removeCookiesFor(origin: string, shorthost?: string): Promise<void> {
|
||||
if (shorthost) {
|
||||
const cookies = await browser.cookies.getAll({ domain: shorthost });
|
||||
const cookies = await browserAPI.cookies.getAll({ domain: shorthost });
|
||||
for (const cookie of cookies) {
|
||||
await browser.cookies.remove({
|
||||
await browserAPI.cookies.remove({
|
||||
name: cookie.name,
|
||||
url: `https://${cookie.domain}`,
|
||||
});
|
||||
@ -106,5 +107,9 @@ export function init() {
|
||||
}
|
||||
|
||||
export function getMemory(): Memory {
|
||||
return (browser.extension.getBackgroundPage().window as any).memory as Memory;
|
||||
const backgroundPage = browserAPI.extension.getBackgroundPage();
|
||||
if (!backgroundPage) {
|
||||
throw new Error('Background page not available');
|
||||
}
|
||||
return (backgroundPage.window as any).memory as Memory;
|
||||
}
|
||||
5
util.ts
5
util.ts
@ -1,11 +1,12 @@
|
||||
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 browser.tabs.query>>>;
|
||||
export type Tab = Unarray<Unpromisify<ReturnType<typeof browserAPI.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.
|
||||
@ -89,7 +90,7 @@ export function parseCookie(cookie: string): Record<string, string> {
|
||||
}
|
||||
|
||||
export async function getTabByID(id: number) {
|
||||
const tabs = await browser.tabs.query({ currentWindow: true });
|
||||
const tabs = await browserAPI.tabs.query({ currentWindow: true });
|
||||
return tabs.find((tab) => tab.id == id);
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user