Add preferences support

imdj · Jun 1, 2023 · 29e37cb · 29e37cb
1 parent efa72c9
commit 29e37cb
Show file tree

Hide file tree

Showing 7 changed files with 342 additions and 13 deletions.
diff --git a/css/popup.css b/css/popup.css
@@ -0,0 +1,183 @@
+html, body {
+    font-family: system-ui, sans-serif;
+}
+
+html {
+    max-height: 600px;
+    overflow-y: auto;
+}
+body {
+    width: 350px;
+    max-width: 100%;
+}
+
+.relative {
+    position: relative;
+}
+
+.flex {
+    display: flex;
+}
+
+.h-full {
+    height: 100%;
+}
+
+.w-full {
+    width: 100%;
+}
+
+.flex-col {
+    flex-direction: column;
+}
+
+.flex-row {
+    flex-direction: row;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.justify-between {
+    justify-content: space-between;
+}
+
+.items-baseline {
+    align-items: baseline;
+}
+
+.items-center {
+    align-items: center;
+}
+
+[class~="top-0.5"] {
+    top: 0.125rem;
+}
+
+.ml-2 {
+    margin-left: 0.5rem;
+}
+
+.ml-4 {
+    margin-left: 1rem;
+}
+
+.ml-8 {
+    margin-left: 2rem;
+}
+
+.mt-2 {
+    margin-top: 0.5rem;
+}
+
+.mt-3 {
+    margin-top: 0.75rem;
+}
+
+.mt-8 {
+    margin-top: 2rem;
+}
+
+.mb-auto {
+    margin-bottom: auto;
+}
+
+.mb-0 {
+    margin-bottom: 0;
+}
+
+.mb-2 {
+    margin-bottom: 0.5rem;
+}
+
+.mb-4 {
+    margin-bottom: 1rem;
+}
+
+.my-2 {
+    margin: 0.5rem 0;
+}
+
+.my-4 {
+    margin: 1rem 0;
+}
+
+.my-8 {
+    margin: 2rem 0;
+}
+
+.mt-auto {
+    margin-top: auto;
+}
+
+[class~="p-0.5"] {
+    padding: 0.125rem;
+}
+
+p {
+    margin: unset;
+    color: rgba(0, 0, 0, .6);
+}
+
+.btn {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.5rem;
+    border: 3px solid #E3E3E3;
+    cursor: pointer;
+    font-size: smaller;
+    color: #000;
+    background: #fff;
+    transition: 0.5s;
+    margin: 0 0.5rem;
+}
+
+a.btn {
+    text-decoration: none;
+}
+
+.btn:hover,
+.btn:focus {
+    background: #E3E3E3;
+}
+
+.btn svg {
+    margin-left: 10px;
+}
+
+input[type="checkbox"] {
+    position: relative;
+    width: 40px;
+    height: 20px;
+    -webkit-appearance: none;
+    appearance: none;
+    background: red;
+    outline: none;
+    border-radius: 2rem;
+    cursor: pointer;
+    box-shadow: inset 0 0 5px rgb(0 0 0 / 50%);
+}
+
+input[type="checkbox"]::before {
+    content: "";
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: #fff;
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    transition: 0.5s;
+}
+
+input[type="checkbox"]:checked::before {
+    transform: translateX(100%);
+    background: #fff;
+}
+
+input[type="checkbox"]:checked {
+    background: #00ed64;
+}
diff --git a/manifest.v2.json b/manifest.v2.json
@@ -9,6 +9,7 @@
     "128": "/assets/images/icon-128.png"
   },
   "permissions": [
+    "storage",
     "https://hn.algolia.com/api/*"
   ],
   "applications": {
@@ -28,5 +29,14 @@
         "./scripts/main.js"
       ]
     }
-  ]
+  ],
+  "browser_action": {
+    "default_icon": {
+      "16": "/assets/images/icon-16.png",
+      "48": "/assets/images/icon-48.png",
+      "128": "/assets/images/icon-128.png"
+    },
+    "default_popup": "./popup.html",
+    "default_title": "HNRelevant"
+  }
 }
diff --git a/manifest.v3.json b/manifest.v3.json
@@ -22,5 +22,17 @@
         "./scripts/main.js"
       ]
     }
-  ]
+  ],
+  "permissions": [
+    "storage"
+  ],
+  "action": {
+    "default_icon": {
+      "16": "/assets/images/icon-16.png",
+      "48": "/assets/images/icon-48.png",
+      "128": "/assets/images/icon-128.png"
+    },
+    "default_popup": "./popup.html",
+    "default_title": "HNRelevant"
+  }
 }
