Add debug mode, fix Mint update bug (#23)

- Fixed race condition in Mint update script where save callback could be called before it was initialized. (Fixes #22)
- Added a debug mode to facilitate debugging and support. This mode will log to either the background script or the console on the pages where content scripts are running.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "robinhood-mint-sync-chrome",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/pkmnct/robinhood-mint-sync-chrome.git"

public/html/settings.html

@@ -66,6 +66,22 @@ <h2>Triangle Indicator Fix</h2>
           />
           <label for="setting-fixTriangle">Triangle Indicator Fix</label>
         </section>
+        <section id="debugMode" class="main">
+          <header class="major">
+            <h2>Debug Mode</h2>
+          </header>
+          <p>
+            Enables logging and disables closing of Robinhood/Mint extension
+            windows for debugging purposes. To see the logs, enable developer
+            mode in Chrome and inspect the background page of the extension.
+          </p>
+          <input
+            type="checkbox"
+            id="setting-debugMode"
+            name="setting-debugMode"
+          />
+          <label for="setting-debugMode">Debug Mode</label>
+        </section>
       </div>
 
       <!-- Footer -->

public/html/welcome.html

@@ -174,36 +174,16 @@ <h2>Reporting a Problem</h2>
       <footer id="footer">
         <section>
           <h2>Version History</h2>
-          <aside class="version">
-            <h4>Version 3.0.0</h4>
-            <p>
-              Robinhood scraping has been improved, and will now show up as
-              separate properties in Mint for each type of asset. A bug with the
-              Robinhood login page detection has been resolved. Various code
-              improvements to facilitate faster development in the future.
-            </p>
-          </aside>
           <ul class="actions">
             <li>
               <a
                 href="https://pkmnct.github.io/robinhood-mint-sync-chrome/changelog.html"
                 class="button"
-                >View Full Changelog</a
+                >View Changelog</a
               >
             </li>
           </ul>
         </section>
-        <section>
-          <h2>&nbsp;</h2>
-          <aside class="version">
-            <h4>Version 2.0.0</h4>
-            <p>
-              Fixed an issue where the Robinhood portfolio balance scrape was
-              not working due to updates to their site. Removed Google
-              Analytics.
-            </p>
-          </aside>
-        </section>
         <p class="copyright">
           <a href="licenses.html">View extension and third-party licenses</a>
         </p>

public/manifest.json

@@ -3,7 +3,7 @@
 
   "name": "Robinhood Mint Sync for Chrome",
   "description": "Automatically add your Robinhood portfolio to Mint",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "author": "George Walker",
 
   "icons": {

src/background/browser_action.ts

@@ -1,13 +1,9 @@
-import { log } from "../utilities/logging";
-const logConfig = {
-  type: "background",
-  name: "Browser Action",
-};
+import { Debug } from "../utilities/debug";
 
-log(logConfig, "initialized");
+const debug = new Debug("background", "Browser Action");
 
 chrome.browserAction.onClicked.addListener((tab) => {
-  log(logConfig, "browser action triggered");
+  debug.log("browser action triggered");
   chrome.tabs.create({
     url: chrome.extension.getURL("html/welcome.html"),
     active: true,

src/background/main.ts

@@ -1,12 +1,7 @@
 import { urls } from "../urls";
-import { log } from "../utilities/logging";
+import { Debug } from "../utilities/debug";
 
-const logConfig = {
-  type: "background",
-  name: "Main",
-};
-
-log(logConfig, "initialized");
+const debug = new Debug("background", "Main");
 
 // Need to be able to access this regardless of the message.
 let mintTab;
@@ -20,22 +15,22 @@ interface eventHandler {
 const eventHandlers = {
   // This event is emitted by the main Robinhood content script.
   "robinhood-login-needed": ({ sender }: eventHandler) => {
-    log(logConfig, "robinhood-login-needed event");
+   debug.log("robinhood-login-needed event");
     chrome.tabs.sendMessage(mintTab, {
       status: "You need to log in to Robinhood",
       link: urls.robinhood.login,
       linkText: "Login",
       persistent: true,
       newTab: true,
     });
-    chrome.tabs.remove(sender.tab.id);
+    if (!debug.isEnabled()) chrome.tabs.remove(sender.tab.id);
   },
   // This event is emitted by the login Robinhood content script.
   "robinhood-login-success": ({ sender }: eventHandler) => {
-    log(logConfig, "robinhood-login-success event");
+   debug.log("robinhood-login-success event");
 
     // Close the Robinhood tab logged in from
-    chrome.tabs.remove(sender.tab.id);
+    if (!debug.isEnabled()) chrome.tabs.remove(sender.tab.id);
 
     // Trigger the sync
     chrome.tabs.create({
@@ -51,7 +46,7 @@ const eventHandlers = {
   },
   // This event is emitted by the main Robinhood content script.
   "robinhood-portfolio-scraped": ({ sender, message }: eventHandler) => {
-    log(logConfig, "robinhood-portfolio-scraped event");
+   debug.log("robinhood-portfolio-scraped event");
     // Trigger the Mint portfolio update content script
     chrome.tabs.create(
       {
@@ -60,26 +55,29 @@ const eventHandlers = {
         openerTabId: sender.tab.id,
       },
       (tab) => {
+        debug.log("waiting for Mint tab to load")
         const checkIfLoaded = () => {
           chrome.tabs.get(tab.id, (tab) => {
             if (!tab) {
               clearInterval(sendMessageInterval);
+              debug.log("tab was not found. Clearing interval to prevent endless loop.");
             }
             if (tab.status === "complete") {
               // Once the tab is loaded, pass the message to it
               chrome.tabs.sendMessage(tab.id, message);
               clearInterval(sendMessageInterval);
+              debug.log("Mint tab loaded");
             }
           });
         };
         const sendMessageInterval = setInterval(checkIfLoaded, 200);
       }
     );
-    chrome.tabs.remove(sender.tab.id);
+    if (!debug.isEnabled()) chrome.tabs.remove(sender.tab.id);
   },
   // This event is emitted by the Mint main content script.
   "mint-force-sync": () => {
-    log(logConfig, "mint-force-sync event");
+   debug.log("mint-force-sync event");
     // Trigger the main Robinhood sync script
     chrome.tabs.create({
       url: urls.robinhood.scrape,
@@ -89,19 +87,19 @@ const eventHandlers = {
   },
   // This event is emitted by the Mint property create content script.
   "mint-property-added": ({ sender }: eventHandler) => {
-    log(logConfig, "mint-property-added event");
-    chrome.tabs.remove(sender.tab.id);
+   debug.log("mint-property-added event");
+   if (!debug.isEnabled()) chrome.tabs.remove(sender.tab.id);
   },
   // This event is emitted by the Mint property check content script.
   "mint-property-setup-complete": ({ sender }: eventHandler) => {
-    log(logConfig, "mint-property-setup-complete event");
+   debug.log("mint-property-setup-complete event");
 
     chrome.storage.sync.set({
       propertiesSetup: true,
       needsOldPropertyRemoved: false,
     });
 
-    chrome.tabs.remove(sender.tab.id);
+    if (!debug.isEnabled()) chrome.tabs.remove(sender.tab.id);
     chrome.tabs.sendMessage(mintTab, {
       status: "Setup complete! Initiating Sync.",
       persistent: true,
@@ -121,7 +119,7 @@ const eventHandlers = {
   },
   // This event is emitted by the Mint property update content script.
   "mint-sync-complete": () => {
-    log(logConfig, "mint-sync-complete event");
+   debug.log("mint-sync-complete event");
     chrome.storage.sync.set({ syncTime: new Date().toString() });
     chrome.tabs.sendMessage(mintTab, {
       status: "Sync Complete! Reload to see the change.",
@@ -132,7 +130,7 @@ const eventHandlers = {
   },
   // This event is emitted by the main Mint content script
   "mint-opened": ({ sender }: eventHandler) => {
-    log(logConfig, "mint-opened event");
+   debug.log("mint-opened event");
     // Store a reference to the mint tab to be able to show the notifications
     mintTab = sender.tab.id;
 
@@ -200,15 +198,15 @@ const eventHandlers = {
   },
   // This event is emitted by the Mint property check content script.
   "mint-create": ({ message, sender }: eventHandler) => {
-    log(logConfig, "mint-create event");
+   debug.log("mint-create event");
     chrome.tabs.create({
       url: urls.mint.properties.create + "&property=" + message.property,
       active: false,
     });
   },
   // This event is emitted by the Mint property check content script.
   "mint-property-remove": ({ message, sender }: eventHandler) => {
-    log(logConfig, "mint-property-remove event");
+   debug.log("mint-property-remove event");
     chrome.tabs.sendMessage(mintTab, {
       status:
         "Your account was set up prior to version 3 of this extension. Version 3 introduced separation of asset types when syncing. Please remove the old 'Robinhood Account' property from Mint to prevent duplication of your portfolio balance. Reload the overview to sync after removing the property.",
@@ -218,7 +216,7 @@ const eventHandlers = {
       newTab: true,
     });
     chrome.storage.sync.set({ needsOldPropertyRemoved: true });
-    chrome.tabs.remove(sender.tab.id);
+    if (!debug.isEnabled()) chrome.tabs.remove(sender.tab.id);
   },
 };
 

src/background/update_install_listener.ts

@@ -1,19 +1,15 @@
-import { log } from "../utilities/logging";
-const logConfig = {
-  type: "background",
-  name: "Update/Install Listener",
-};
+import { Debug } from "../utilities/debug";
 
-log(logConfig, "initialized");
+const debug = new Debug("background", "Update/Install Listener");
 
 chrome.runtime.onInstalled.addListener((details) => {
   if (details.reason === "install") {
     // When the extension is installed
-    log(logConfig, "install detected");
+    debug.log("install detected");
     window.open(chrome.extension.getURL("html/welcome.html"), "_blank");
   } else if (details.reason === "update") {
     // When the extension is updated
-    log(logConfig, "update detected");
+    debug.log("update detected");
     chrome.storage.sync.set({ updated: true });
   }
 });

src/content/mint/main.ts

@@ -1,8 +1,9 @@
 import { waitForElement } from "../../utilities/waitForElement";
 import { Notification } from "../../utilities/notification";
+import { Debug } from "../../utilities/debug";
+
+const debug = new Debug("content", "Mint - Main");
 
-// Wait a few seconds to start the sync, otherwise it will start before the login happens.
-console.log("Test");
 window.addEventListener("load", () => {
   waitForElement("#mintNavigation", null, () => {
     chrome.runtime.sendMessage({ event: "mint-opened" });

src/content/mint/properties/check.ts

@@ -4,6 +4,9 @@
 import { urls } from "../../../urls";
 import { Overlay } from "../../../utilities/overlay";
 import { waitForElement } from "../../../utilities/waitForElement";
+import { Debug } from "../../../utilities/debug";
+
+const debug = new Debug("content", "Mint - Properties - Check");
 
 new Overlay(
   "Checking if Robinhood account set up in Mint...",

src/content/mint/properties/create.ts

@@ -1,5 +1,8 @@
 import { Overlay } from "../../../utilities/overlay";
 import { waitForElement } from "../../../utilities/waitForElement";
+import { Debug } from "../../../utilities/debug";
+
+const debug = new Debug("content", "Mint - Properties - Create");
 
 const params = new URLSearchParams(document.location.search);
 const property = params.get("property");