Separate directory for sidebar views

manifest.json

@@ -7,7 +7,7 @@
 
   "sidebar_action": {
     "default_title": "ICD Skaner",
-    "default_panel": "sidebar.html",
+    "default_panel": "sidebar/sidebar.html",
     "default_icon": "sidebar_icon.png"
   },
   "icons": {

popup.html

@@ -1,9 +0,0 @@
-<meta charset="utf-8">
-<button id="clean">clean memory</button>
-<button id="copy_harsh">copy harsh email template</button>
-<button id="copy_polite">copy polite email template</button>
-<div id="output"></div>
-<script src="popup.js"></script>
-<script src="render-data-list.js"></script>
-<script src="email-template-harsh.js"></script>
-<script src="email-template-polite.js"></script>

popup.js

@@ -1,90 +0,0 @@
-output.innerHTML = "loading...";
-let tabid = null;
-let tab = null;
-let memory = null;
-
-chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-  var currTab = tabs[0];
-  if (currTab) {
-    // Sanity check
-    /* document.write(JSON.stringify(currTab)); */
-    tabid = currTab.id;
-    tab = currTab;
-  }
-});
-
-function atLeastOneCookiedRequest(requests) {
-  return requests.some((request) => request.has_cookie);
-}
-
-function sortByShorthost(tabdata) {
-  return Object.entries(tabdata).sort(([shorthost1], [shorthost2]) => {
-    return shorthost1 > shorthost2;
-  });
-}
-
-function extractAllCookies(requests) {
-  return Array.from(new Set(requests.map((request) => request.cookie))).filter(
-    (cookie) => cookie !== undefined
-  );
-}
-
-function render(memory = {}) {
-  let output_txt = "";
-  if (!memory?.[tabid]) {
-    output_txt = "No data for this tab";
-    output.innerHTML = output_txt;
-    return;
-  }
-  output_txt = /* HTML */ `<h2>
-      Część Twojej historii przeglądania została wysłana przez stronę ${tab.url}
-      do:
-    </h2>
-    <ul></ul>`;
-  sortByShorthost(memory[tabid]).forEach(([shorthost, requests]) => {
-    output_txt += /* HTML */ `
-      <li>
-        ${shorthost}
-        ${atLeastOneCookiedRequest(requests)
-          ? /*  HTML */ `🍪 <ul>
-            ${extractAllCookies(requests)
-              .map((cookie) => `<li><code>${cookie}</code></li>`)
-              .join("\n")}
-          </ul>`
-          : ""}
-      </li>
-    `;
-  });
-  output_txt += "</ul>";
-  output.innerHTML = output_txt;
-}
-
-chrome.runtime.sendMessage({ msg: "get_memory" }, (_memory) => {
-  memory = _memory;
-  render(memory);
-});
-
-clean.onclick = () => {
-  chrome.runtime.sendMessage({ msg: "clear_memory" }, (memory_) => {
-    memory = memory_;
-    render(memory);
-  });
-};
-
-function getDate() {
-  return new Date().toISOString().split("T")[0];
-}
-
-copy_harsh.onclick = () => {
-  const text_html = harsh_email_template();
-  navigator.clipboard.write([
-    new ClipboardItem({ "text/plain": text_html, "text/html": text_html }),
-  ]);
-};
-
-copy_polite.onclick = () => {
-  const text_html = polite_email_template();
-  navigator.clipboard.write([
-    new ClipboardItem({ "text/plain": text_html, "text/html": text_html }),
-  ]);
-};

request-cluster.ts

@@ -5,6 +5,7 @@ export type Sources = "cookie" | "pathname" | "queryparams" | "header";
 
 import { TCString, TCModel } from "@iabtcf/core";
 import { isJSONObject, isURL, parseToObject } from "./util";
