roymckenzie · kip-13 · Oct 31, 2023 · Oct 31, 2023 · Oct 31, 2023 · Oct 31, 2023
diff --git a/manifest.json b/manifest.json
@@ -4,7 +4,8 @@
   "manifest_version": 3,
   "description": "Detects zero-width characters, highlights the characters and containing DOM element, and allows sanitization and copying of text.",
   "homepage_url": "https://github.com/roymckenzie/detect-zero-width-characters-chrome-extension",
-  "permissions": ["contextMenus", "clipboardWrite"],
+  "permissions": ["contextMenus", "clipboardWrite", "storage"],
+  "options_page": "src/pages/options.html",
   "background": {
     "service_worker": "src/background/service-worker.js"
   },
@@ -20,7 +21,7 @@
     },
     {
       "matches": ["http://*/*", "https://*/*"],
-      "js": ["src/helpers/constants.js", "src/helpers/utils.js", "src/inject/inject.js"]
+      "js": ["src/helpers/constants.js", "src/helpers/utils.js", "src/helpers/options.js", "src/inject/inject.js"]
     }
   ]
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/helpers/constants.js b/src/helpers/constants.js
@@ -4,3 +4,11 @@
  * @since 0.0.1
  */
 const zeroWidthCharacterCodes = [8203, 8204, 8205, 8288];
+
+/** @type {Options} */
+const defaultOptions = {
+    CHECK_PAGE_IN_SECS: {
+        name: "check_page_delay_secs",
+        value: 0,
+    },
+}
diff --git a/src/helpers/options.js b/src/helpers/options.js
@@ -0,0 +1,14 @@
+/**
+ * @returns {Promise<Options>}
+ */
+const getOptions = async () => {
+  return await chrome.storage.sync.get(defaultOptions);
+}
+
+/**
+ * 
+ * @param {Options} opts 
+ */
+const setOptions = async (opts) => {
+  await chrome.storage.sync.set(opts)
+}
diff --git a/src/helpers/utils.js b/src/helpers/utils.js
@@ -32,3 +32,7 @@ const copyTextToClipboard = (text) => {
 
   body.removeChild(textArea);
 };
+
+const wait = (secs) => {
+  return new Promise(resolve => setTimeout(resolve, secs * 1000));
+}
diff --git a/src/inject/inject.js b/src/inject/inject.js
@@ -73,7 +73,13 @@
    *
    * @since 0.0.1
    */
-  const checkPage = () => {
+  const checkPage = async () => {
+    const opts = await getOptions()
+
+    if (opts.CHECK_PAGE_IN_SECS.value > 0) {
+      await wait(opts.CHECK_PAGE_IN_SECS.value)
+    }
+
     const allElements = document.getElementsByTagName("*");
 
     [...allElements].forEach(checkElement);

diff --git a/src/pages/options.html b/src/pages/options.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Detect zero width characteres extension: Options</title>
+</head>
+<body>
+    <div class="content">
+        <h1>Detect zero width characteres extension: Options</h1>
+        <div class="option">
+            <div>Check page delay in secs</div>
+            <div><input type="number" min="0" id="check_page_delay_secs"></div>
+        </div>
+    </div>
+    <script src="./../helpers/constants.js"></script>
+    <script src="./../helpers/options.js"></script>
+    <script src="./options.js"></script>
+</body>
+</html>
diff --git a/src/pages/options.js b/src/pages/options.js
@@ -0,0 +1,27 @@
+const saveOptions = async (e) => {
+  e.target.disabled = true
+  const value = e.target.value
+
+  await setOptions({
+    CHECK_PAGE_IN_SECS: {
+      name: e.target.id,
+      value,
+    },
+  })
+
+  e.target.disabled = false
+};
+
+
+const restoreOptions = async () => {
+  const opts = await getOptions()
+
+  Object.values(opts).forEach((opt) => {
+    if (opt.name === "check_page_delay_secs") {
+      document.querySelector('#check_page_delay_secs').value = opt.value
+    }
+  })
+};
+
+document.addEventListener('DOMContentLoaded', restoreOptions);
+document.querySelector('#check_page_delay_secs').addEventListener('change', saveOptions);
diff --git a/src/typdef.js b/src/typdef.js
@@ -12,3 +12,17 @@
  * @property {"sanitizeAndCopyContextMenuItemAction"} type
  * @property {string} text - The text to copy to clipboard.
  */
+
+
+/**
+ * @typedef {object} Options
+ * 
+ * @property {Option} CHECK_PAGE_IN_SECS
+ */
+
+/**
+ * @typedef {object} Option
+ * 
+ * @property {string} name
+ * @property {*} value
+ */