WIP: browser ext progress; most likely be scrapped.

kyle-wannacott · kyle-wannacott · commit f6ca95ff5ea2 · 2023-05-07T20:36:36.000+12:00
diff --git a/browser-extension/addTableSortClass.js b/browser-extension/addTableSortClass.js
@@ -1,10 +1,14 @@
 document.body.style.border = "1px solid red";
 
-let tables = document.querySelectorAll("table");
+function getTables() {
+  return document.querySelectorAll("table");
+}
+let tables = getTables();
 console.log("tables", tables);
-let tables2 = Array.from(tables).map((table) => {
-  return table.classList.add("table-sort");
-});
-
-
-
+function addTableSortClass() {
+  let tablesWithTableSortClass = Array.from(tables).map((table) => {
+    return table.classList.add("table-sort");
+  });
+  return tablesWithTableSortClass;
+}
+addTableSortClass();
diff --git a/browser-extension/getTableHeaders.js b/browser-extension/getTableHeaders.js
@@ -1,7 +1,7 @@
-// let tables = document.querySelectorAll("table").querySelectorAll("th");
-// console.log("tables3", tables);
-let headers = document.querySelectorAll("table th");
-console.log("tables3", headers);
-
-let headerText = headers.map((header)=>header.innerHTML)
-console.log(headerText)
+function getTableHeaders() {
+  let headers = document.querySelectorAll("table th");
+  let headerNames = Array.from(headers).map((header) => header.innerText);
+  console.log("test", headerNames);
+  return headerNames;
+}
+getTableHeaders();
diff --git a/browser-extension/manifest.json b/browser-extension/manifest.json
@@ -1,13 +1,17 @@
 {
   "manifest_version": 2,
+  "author":"Lee Wannacott",
   "name": "table-sort-js",
   "version": "0.0",
   "description": "Makes tables sortable using https://github.com/LeeWannacott/table-sort-js",
-
   "icons": 
     { "48": "icons/t.png" }
   ,
-
+  "browser_action": {
+    "default_icon": "./icons/t.png",
+    "default_title": "table-sort",
+    "default_popup": "popup/table-options.html"
+  },
   "content_scripts": [
     {
       "matches": [
@@ -17,12 +21,5 @@
       ],
       "js": ["addTableSortClass.js","getTableHeaders.js","table-sort.js"]
     }
-  ],
-
-  "browser_action": {
-    "default_icon": "./icons/t.png",
-    "default_title": "table-sort",
-    "default_popup": "popup/table-options.html"
-  }
-
+  ]
 }
diff --git a/browser-extension/popup/table-options.html b/browser-extension/popup/table-options.html
@@ -1,15 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Popup</title>
-</head>
-<body>
-  <div id="popup-content">
-    <button>table1</button>
-    <button>table2</button>
-    <button>table3</button>
-    <button>table4</button>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Popup</title>
+  </head>
+  <body>
+    <div id="popup-content">
+      <button>table1</button>
+      <button>table2</button>
+      <button>table3</button>
+      <button>table4</button>
+    </div>
+    <script src="../setButtons.js"> </script>
+  </body>
 </html>
diff --git a/browser-extension/setButtons.js b/browser-extension/setButtons.js
@@ -0,0 +1,17 @@
+// let tables = window.document.querySelectorAll("table");
+// console.log(getTableHeaders())
+let headers = document.querySelectorAll("table th");
+console.log(headers)
+let headerNames = Array.from(headers).map((header) => header.innerText);
+console.log("nnnn");
+
+
+headerNames.forEach((name) => {
+  const btn = document.createElement("button");
+  console.log(name);
+  btn.innerText = name;
+
+  document.querySelector("#popup-content").appendChild(btn);
+  let test = document.querySelector("#popup-content");
+  console.log(test);
+})
