2 files changed, 276 insertions, 0 deletions
diff --git a/src/pages/popup/popup.html b/src/pages/popup/popup.html
new file mode 100644
index 00000000..43a4a1a8
--- /dev/null
+++ b/src/pages/popup/popup.html
@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title></title>
+    <link href="../../assets/stylesheets/styles.css" rel="stylesheet" />
+  </head>
+
+  <body class="popup">
+    <header class="popup">
+      <div class="logo-container">
+        <img
+          src="../../assets/images/icon128.png"
+          alt="Privacy Redirect logo"
+        />
+        <h1>
+          <span data-localise="__MSG_privacy__" class="privacy">Privacy</span
+          ><br /><span data-localise="__MSG_redirect__">Redirect</span>
+        </h1>
+      </div>
+      <div class="version">
+        <span data-localise="__MSG_version__">Version</span>:&nbsp;<span
+          id="version"
+        ></span>
+      </div>
+    </header>
+
+    <section class="settings-block">
+      <table class="option" aria-label="Toggle Nitter redirects">
+        <tbody>
+          <tr>
+            <td>
+              <h1 data-localise="__MSG_disableNitter__">Nitter Redirects</h1>
+            </td>
+            <td>
+              <input
+                aria-hidden="true"
+                id="disable-nitter"
+                type="checkbox"
+                checked
+              />&nbsp;
+              <label for="disable-nitter" class="checkbox-label"></label>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+
+    <section class="settings-block">
+      <table class="option" aria-label="Toggle Invidious redirects">
+        <tbody>
+          <tr>
+            <td>
+              <h1 data-localise="__MSG_disableInvidious__">
+                Invidious Redirects
+              </h1>
+            </td>
+            <td>
+              <input
+                aria-hidden="true"
+                id="disable-invidious"
+                type="checkbox"
+                checked
+              />&nbsp;
+              <label for="disable-invidious" class="checkbox-label"> </label>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+
+    <section class="settings-block">
+      <table class="option" aria-label="Toggle Bibliogram redirects">
+        <tbody>
+          <tr>
+            <td>
+              <h1 data-localise="__MSG_disableBibliogram__">
+                Bibliogram Redirects
+              </h1>
+            </td>
+            <td>
+              <input
+                aria-hidden="true"
+                id="disable-bibliogram"
+                type="checkbox"
+                checked
+              />&nbsp;
+              <label for="disable-bibliogram" class="checkbox-label"> </label>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+
+    <section class="settings-block">
+      <table class="option" aria-label="Toggle OpenStreetMap redirects">
+        <tbody>
+          <tr>
+            <td>
+              <h1 data-localise="__MSG_disableOsm__">
+                OpenStreetMap Redirects
+              </h1>
+            </td>
+            <td>
+              <input
+                aria-hidden="true"
+                id="disable-osm"
+                type="checkbox"
+                checked
+              />&nbsp;
+              <label for="disable-osm" class="checkbox-label"> </label>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+
+    <section class="settings-block">
+      <table class="option" aria-label="Toggle old Reddit redirects">
+        <tbody>
+          <tr>
+            <td>
+              <h1 data-localise="__MSG_disableReddit__">Reddit Redirects</h1>
+            </td>
+            <td>
+              <input
+                aria-hidden="true"
+                id="disable-reddit"
+                type="checkbox"
+                checked
+              />&nbsp;
+              <label for="disable-reddit" class="checkbox-label"> </label>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+
+    <section class="settings-block">
+      <table class="option" aria-label="Toggle Search Engine redirects">
+        <tbody>
+          <tr>
+            <td>
+              <h1 data-localise="__MSG_disableSearchEngine__">
+                Search Engine Redirects
+              </h1>
+            </td>
+            <td>
+              <input
+                aria-hidden="true"
+                id="disable-searchEngine"
+                type="checkbox"
+                checked
+              />&nbsp;
+              <label for="disable-searchEngine" class="checkbox-label"></label>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+
+    <section class="settings-block"></section>
+
+    <footer>
+      <a class="button" id="more-options">
+        <span data-localise="__MSG_moreOptions__">More Options&nbsp;</span>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="512"
+          height="512"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M384,224V408a40,40,0,0,1-40,40H104a40,40,0,0,1-40-40V168a40,40,0,0,1,40-40H271.48"
+            style="
+              fill: none;
+              stroke: inherit;
+              stroke-linecap: round;
+              stroke-linejoin: round;
+              stroke-width: 32px;
+            "
+          />
+          <polyline
+            points="336 64 448 64 448 176"
+            style="
+              fill: none;
+              stroke: inherit;
+              stroke-linecap: round;
+              stroke-linejoin: round;
+              stroke-width: 32px;
+            "
+          />
+          <line
+            x1="224"
+            y1="288"
+            x2="440"
+            y2="72"
+            style="
+              fill: none;
+              stroke: inherit;
+              stroke-linecap: round;
+              stroke-linejoin: round;
+              stroke-width: 32px;
+            "
+          />
+        </svg>
+      </a>
+    </footer>
+
+    <script type="module" src="./popup.js"></script>
+    <script src="../../assets/javascripts/localise.js"></script>
+  </body>
+</html>
diff --git a/src/pages/popup/popup.js b/src/pages/popup/popup.js
new file mode 100644
index 00000000..0afb2f97
--- /dev/null
+++ b/src/pages/popup/popup.js
@@ -0,0 +1,62 @@
+"use strict";
+
+let disableNitter = document.querySelector("#disable-nitter");
+let disableInvidious = document.querySelector("#disable-invidious");
+let disableBibliogram = document.querySelector("#disable-bibliogram");
+let disableOsm = document.querySelector("#disable-osm");
+let disableReddit = document.querySelector("#disable-reddit");
+let disableSearchEngine = document.querySelector("#disable-searchEngine");
+let version = document.querySelector("#version");
+
+window.browser = window.browser || window.chrome;
+
+browser.storage.sync.get(
+  [
+    "disableNitter",
+    "disableInvidious",
+    "disableBibliogram",
+    "disableOsm",
+    "disableReddit",
+    "disableSearchEngine",
+    "theme",
+  ],
+  (result) => {
+    if (result.theme) document.body.classList.add(result.theme);
+    disableNitter.checked = !result.disableNitter;
+    disableInvidious.checked = !result.disableInvidious;
+    disableBibliogram.checked = !result.disableBibliogram;
+    disableOsm.checked = !result.disableOsm;
+    disableReddit.checked = !result.disableReddit;
+    disableSearchEngine.checked = !result.disableSearchEngine;
+  }
+);
+
+version.textContent = browser.runtime.getManifest().version;
+
+disableNitter.addEventListener("change", (event) => {
+  browser.storage.sync.set({ disableNitter: !event.target.checked });
+});
+
+disableInvidious.addEventListener("change", (event) => {
+  browser.storage.sync.set({ disableInvidious: !event.target.checked });
+});
+
+disableBibliogram.addEventListener("change", (event) => {
+  browser.storage.sync.set({ disableBibliogram: !event.target.checked });
+});
+
+disableOsm.addEventListener("change", (event) => {
+  browser.storage.sync.set({ disableOsm: !event.target.checked });
+});
+
+disableReddit.addEventListener("change", (event) => {
+  browser.storage.sync.set({ disableReddit: !event.target.checked });
+});
+
+disableSearchEngine.addEventListener("change", (event) => {
+  browser.storage.sync.set({ disableSearchEngine: !event.target.checked });
+});
+
+document.querySelector("#more-options").addEventListener("click", () => {
+  browser.runtime.openOptionsPage();
+});