'Load styles' link below 'Find styles for this site' -- does nothing

_locales/en/messages.json

@@ -333,6 +333,10 @@
       }
     }
   },
+  "loadStylesForSite": {
+    "message": "Load Styles",
+    "description": "Text for a link that loads styles within the popup"
+  },
   "findStylesForSite": {
     "message": "Find more styles for this site",
     "description": "Text for a link that gets a list of styles for the current site"

popup.html

@@ -113,6 +113,10 @@
     </div>
     <div class="left-gutter"></div>
     <div class="main-controls">
+      <div id="load-styles">
+        <a id="load-styles-link" href="#"
+           i18n-text="loadStylesForSite"></a>
+      </div>
       <div id="find-styles">
         <a id="find-styles-link" href="https://userstyles.org/styles/browse/"
            i18n-text="findStylesForSite"></a>

popup/popup.js

@@ -106,6 +106,8 @@ function initPopup(url) {
       installed);
   }
 
+  $('#load-styles-link').onclick = handleEvent.loadRemoteStyles;
+
   $('#find-styles-link').onclick = handleEvent.openURLandHide;
   $('#find-styles-link').href +=
     url.startsWith(location.protocol) ?
@@ -389,6 +391,11 @@ Object.assign(handleEvent, {
     }
   },
 
+  loadRemoteStyles(event) {
+    event.preventDefault();
+    console.log("loadRemoteStyles event:", event);
+  },
+
   openURLandHide(event) {
     event.preventDefault();
     openURL({url: this.href || this.dataset.href})