diff --git a/popup.html b/popup.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <title>HNRelevant Popup</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <link rel="stylesheet" href="css/popup.css">
+</head>
+<body class="flex h-full flex-col items-center">
+<div class="flex flex-col w-full">
+    <div class="ml-2">
+        <h3>Select mode</h3>
+        <div class="flex flex-row items-baseline">
+            <input type="radio" id="auto-mode" name="mode" value="auto" aria-describedby="auto-mode-desc" class="top-0.5 relative" checked>
+            <div class="ml-2">
+                <label for="auto-mode">Auto-pilot (Default)</label>
+                <p id="auto-mode-desc">Fetch results automatically on every submission (no interaction required)</p>
+            </div>
+        </div>
+        <div class="flex flex-row items-baseline">
+            <input type="radio" id="manual-mode" name="mode" value="manual" aria-describedby="manual-mode-desc" class="top-0.5 relative">
+            <div class="ml-2">
+                <label for="manual-mode">Manual mode</label>
+                <p id="manual-mode-desc">Fetch results only when requested by user manually</p>
+            </div>
+        </div>
+    </div>
+    <div class="ml-2">
+        <h3>Results</h3>
+        <div class="flex flex-row">
+            <select id="results" name="results" class="mb-auto p-0.5">
+                <option value="5" selected>5</option>
+                <option value="10">10</option>
+                <option value="15">15</option>
+                <option value="20">20</option>
+                <option value="30">30</option>
+            </select>
+            <label for="results" class="ml-4">Number of results displayed in the sidebar by default</label>
+        </div>
+    </div>
+</div>
+<footer class="flex flex-col mt-8 mb-2 justify-center items-center">
+    <span class="mb-2">Follow development on GitHub</span>
+    <a href="https://github.com/imdj/HNRelevant" class="btn ml-2" target="_blank">
+        <span>HNRelevant</span>
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 1024 1024" fill="none">
+            <path fill-rule="evenodd" clip-rule="evenodd"
+                  d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
+                  transform="scale(64)" fill="#1B1F23"/>
+        </svg>
+    </a>
+</footer>
+<script src="./scripts/popup.js" async></script>
+</body>
+</html>
diff --git a/scripts/dom.js b/scripts/dom.js
@@ -46,7 +46,7 @@ queryCustomizationInput.placeholder = 'Customize: ' + HN_SubmissionTitle;
 queryCustomizationInput.value = HN_SubmissionTitle;
 
 // Allow user to submit query by pressing enter
-queryCustomizationInput.addEventListener('keydown', function(event) {
+queryCustomizationInput.addEventListener('keydown', function (event) {
     if (event.code === 'Enter' && queryCustomizationInput === document.activeElement) {
         submitCustomizationButton.click();
     }
@@ -62,7 +62,7 @@ const numOfResultsDropdown = document.createElement('select');
 numOfResultsDropdown.style.marginLeft = '5px';
 numOfResultsDropdown.id = 'numOfResultsDropdown';
 ['5', '10', '15', '20', '30'].forEach(num => {
-    numOfResultsDropdown.add(new Option(num));
+    numOfResultsDropdown.add(new Option(num, num));
 });
 
 sidebarOptionsContainer.appendChild(numberOfResultsLabel);

diff --git a/scripts/main.js b/scripts/main.js
@@ -14,14 +14,27 @@ sidebar.appendChild(sidebarOptionsContainer);
 sidebar.appendChild(sidebarResults);
 HN_Content.appendChild(sidebar);
 
-// Make sure to run this after the page has loaded
-if(document.readyState !== 'complete') {
-    window.addEventListener('load',updateSidebarResults);
-} else {
-    updateSidebarResults();
-}
+(async () => {
+    // Get preferences from storage
+    // Mode: manual or automatic
+    const mode = await (chrome.storage.sync ? chrome.storage.sync.get('mode') : browser.storage.sync.get('mode'));
+
+    // Number of results: default to 5
+    const numOfResults = await (chrome.storage.sync ? chrome.storage.sync.get('results') : browser.storage.sync.get('results'));
+    numOfResultsDropdown.value = numOfResults ? numOfResults.results : '5';
+
+    // Don't run if mode is set to `manual`
+    if (mode.mode !== 'manual') {
+        // Make sure to run this after the page has loaded
+        if (document.readyState !== 'complete') {
+            window.addEventListener('load', updateSidebarResults);
+        } else {
+            updateSidebarResults();
+        }
+    }
 
 // Run on dropdown change (changing num of results: 5, 10, 15, 20, 30)
-numOfResultsDropdown.addEventListener('change', () =>
-    updateSidebarResults()
-);
+    numOfResultsDropdown.addEventListener('change', () =>
+        updateSidebarResults()
+    );
+})();