Enhancements (#30)

* WIP: new features * Feature complete
nithincvpoyyil · Jul 3, 2023 · bb9b9f1 · bb9b9f1
1 parent e6a76ee
commit bb9b9f1
Show file tree

Hide file tree

Showing 9 changed files with 346 additions and 152 deletions.
diff --git a/background.js b/background.js
@@ -8,11 +8,10 @@ chrome.extension.*
 */
 
 chrome.extension.onConnect.addListener(function (port) {
-
-    var extensionListener = (message, sender, sendResponse) => {
-        console.info('Message:', message, sender, sendResponse);
-    };
+  var extensionListener = (message, sender, sendResponse) => {
+    console.info("Message:", message, sender, sendResponse);
+  };
 
-    // Listens to messages sent from the panel
-    chrome.extension.onMessage.addListener(extensionListener);
-});
+  // Listens to messages sent from the panel
+  chrome.extension.onMessage.addListener(extensionListener);
+});
diff --git a/devtools.html b/devtools.html
@@ -1 +1,5 @@
-<script src="devtools.js"></script>
+<html>
+  <body>
+    <script src="devtools.js"></script>
+  </body>
+</html>
diff --git a/manifest.json b/manifest.json
@@ -1,6 +1,6 @@
 {
     "name": "Mixpanel Tools",
-    "version": "0.9",
+    "version": "1.0.0",
     "description": "A debugger tool helps to intercept mixpanel events and display event properties",
     "short_name": "mixpanel tools",
     "icons": {
@@ -10,10 +10,15 @@
     },
     "devtools_page": "devtools.html",
     "background": {
-        "scripts": [
+        "servicewroker": [
             "background.js"
         ]
     },
-    "permissions": [],
-    "manifest_version": 2
+    "permissions": [
+        "storage"
+    ],
+    "manifest_version": 3,
+    "action": {
+        "default_popup": "popup.html"
+    }
 }
diff --git a/panel.html b/panel.html
@@ -1,80 +1,122 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <link href="./libs/semantic.min.css" rel="stylesheet" />
+    <link href="./src/index.css" rel="stylesheet" />
+  </head>
 
-<head>
-  <link href="./libs/semantic.min.css" rel="stylesheet" />
-  <link href="./src/index.css" rel="stylesheet" />
-</head>
-
-<body>
-  <nav class="ui fixed menu">
-    <div class="ui menu fluid container">
+  <body>
+    <nav class="ui fixed menu" id="menu-container">
       <div class="ui menu fluid container">
-        <a href="https://github.com/nithincvpoyyil/mixpanel-tools" target="_blank" class="header item" tabindex="0">
+        <a
+          href="https://github.com/nithincvpoyyil/mixpanel-tools"
+          target="_blank"
+          class="header item"
+          tabindex="0"
+        >
           <img class="logo" src="assets/images/logo.png" aria-hidden="true" />
           Mixpanel Tools
         </a>
-        <a role="button" title="enable or disable recording" class="item record-btn">
-          <i aria-hidden="true" class="led circle icon"></i></a>
+        <a
+          role="button"
+          title="enable or disable recording"
+          class="item record-btn"
+        >
+          <i aria-hidden="true" class="led circle icon"></i
+        ></a>
         <a role="button" title="clear all recording" class="item clear-all-btn">
-          <i aria-hidden="true" class="eraser icon"></i></a>
-        <a role="button" class="item mixpanel-properties-btn"
-          title="show or hide mixpanel properties associated with event">
-          Hide Mixpanel Properties: <i class=" check square outline icon" aria-hidden="true"></i></a>
-        <a role="button" class="item download-btn" title="download all recording in JSON">
+          <i aria-hidden="true" class="eraser icon"></i
+        ></a>
+        <a
+          role="button"
+          class="item mixpanel-properties-btn"
+          title="show or hide mixpanel properties associated with event"
+        >
+          Hide Mixpanel Properties:
+          <i class="check square outline icon" aria-hidden="true"></i
+        ></a>
+        <a
+          role="button"
+          class="item download-btn"
+          title="download all recording in JSON"
+        >
           <i aria-hidden="true" class="download icon"></i>
         </a>
 
         <div class="item api-url-regex">
-          <div class="ui icon input" >
-            <input type="text" placeholder="Add self-hosted URL..." id="custom-api-host-input" title="Add your self-hosted URL,like `http://proxy:8080/mixpanel`. (note - not regex, this is using a string include logic">
+          <div class="ui icon input">
+            <input
+              type="text"
+              placeholder="Add self-hosted URL"
+              id="custom-api-host-input"
+              title="Add self-hosted URL,like `http://proxy:8080/mixpanel` (note - not regex, extension using a string include logic)"
+            />
             <i class="cogs icon"></i>
           </div>
         </div>
 
-        <a role="text" class="item batched-request" id="batched-request-id" title="Info: requests are batched">
-          <span class="batched-text">Batch Requests Enabled:</span><i aria-hidden="true" class=" check square icon"></i>
+        <a
+          role="text"
+          class="item batched-request"
+          id="batched-request-id"
+          title="Info: requests are batched"
+        >
+          <span class="batched-text">Batch Requests Enabled:</span
+          ><i aria-hidden="true" class="check square icon"></i>
         </a>
-
       </div>
-    </div>
-  </nav>
-  <!-- event container -->
-  <section id="root" class="ui main fluid container">
-    <div class="ui internally celled grid">
-      <div class="row">
-        <div class="six wide column event-column">
-          <h3>Events</h3>
-          <div class="ui relaxed divided list" id="event-list"></div>
-        </div>
-        <div class="ten wide column details-column">
-          <h3>Properties</h3>
-          <table class="ui fixed table striped" id="property-table">
-            <tbody></tbody>
-          </table>
+    </nav>
+    <!-- event container -->
+    <main id="main-container">
+      <div class="ui main fluid container" id="main-container-wrapper">
+        <div class="ui internally celled grid" id="main-container-grid">
+          <div class="row header-row">
+            <div class="six wide column">
+              <h3>Events</h3>
+            </div>
+            <div class="ten wide column">
+              <h3>Properties</h3>
+            </div>
+          </div>
+          <div class="row details-row" id="details-row">
+            <div class="six wide column event-column" id="event-column">
+              <div class="ui relaxed divided list" id="event-list"></div>
+            </div>
+            <div class="ten wide column details-column" id="details-column">
+              <table class="ui fixed table celled striped" id="property-table">
+                <thead>
+                  <tr>
+                    <th>property</th>
+                    <th>value</th>
+                  </tr>
+                </thead>
+                <tbody></tbody>
+              </table>
+              <!-- Scroll up button -->
+              <button id="details-scroll-up-btn" class="scroll-btn">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
+                  <path
+                    style="fill: currentColor; fill-opacity: 1; stroke: none"
+                    d="M 11 3 C 6.568 3 3 6.568 3 11 C 3 15.432 6.568 19 11 19 C 15.432 19 19 15.432 19 11 C 19 6.568 15.432 3 11 3 z M 11 4 C 14.878 4 18 7.122 18 11 C 18 14.878 14.878 18 11 18 C 7.122 18 4 14.878 4 11 C 4 7.122 7.122 4 11 4 z M 12.292969 7 L 9 10.292969 L 8.2929688 11 L 9 11.707031 L 12.292969 15 L 13 14.292969 L 9.7070312 11 L 13 7.7070312 L 12.292969 7 z "
+                    class="ColorScheme-Text"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
-  </section>
-  <!-- event container -->
-
-  <!-- do not remove, this '<a/>'' is for creating downloads -->
-  <a id="download-anchor-node" style="display:none"></a>
+    </main>
+    <!-- event container -->
 
-  <!-- Scroll up button -->
-  <button id="scroll-up-btn">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
-      <path style="fill:currentColor;fill-opacity:1;stroke:none"
-        d="M 11 3 C 6.568 3 3 6.568 3 11 C 3 15.432 6.568 19 11 19 C 15.432 19 19 15.432 19 11 C 19 6.568 15.432 3 11 3 z M 11 4 C 14.878 4 18 7.122 18 11 C 18 14.878 14.878 18 11 18 C 7.122 18 4 14.878 4 11 C 4 7.122 7.122 4 11 4 z M 12.292969 7 L 9 10.292969 L 8.2929688 11 L 9 11.707031 L 12.292969 15 L 13 14.292969 L 9.7070312 11 L 13 7.7070312 L 12.292969 7 z "
-        class="ColorScheme-Text" />
-    </svg>
-  </button>
-  <!-- /Scroll up button -->
-  <script src="./libs/jquery-3.3.1.min.js"></script>
-  <script src="./libs/semantic.min.js"></script>
-  <script src="./src/constants.js"></script>
-  <script src="./src/utils/devtool.util.js"></script>
-  <script src="./src/index.js"></script>
-</body>
+    <!-- do not remove, this '<a/>'' is for creating downloads -->
+    <a id="download-anchor-node" style="display: none"></a>
 
-</html>
+    <!-- /Scroll up button -->
+    <script src="./libs/jquery-3.3.1.min.js"></script>
+    <script src="./libs/semantic.min.js"></script>
+    <script src="./src/constants.js"></script>
+    <script src="./src/utils/devtool.util.js"></script>
+    <script src="./src/index.js"></script>
+  </body>
+</html>
diff --git a/popup.html b/popup.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Mixpanel tools</title>
+    <style>
+      body {
+        min-width: 300px;
+        font-size: 12px;
+        padding: 10px 20px;
+      }
+      h2 {
+        font-size: 16px;
+      }
+
+      .header-list {
+        display: none;
+      }
+
+      ul {
+        color: blue;
+      }
+    </style>
+  </head>
+
+  <body>
+    <h2>Mixpanel tools</h2>
+    <p>
+      A debugger tool helps to intercept mixpanel events and display event
+      properties
+    </p>
+
+    <main id="main">
+      <div class="header-list" id="header-list">
+        List of API hosts configured before,
+      </div>
+      <ul id="prev-url-list"></ul>
+    </main>
+
+    <script src="popup.js" type="module"></script>
+  </body>
+</html>
diff --git a/popup.js b/popup.js
@@ -0,0 +1,27 @@
+async function createList() {
+  const { SAVED_URL_KEY } = await chrome.storage.sync.get("SAVED_URL_KEY");
+  const { SAVED_URL_KEY_LIST = [] } = await chrome.storage.sync.get(
+    "SAVED_URL_KEY_LIST"
+  );
+  const saveURLs = new Set(SAVED_URL_KEY_LIST);
+  if (!saveURLs.has(SAVED_URL_KEY)) {
+    saveURLs.add(SAVED_URL_KEY);
+  }
+
+  const mainList = document.getElementById("prev-url-list");
+  const header = document.getElementById("header-list");
+
+  if (saveURLs.size > 0) {
+    header.style.display = "block";
+    for (const savedURL of saveURLs) {
+      const li = document.createElement("li");
+      li.textContent = savedURL;
+      mainList.appendChild(li);
+    }
+    await chrome.storage.sync.set({ SAVED_URL_KEY_LIST: Array.from(saveURLs) });
+  }
+}
+
+createList().catch((error) => {
+  console.error(error);
+});