Reorder files into smaller components

This commit is contained in:
Kuba Orlik 2021-11-07 09:17:19 +01:00
parent 29d1131a6f
commit fa42e848ea
8 changed files with 212 additions and 197 deletions

View File

@ -39,12 +39,24 @@ class Memory extends EventEmitter {
} }
async removeCookiesFor(origin: string, shorthost?: string): Promise<void> { async removeCookiesFor(origin: string, shorthost?: string): Promise<void> {
const clusters = this.getClustersForOrigin(origin); if (shorthost) {
await Promise.all( const cookies = await browser.cookies.getAll({ domain: shorthost });
Object.values(clusters) for (const cookie of cookies) {
.filter((cluster) => !shorthost || cluster.id === shorthost) console.log("removing cookie", cookie.name, "from", cookie.domain);
.map((cluster) => cluster.removeAllCookies()) await browser.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) { async removeRequestsFor(origin: string) {

31
options.tsx Normal file
View File

@ -0,0 +1,31 @@
import React from "react";
export default function Options({
minValueLength,
setMinValueLength,
cookiesOnly,
setCookiesOnly,
}) {
return (
<fieldset>
<h3>Zaawansowane ustawienia</h3>
<label htmlFor="minValueLength">
Pokazuj tylko wartości o długości co najmniej{" "}
</label>
<input
type="number"
id="minValueLength"
value={minValueLength}
onChange={(e) => setMinValueLength(parseInt(e.target.value))}
/>
<br />
<input
type="checkbox"
id="cookiesOnly"
value={cookiesOnly}
onChange={(e) => setCookiesOnly(e.target.checked)}
/>
<label htmlFor="cookiesOnly">Pokazuj tylko dane z cookiesów</label>
</fieldset>
);
}

View File

@ -163,15 +163,4 @@ export class RequestCluster extends EventEmitter {
} }
} }
} }
async removeAllCookies() {
const cookies = await browser.cookies.getAll({ domain: this.id });
for (const cookie of cookies) {
console.log("removing cookie", cookie.name, "from", cookie.domain);
await browser.cookies.remove({
name: cookie.name,
url: `https://${cookie.domain}`,
});
}
}
} }

View File

