Add option to clear cookies

extended-request.ts

@@ -31,7 +31,7 @@ export default class ExtendedRequest {
     } else {
       url = (this.data as any).frameAncestors[0].url;
     }
-    this.origin = url;
+    this.origin = new URL(url).origin;
   }
 
   getOrigin(): string {

memory.ts

@@ -4,21 +4,23 @@ import { EventEmitter } from "events";
 import { RequestCluster } from "./request-cluster";
 
 class Memory extends EventEmitter {
-  tab_to_history = {} as Record<string, Record<string, RequestCluster>>;
+  origin_to_history = {} as Record<string, Record<string, RequestCluster>>;
   async register(request: ExtendedRequest) {
     await request.init();
-    if (request.isThirdParty() && request.exposesOrigin()) {
+    console.log("registering request for", request.origin);
-      if (!this.tab_to_history[request.tabId]) {
+    if (!request.isThirdParty()) {
-        this.tab_to_history[request.tabId] = {};
+      return;
-      }
-      const shorthost = getshorthost(new URL(request.url).host);
-      if (!this.tab_to_history[request.tabId][shorthost]) {
-        const cluster = new RequestCluster(shorthost);
-        this.tab_to_history[request.tabId][shorthost] = cluster;
-      }
-      this.tab_to_history[request.tabId][shorthost].add(request);
-      this.emit("change");
     }
+    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");
   }
 
   constructor() {
@@ -32,8 +34,21 @@ class Memory extends EventEmitter {
     );
   }
 
-  getClustersForTab(tab_id: number): Record<string, RequestCluster> {
+  getClustersForOrigin(origin: string): Record<string, RequestCluster> {
-    return this.tab_to_history[tab_id] || {};
+    return this.origin_to_history[origin] || {};
+  }
+
+  async removeCookiesFor(origin: string, shorthost?: string): Promise<void> {
+    const clusters = this.getClustersForOrigin(origin);
+    await Promise.all(
+      Object.values(clusters)
+        .filter((cluster) => !shorthost || cluster.id === shorthost)
+        .map((cluster) => cluster.removeAllCookies())
+    );
+  }
+
+  async removeRequestsFor(origin: string) {
+    this.origin_to_history[origin] = {};
   }
 }
 

request-cluster.ts

@@ -5,9 +5,18 @@ export type Sources = "cookie" | "pathname" | "queryparams" | "header";
 
 import { TCString, TCModel } from "@iabtcf/core";
 
+const id = (function* id() {
+  let i = 0;
+  while (true) {
+    i++;
+    yield i;
+  }
+})();
+
 export class StolenDataEntry {
   public isIAB = false;
   public iab: TCModel | null = null;
+  public id: number;
 
   constructor(
     public request: ExtendedRequest,
@@ -20,6 +29,7 @@ export class StolenDataEntry {
       // console.log(this.iab);
       this.isIAB = true;
     } catch (e) {}
+    this.id = id.next().value as number;
   }
 
   getPriority() {
@@ -95,4 +105,15 @@ 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}`,
+      });
+    }
+  }
 }

sidebar.tsx

@@ -2,19 +2,14 @@ import React, { useEffect, useState } from "react";
 import ReactDOM from "react-dom";
 import memory from "./memory";
 import { RequestCluster, Sources } from "./request-cluster";
-import { Tab, useEmitter } from "./util";
+import { getshorthost, useEmitter } from "./util";
-
-async function getTabByID(id: number) {
-  const tabs = await browser.tabs.query({ currentWindow: true });
-  return tabs.find((tab) => tab.id == id);
-}
 
 async function getCurrentTab() {
   const [tab] = await browser.tabs.query({
     active: true,
     windowId: browser.windows.WINDOW_ID_CURRENT,
   });
-  return tab.id;
+  return tab;
 }
 
 const TabDropdown = ({
@@ -46,18 +41,18 @@ const TabDropdown = ({
 };
 
 const StolenDataRow = ({
-  tabID,
+  origin,
   shorthost,
   minValueLength,
   cookiesOnly,
 }: {
-  tabID: number;
+  origin: string;
   shorthost: string;
   refreshToken: number;
   minValueLength: number;
   cookiesOnly: boolean;
 }) => {
-  const cluster = memory.getClustersForTab(tabID)[shorthost];
+  const cluster = memory.getClustersForOrigin(origin)[shorthost];
   const icons: Record<Sources, string> = {
     cookie: "🍪",
     pathname: "🛣",
@@ -68,14 +63,28 @@ const StolenDataRow = ({
     <div>
       <h2>
         {cluster.id} {cluster.hasCookies() ? "🍪" : ""} x
-        {cluster.requests.length}
+        {cluster.requests.length}{" "}
+        <a
+          href="#"
+          style={{ fontSize: "10px" }}
+          onClick={() => cluster.removeAllCookies()}
+        >
+          Wyczyść cookiesy
+        </a>
       </h2>
       <table>
         <tbody>
           {cluster
             .getStolenData({ minValueLength, cookiesOnly })
             .map((entry) => (
-              <tr>
+              <tr
+                key={
+                  origin + ";" + cluster.id + ";" + entry.id + ";" + entry.name
+                }
+                data-key={
+                  origin + ";" + cluster.id + ";" + entry.id + ";" + entry.name
+                }
+              >
                 <th style={{ maxWidth: "200px", wordWrap: "break-word" }}>
                   {entry.name}
                 </th>
@@ -92,24 +101,20 @@ const StolenDataRow = ({
 };
 
 const StolenData = ({
-  pickedTab,
+  origin,
-  refreshToken,
   minValueLength,
+  refreshToken,
   cookiesOnly,
 }: {
-  pickedTab: number | null;
+  origin: string;
   refreshToken: number;
   minValueLength: number;
   cookiesOnly: boolean;
 }) => {
-  const [tab, setTab] = useState<Tab | null>(null);
+  if (!origin) {
-  useEffect(() => {
-    getTabByID(pickedTab).then(setTab);
-  }, [pickedTab]);
-  if (!pickedTab || !tab) {
     return <div></div>;
   }
-  const clusters = Object.values(memory.getClustersForTab(pickedTab)).sort(
+  const clusters = Object.values(memory.getClustersForOrigin(origin)).sort(
     RequestCluster.sortCompare
   );
   return (
@@ -117,20 +122,39 @@ const StolenData = ({
       {" "}
       <div>
         <h1>
-          <img src={tab.favIconUrl} width="20" height="20" /> {tab.title}
+          {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) => (
+          .map((cluster) => {
-            <StolenDataRow
+            return (
-              tabID={pickedTab}
+              <StolenDataRow
-              shorthost={cluster.id}
+                origin={origin}
-              key={cluster.id}
+                shorthost={cluster.id}
-              refreshToken={refreshToken}
+                key={cluster.id + origin}
-              minValueLength={minValueLength}
+                refreshToken={refreshToken}
-              cookiesOnly={cookiesOnly}
+                minValueLength={minValueLength}
-            />
+                cookiesOnly={cookiesOnly}
-          ))}
+              />
+            );
+          })}
       </div>
     </div>
   );
@@ -167,13 +191,35 @@ const Options = ({
 };
 
 const Sidebar = () => {
-  const [pickedTab, setPickedTab] = useState<number | null>(null);
+  const [origin, setOrigin] = useState<string | null>(null);
   const [minValueLength, setMinValueLength] = useState<number | null>(7);
   const [cookiesOnly, setCookiesOnly] = useState<boolean>(false);
   const counter = useEmitter(memory);
+
+  useEffect(() => {
+    const listener = async (data) => {
+      console.log("tab change!");
+      const tab = await getCurrentTab();
+      const url = new URL(tab.url);
+      console.log(
+        "NEW ORIGIN",
+        url.origin,
+        url.origin.startsWith("moz-extension")
+      );
+      if (url.origin.startsWith("moz-extension")) {
+        return;
+      }
+      setOrigin(url.origin);
+    };
+    browser.tabs.onUpdated.addListener(listener);
+    return () => {
+      browser.tabs.onUpdated.removeListener(listener);
+    };
+  });
+
   return (
     <>
-      <div id="selector">
+      {/* <div id="selector">
         <TabDropdown setPickedTab={setPickedTab} pickedTab={pickedTab} />
         <button
           id="get_current_tab_button"
@@ -181,7 +227,7 @@ const Sidebar = () => {
         >
           Wybierz aktywną kartę{" "}
         </button>
-      </div>
+      </div> */}
       <Options
         minValueLength={minValueLength}
         setMinValueLength={setMinValueLength}
@@ -189,7 +235,7 @@ const Sidebar = () => {
         setCookiesOnly={setCookiesOnly}
       />
       <StolenData
-        pickedTab={pickedTab}
+        origin={origin}
         refreshToken={counter}
         minValueLength={minValueLength}
         cookiesOnly={cookiesOnly}

util.ts

@@ -39,3 +39,8 @@ export function parseCookie(cookie: string): Record<string, string> {
       {}
     );
 }
+
+export async function getTabByID(id: number) {
+  const tabs = await browser.tabs.query({ currentWindow: true });
+  return tabs.find((tab) => tab.id == id);
+}