diff --git a/sidebar.html b/sidebar.html
index bf9eb03..ec8c448 100644
--- a/sidebar.html
+++ b/sidebar.html
@@ -31,6 +31,10 @@
#app {
user-select: text;
}
+
+ tr:hover {
+ background-color: hsla(0, 0%, 0%, 0.1);
+ }
diff --git a/sidebar.tsx b/sidebar.tsx
index f694098..749ff52 100644
--- a/sidebar.tsx
+++ b/sidebar.tsx
@@ -24,11 +24,6 @@ const Sidebar = () => {
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;
}
diff --git a/stolen-data-row.tsx b/stolen-data-row.tsx
index da7d557..0827dd5 100644
--- a/stolen-data-row.tsx
+++ b/stolen-data-row.tsx
@@ -1,6 +1,66 @@
import React from "react";
import memory from "./memory";
import { Sources } from "./request-cluster";
+import { hyphenate, isJSONObject, isURL, parseToObject } from "./util";
+
+function StolenDataValueTable({
+ object,
+ prefixKey = "",
+}: {
+ object: Record;
+ prefixKey: string;
+}) {
+ return (
+
+
+ {Object.entries(object).map(([key, value]) => (
+
+ | {hyphenate(key)} |
+
+
+ |
+
+ ))}
+
+
+ );
+}
+
+function StolenDataValue({
+ value,
+ prefixKey = "",
+}: {
+ value: unknown;
+ prefixKey?: string;
+}) {
+ if (!value) {
+ return <>;
+ }
+ console.log("parsing value!", value);
+ if (isJSONObject(value)) {
+ const object = parseToObject(value);
+ return ;
+ } else if (isURL(value)) {
+ const url = new URL(value);
+ const object = {
+ host: url.host,
+ path: url.pathname,
+ ...Object.fromEntries(
+ (
+ url.searchParams as unknown as {
+ entries: () => Iterable<[string, string]>;
+ }
+ ).entries()
+ ),
+ };
+ return ;
+ } else {
+ return <>{value.toString()};
+ }
+}
export default function StolenDataRow({
origin,
@@ -43,12 +103,12 @@ export default function StolenDataRow({
key={origin + cluster.id + entry.getUniqueKey()}
data-key={origin + cluster.id + entry.getUniqueKey()}
>
-
- {entry.getNames().join(",")}
+ |
+ {entry.getNames().map(hyphenate).join(", ")}
|
{entry.getSources().map((source) => icons[source])} |
- {entry.getValues()[0]}
+
|
))}
diff --git a/tsconfig.json b/tsconfig.json
index 42cc230..de745d1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,7 +2,7 @@
"compilerOptions": {
"jsx": "react",
"esModuleInterop": true,
- "lib": ["es2017", "dom"],
+ "lib": ["es2017", "dom", "es2019"],
"typeRoots": ["node_modules/@types", "node_modules/web-ext-types"],
"outDir": "lib"
}
diff --git a/util.ts b/util.ts
index a3532f6..5e4128b 100644
--- a/util.ts
+++ b/util.ts
@@ -46,3 +46,33 @@ export async function getTabByID(id: number) {
const tabs = await browser.tabs.query({ currentWindow: true });
return tabs.find((tab) => tab.id == id);
}
+
+export function parseToObject(str: unknown): Record {
+ if (typeof str === "string") {
+ return JSON.parse(str);
+ } else if (typeof str == "object") {
+ return str as Record;
+ }
+}
+
+export function isJSONObject(
+ str: unknown
+): str is Record | string | number {
+ try {
+ return JSON.stringify(parseToObject(str))[0] == "{";
+ } catch (e) {
+ return false;
+ }
+}
+
+export function isURL(str: unknown): str is string {
+ try {
+ return !!(typeof str === "string" && new URL(str));
+ } catch (e) {
+ return false;
+ }
+}
+
+export function hyphenate(str: string): string {
+ return str.replace(/[_\[A-Z]/g, `${String.fromCharCode(173)}$&`);
+}