Delegate memory to background process

This commit is contained in:
Kuba Orlik 2021-11-07 13:57:24 +01:00
parent 52b3ae39ea
commit 66272fa318
13 changed files with 71 additions and 20 deletions

1
.gitignore vendored
View File

@ -2,3 +2,4 @@
node_modules node_modules
sidebar.js sidebar.js
/web-ext-artifacts/ /web-ext-artifacts/
lib/*

5
background.ts Normal file
View File

@ -0,0 +1,5 @@
import { init } from "./memory";
init();
alert("memory initialized!");

View File

@ -10,6 +10,9 @@
"default_panel": "sidebar/sidebar.html", "default_panel": "sidebar/sidebar.html",
"default_icon": "sidebar_icon.png" "default_icon": "sidebar_icon.png"
}, },
"background": {
"scripts": ["lib/background.js"]
},
"icons": { "icons": {
"48": "icons/border-48.png" "48": "icons/border-48.png"
}, },

View File

@ -3,7 +3,7 @@ import { getshorthost } from "./util";
import { EventEmitter } from "events"; import { EventEmitter } from "events";
import { RequestCluster } from "./request-cluster"; import { RequestCluster } from "./request-cluster";
class Memory extends EventEmitter { export default class Memory extends EventEmitter {
origin_to_history = {} as Record<string, Record<string, RequestCluster>>; origin_to_history = {} as Record<string, Record<string, RequestCluster>>;
async register(request: ExtendedRequest) { async register(request: ExtendedRequest) {
await request.init(); await request.init();
@ -64,6 +64,8 @@ class Memory extends EventEmitter {
} }
} }
const memory = new Memory(); export function init() {
const memory = new Memory();
export default memory; (window as any).memory = memory;
}

View File

@ -4,7 +4,7 @@
"description": "", "description": "",
"main": "email-template-harsh.js", "main": "email-template-harsh.js",
"scripts": { "scripts": {
"build": "npx esbuild sidebar.tsx --bundle --outfile=./lib/sidebar.js", "build": "npx esbuild sidebar/sidebar.tsx report-window/report-window.tsx --bundle background.ts --bundle --outdir=./lib",
"watch": "npm run build -- --watch" "watch": "npm run build -- --watch"
}, },
"repository": { "repository": {

View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Wygeneruj maila co zgłoszenia</title>
</head>
<body>
<div id="app"></div>
<script src="/lib/report-window/report-window.js"></script>
</body>
</html>

View File

@ -0,0 +1,15 @@
import React from "react";
import ReactDOM from "react-dom";
import { Memory } from "../memory";
const memory = (window as any).memory as Memory;
function Report() {
return (
<div>
<h1>Raport</h1>
</div>
);
}
ReactDOM.render(<Report />, document.getElementById("app"));

View File

@ -4,7 +4,7 @@ import ExtendedRequest from "./extended-request";
export type Sources = "cookie" | "pathname" | "queryparams" | "header"; export type Sources = "cookie" | "pathname" | "queryparams" | "header";
import { TCString, TCModel } from "@iabtcf/core"; import { TCString, TCModel } from "@iabtcf/core";
import { isJSONObject, isURL, parseToObject } from "./util"; import { getMemory, isJSONObject, isURL, parseToObject } from "./util";
import memory from "./memory"; import memory from "./memory";
const id = (function* id() { const id = (function* id() {
@ -87,7 +87,7 @@ export class StolenDataEntry {
addMark(key: string) { addMark(key: string) {
this.markedKeys.push(key); this.markedKeys.push(key);
memory.emit("change"); // to trigger rerender getMemory().emit("change"); // to trigger rerender
} }
hasMark(key: string) { hasMark(key: string) {
@ -96,7 +96,7 @@ export class StolenDataEntry {
removeMark(key: string) { removeMark(key: string) {
this.markedKeys = this.markedKeys.filter((e) => e != key); this.markedKeys = this.markedKeys.filter((e) => e != key);
memory.emit("change"); // to trigger rerender getMemory().emit("change"); // to trigger rerender
} }
toggleMark(key: string) { toggleMark(key: string) {

View File

@ -39,7 +39,7 @@
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script src="../lib/sidebar.js"></script> <script src="/lib/sidebar/sidebar.js"></script>
</body> </body>
</html> </html>

View File

@ -1,9 +1,8 @@
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 Options from "../options"; import Options from "../options";
import { StolenData } from "./stolen-data"; import { StolenData } from "./stolen-data";
import { useEmitter } from "../util"; import { getMemory, useEmitter } from "../util";
async function getCurrentTab() { async function getCurrentTab() {
const [tab] = await browser.tabs.query({ const [tab] = await browser.tabs.query({
@ -17,7 +16,7 @@ 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, setCounter] = useEmitter(memory); const [counter, setCounter] = useEmitter(getMemory());
useEffect(() => { useEffect(() => {
const listener = async (data) => { const listener = async (data) => {

View File

@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import memory from "../memory"; import memory from "../memory";
import { MergedStolenDataEntry, Sources } from "../request-cluster"; import { MergedStolenDataEntry, Sources } from "../request-cluster";
import { hyphenate } from "../util"; import { getMemory, hyphenate } from "../util";
function StolenDataValueTable({ function StolenDataValueTable({
entry, entry,
@ -81,7 +81,7 @@ export default function StolenDataCluster({
minValueLength: number; minValueLength: number;
cookiesOnly: boolean; cookiesOnly: boolean;
}) { }) {
const cluster = memory.getClustersForOrigin(origin)[shorthost]; const cluster = getMemory().getClustersForOrigin(origin)[shorthost];
const icons: Record<Sources, string> = { const icons: Record<Sources, string> = {
cookie: "🍪", cookie: "🍪",
pathname: "🛣", pathname: "🛣",
@ -96,7 +96,7 @@ export default function StolenDataCluster({
<a <a
href="#" href="#"
style={{ fontSize: "10px" }} style={{ fontSize: "10px" }}
onClick={() => memory.removeCookiesFor(origin, shorthost)} onClick={() => getMemory().removeCookiesFor(origin, shorthost)}
> >
Wyczyść cookiesy Wyczyść cookiesy
</a> </a>

View File

@ -1,8 +1,7 @@
import React from "react"; import React from "react";
import memory from "../memory";
import { RequestCluster } from "../request-cluster"; import { RequestCluster } from "../request-cluster";
import StolenDataCluster from "./stolen-data-cluster"; import StolenDataCluster from "./stolen-data-cluster";
import { getshorthost } from "../util"; import { getMemory, getshorthost } from "../util";
export function StolenData({ export function StolenData({
origin, origin,
@ -20,7 +19,7 @@ export function StolenData({
if (!origin) { if (!origin) {
return <div></div>; return <div></div>;
} }
const clusters = Object.values(memory.getClustersForOrigin(origin)).sort( const clusters = Object.values(getMemory().getClustersForOrigin(origin)).sort(
RequestCluster.sortCompare RequestCluster.sortCompare
); );
return ( return (
@ -32,7 +31,7 @@ export function StolenData({
<button <button
style={{ marginLeft: "1rem" }} style={{ marginLeft: "1rem" }}
onClick={() => onClick={() =>
memory.removeCookiesFor( getMemory().removeCookiesFor(
origin, origin,
getshorthost(new URL(origin).host) getshorthost(new URL(origin).host)
) )
@ -43,12 +42,23 @@ export function StolenData({
<button <button
style={{ marginLeft: "1rem" }} style={{ marginLeft: "1rem" }}
onClick={() => { onClick={() => {
memory.removeRequestsFor(origin); getMemory().removeRequestsFor(origin);
refresh(); refresh();
}} }}
> >
Wyczyść pamięć Wyczyść pamięć
</button> </button>
<button
onClick={() =>
window.open(
"/report-window/report-window.html",
"new_window",
"width=800,height=600"
)
}
>
Generuj maila
</button>
</h1> </h1>
{clusters {clusters
.filter((cluster) => !cookiesOnly || cluster.hasCookies()) .filter((cluster) => !cookiesOnly || cluster.hasCookies())

View File

@ -1,5 +1,6 @@
import { EventEmitter } from "events"; import { EventEmitter } from "events";
import { Dispatch, SetStateAction, useEffect, useState } from "react"; import { Dispatch, SetStateAction, useEffect, useState } from "react";
import Memory from "./memory";
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;
@ -76,3 +77,7 @@ export function isURL(str: unknown): str is string {
export function hyphenate(str: string): string { export function hyphenate(str: string): string {
return str.replace(/[_\[A-Z]/g, `${String.fromCharCode(173)}$&`); return str.replace(/[_\[A-Z]/g, `${String.fromCharCode(173)}$&`);
} }
export function getMemory(): Memory {
return (browser.extension.getBackgroundPage().window as any).memory as Memory;
}