@ -1,8 +1,9 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import memory from "./memory"; import memory from "./memory";
import { RequestCluster, Sources } from "./request-cluster"; import Options from "./options";
import { getshorthost, useEmitter } from "./util"; import { StolenData } from "./stolen-data";
import { useEmitter } from "./util";
async function getCurrentTab() { async function getCurrentTab() {
const [tab] = await browser.tabs.query({ const [tab] = await browser.tabs.query({
@ -12,185 +13,11 @@ async function getCurrentTab() {
return tab; return tab;
} }
const TabDropdown = ({
setPickedTab,
pickedTab,
}: {
setPickedTab: (tab_id: number) => void;
pickedTab: number;
}) => {
const [tabs, setTabs] = useState([]);
useEffect(() => {
browser.tabs.query({ currentWindow: true }).then(setTabs);
}, []);
return (
<select
id="tab_dropdown"
value={pickedTab}
onChange={async (e) => {
setPickedTab(parseInt(e.target.value));
}}
>
{tabs.map((tab) => (
<option value={tab.id} key={tab.id}>
{tab.title}
</option>
))}
</select>
);
};
const StolenDataRow = ({
origin,
shorthost,
minValueLength,
cookiesOnly,
}: {
origin: string;
shorthost: string;
refreshToken: number;
minValueLength: number;
cookiesOnly: boolean;
}) => {
const cluster = memory.getClustersForOrigin(origin)[shorthost];
const icons: Record<Sources, string> = {
cookie: "🍪",
pathname: "🛣",
queryparams: "🅿",
header: "H",
};
return (
<div>
<h2>
{cluster.id} {cluster.hasCookies() ? "🍪" : ""} x
{cluster.requests.length}{" "}
<a
href="#"
style={{ fontSize: "10px" }}
onClick={() => cluster.removeAllCookies()}
>
Wyczyść cookiesy
</a>
</h2>
<table>
<tbody>
{cluster
.getStolenData({ minValueLength, cookiesOnly })
.map((entry) => (
<tr
key={origin + cluster.id + entry.getUniqueKey()}
data-key={origin + cluster.id + entry.getUniqueKey()}
>
<th style={{ maxWidth: "200px", wordWrap: "break-word" }}>
{entry.getNames().join(",")}
</th>
<td>{entry.getSources().map((source) => icons[source])}</td>
<td style={{ wordWrap: "anywhere" as any }}>
{entry.getValues()[0]}
</td>
</tr>
))}
</tbody>
</table>
</div>
);
};
const StolenData = ({
origin,
minValueLength,
refreshToken,
cookiesOnly,
}: {
origin: string;
refreshToken: number;
minValueLength: number;
cookiesOnly: boolean;
}) => {
if (!origin) {
return <div></div>;
}
const clusters = Object.values(memory.getClustersForOrigin(origin)).sort(
RequestCluster.sortCompare
);
return (
<div style={{ padding: "5px" }}>
{" "}
<div>
<h1>
{origin}
<button
style={{ marginLeft: "1rem" }}
onClick={() =>
memory.removeCookiesFor(
origin,
getshorthost(new URL(origin).host)
)
}
>
Wyczyść cookiesy 1st party
</button>
<button
style={{ marginLeft: "1rem" }}
onClick={() => memory.removeRequestsFor(origin)}
>
Wyczyść pamięć
</button>
</h1>
{clusters
.filter((cluster) => !cookiesOnly || cluster.hasCookies())
.map((cluster) => {
return (
<StolenDataRow
origin={origin}
shorthost={cluster.id}
key={cluster.id + origin}
refreshToken={refreshToken}
minValueLength={minValueLength}
cookiesOnly={cookiesOnly}
/>
);
})}
</div>
</div>
);
};
const Options = ({
minValueLength,
setMinValueLength,
cookiesOnly,
setCookiesOnly,
}) => {
return (
<fieldset>
<h3>Zaawansowane ustawienia</h3>
<label htmlFor="minValueLength">
Pokazuj tylko wartości o długości co najmniej{" "}
</label>
<input
type="number"
id="minValueLength"
value={minValueLength}
onChange={(e) => setMinValueLength(parseInt(e.target.value))}
/>
<br />
<input
type="checkbox"
id="cookiesOnly"
value={cookiesOnly}
onChange={(e) => setCookiesOnly(e.target.checked)}
/>
<label htmlFor="cookiesOnly">Pokazuj tylko dane z cookiesów</label>
</fieldset>
);
};
const Sidebar = () => { const Sidebar = () => {
const [origin, setOrigin] = useState<string | null>(null); const [origin, setOrigin] = useState<string | null>(null);
const [minValueLength, setMinValueLength] = useState<number | null>(7); const [minValueLength, setMinValueLength] = useState<number | null>(7);
const [cookiesOnly, setCookiesOnly] = useState<boolean>(false); const [cookiesOnly, setCookiesOnly] = useState<boolean>(false);
const counter = useEmitter(memory); const [counter] = useEmitter(memory);
useEffect(() => { useEffect(() => {
const listener = async (data) => { const listener = async (data) => {

59
stolen-data-row.tsx Normal file
View File

@ -0,0 +1,59 @@
import React from "react";
import memory from "./memory";
import { Sources } from "./request-cluster";
export default function StolenDataRow({
origin,
shorthost,
minValueLength,
cookiesOnly,
}: {
origin: string;
shorthost: string;
refreshToken: number;
minValueLength: number;
cookiesOnly: boolean;
}) {
const cluster = memory.getClustersForOrigin(origin)[shorthost];
const icons: Record<Sources, string> = {
cookie: "🍪",
pathname: "🛣",
queryparams: "🅿",
header: "H",
};
return (
<div>
<h2>
{cluster.id} {cluster.hasCookies() ? "🍪" : ""} x
{cluster.requests.length}{" "}
<a
href="#"
style={{ fontSize: "10px" }}
onClick={() => memory.removeCookiesFor(origin, shorthost)}
>
Wyczyść cookiesy
</a>
</h2>
<table>
<tbody>
{cluster
.getStolenData({ minValueLength, cookiesOnly })
.map((entry) => (
<tr
key={origin + cluster.id + entry.getUniqueKey()}
data-key={origin + cluster.id + entry.getUniqueKey()}
>
<th style={{ maxWidth: "200px", wordWrap: "break-word" }}>
{entry.getNames().join(",")}
</th>
<td>{entry.getSources().map((source) => icons[source])}</td>
<td style={{ wordWrap: "anywhere" as any }}>
{entry.getValues()[0]}
</td>
</tr>
))}
</tbody>
</table>
</div>
);
}

65
stolen-data.tsx Normal file
View File

@ -0,0 +1,65 @@
import React from "react";
import memory from "./memory";
import { RequestCluster } from "./request-cluster";
import StolenDataRow from "./stolen-data-row";
import { getshorthost } from "./util";
export function StolenData({
origin,
minValueLength,
refreshToken,
cookiesOnly,
}: {
origin: string;
refreshToken: number;
minValueLength: number;
cookiesOnly: boolean;
}) {
if (!origin) {
return <div></div>;
}
const clusters = Object.values(memory.getClustersForOrigin(origin)).sort(
RequestCluster.sortCompare
);
return (
<div style={{ padding: "5px" }}>
{" "}
<div>
<h1>
{origin}
<button
style={{ marginLeft: "1rem" }}
onClick={() =>
memory.removeCookiesFor(
origin,
getshorthost(new URL(origin).host)
)
}
>
Wyczyść cookiesy 1st party
</button>
<button
style={{ marginLeft: "1rem" }}
onClick={() => memory.removeRequestsFor(origin)}
>
Wyczyść pamięć
</button>
</h1>
{clusters
.filter((cluster) => !cookiesOnly || cluster.hasCookies())
.map((cluster) => {
return (
<StolenDataRow
origin={origin}
shorthost={cluster.id}
key={cluster.id + origin}
refreshToken={refreshToken}
minValueLength={minValueLength}
cookiesOnly={cookiesOnly}
/>
);
})}
</div>
</div>
);
}

30
tab-dropdown.tsx Normal file
View File

@ -0,0 +1,30 @@
import React from "react";
import { useEffect, useState } from "react";
export default function TabDropdown({
setPickedTab,
pickedTab,
}: {
setPickedTab: (tab_id: number) => void;
pickedTab: number;
}) {
const [tabs, setTabs] = useState([]);
useEffect(() => {
browser.tabs.query({ currentWindow: true }).then(setTabs);
}, []);
return (
<select
id="tab_dropdown"
value={pickedTab}
onChange={async (e) => {
setPickedTab(parseInt(e.target.value));
}}
>
{tabs.map((tab) => (
<option value={tab.id} key={tab.id}>
{tab.title}
</option>
))}
</select>
);
}

View File

@ -1,5 +1,5 @@
import { EventEmitter } from "events"; import { EventEmitter } from "events";
import { useEffect, useState } from "react"; import { Dispatch, SetStateAction, useEffect, useState } from "react";
export type Unpromisify<T> = T extends Promise<infer R> ? R : T; export type Unpromisify<T> = T extends Promise<infer R> ? R : T;
export type Unarray<T> = T extends Array<infer R> ? R : T; export type Unarray<T> = T extends Array<infer R> ? R : T;
@ -13,7 +13,9 @@ export function getshorthost(host: string) {
return host.split(".").slice(-2).join("."); return host.split(".").slice(-2).join(".");
} }
export function useEmitter(e: EventEmitter) { export function useEmitter(
e: EventEmitter
): [number, Dispatch<SetStateAction<number>>] {
const [counter, setCounter] = useState<number>(0); const [counter, setCounter] = useState<number>(0);
useEffect(() => { useEffect(() => {
const callback = () => { const callback = () => {
@ -24,7 +26,7 @@ export function useEmitter(e: EventEmitter) {
e.removeListener("change", callback); e.removeListener("change", callback);
}; };
}, []); }, []);
return counter; return [counter, setCounter];
} }
export function parseCookie(cookie: string): Record<string, string> { export function parseCookie(cookie: string): Record<string, string> {