+import memory from "./memory";
 
 const id = (function* id() {
   let i = 0;
@@ -77,17 +78,33 @@ export class StolenDataEntry {
 
   getParsedValue(key_path: string): string | Record<string, unknown> {
     let object = StolenDataEntry.parseValue(this.value);
-    console.log("key_path", key_path);
     for (const key of key_path.split(".")) {
       if (key === "") continue;
-      console.log(key, object[key]);
       object = StolenDataEntry.parseValue(object[key]);
     }
     return object;
   }
 
-  addMarkedValue(key: string) {
+  addMark(key: string) {
     this.markedKeys.push(key);
+    memory.emit("change"); // to trigger rerender
+  }
+
+  hasMark(key: string) {
+    return this.markedKeys.some((k) => k == key);
+  }
+
+  removeMark(key: string) {
+    this.markedKeys = this.markedKeys.filter((e) => e != key);
+    memory.emit("change"); // to trigger rerender
+  }
+
+  toggleMark(key: string) {
+    if (this.hasMark(key)) {
+      this.removeMark(key);
+    } else {
+      this.addMark(key);
+    }
   }
 }
 
@@ -131,8 +148,22 @@ export class MergedStolenDataEntry {
     );
   }
 
-  addMarkedValue(key: string) {
-    this.entries.forEach((entry) => entry.addMarkedValue(key));
+  addMark(key: string) {
+    this.entries.forEach((entry) => entry.addMark(key));
+  }
+
+  getMarkedValues() {
+    return this.entries
+      .map((entry) => entry.markedKeys)
+      .reduce((a, b) => a.concat(b), []);
+  }
+
+  hasMark(key: string): boolean {
+    return this.entries.some((entry) => entry.hasMark(key));
+  }
+
+  toggleMark(key: string): void {
+    this.entries.forEach((entry) => entry.toggleMark(key));
   }
 }
 

sidebar/sidebar.html

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

sidebar/sidebar.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from "react";
 import ReactDOM from "react-dom";
-import memory from "./memory";
-import Options from "./options";
+import memory from "../memory";
+import Options from "../options";
 import { StolenData } from "./stolen-data";
-import { useEmitter } from "./util";
+import { useEmitter } from "../util";
 
 async function getCurrentTab() {
   const [tab] = await browser.tabs.query({

sidebar/stolen-data-cluster.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import memory from "./memory";
-import { MergedStolenDataEntry, Sources } from "./request-cluster";
-import { hyphenate } from "./util";
+import memory from "../memory";
+import { MergedStolenDataEntry, Sources } from "../request-cluster";
+import { hyphenate } from "../util";
 
 function StolenDataValueTable({
   entry,
@@ -15,7 +15,14 @@ function StolenDataValueTable({
       <tbody>
         {Object.keys(entry.getParsedValues(prefixKey)[0]).map((key) => (
           <tr key={`${prefixKey}.${key}`}>
-            <th>{hyphenate(key)}</th>
+            <th
+              onClick={(e) => {
+                entry.toggleMark(prefixKey);
+                e.stopPropagation();
+              }}
+            >
+              {hyphenate(key)}
+            </th>
             <td>
               <StolenDataValue
                 entry={entry}
@@ -37,13 +44,29 @@ function StolenDataValue({
   prefixKey?: string;
 }) {
   const value = entry.getParsedValues(prefixKey)[0];
+  let body = null;
   if (!value) {
-    return <></>;
+    body = <></>;
+  } else if (typeof value === "string") {
+    body = (
+      <div style={{ border: entry.hasMark(prefixKey) ? "2px solid red" : "" }}>
+        {entry.getParsedValues(prefixKey)[0] as string}
+      </div>
+    );
+  } else {
+    body = <StolenDataValueTable entry={entry} prefixKey={prefixKey} />;
   }
-  if (typeof value === "string") {
-    return <>{entry.getParsedValues(prefixKey)[0] as string}</>;
-  }
-  return <StolenDataValueTable entry={entry} prefixKey={prefixKey} />;
+  return (
+    <div
+      onClick={(e) => {
+        entry.toggleMark(prefixKey);
+        e.stopPropagation();
+      }}
+      data-marks={entry.getMarkedValues().join(", ")}
+    >
+      {body}
+    </div>
+  );
 }
 
 export default function StolenDataCluster({
@@ -68,8 +91,8 @@ export default function StolenDataCluster({
   return (
     <div>
       <h2>
-        {cluster.id} {cluster.hasCookies() ? "🍪" : ""} x
-        {cluster.requests.length}{" "}
+        <a href={"https://" + cluster.id}>{cluster.id}</a>{" "}
+        {cluster.hasCookies() ? "🍪" : ""} x{cluster.requests.length}{" "}
         <a
           href="#"
           style={{ fontSize: "10px" }}

sidebar/stolen-data.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import memory from "./memory";
-import { RequestCluster } from "./request-cluster";
+import memory from "../memory";
+import { RequestCluster } from "../request-cluster";
 import StolenDataCluster from "./stolen-data-cluster";
-import { getshorthost } from "./util";
+import { getshorthost } from "../util";
 
 export function StolenData({
   origin,