Add settings page, in JS (for now)

.gitignore

@@ -16,4 +16,5 @@
 /extension/background.js.map
 /extension/content.js
 /extension/content.js.map
+/extension/settings.*
 /pure_tabs.xpi

extension/manifest.json

@@ -21,5 +21,8 @@
     "scripts": ["background.js"],
     "persistent": true
   },
+  "options_ui": {
+    "page": "settings.html"
+  },
   "permissions": ["activeTab", "tabs", "storage", "nativeMessaging"]
 }

package.json

@@ -7,8 +7,8 @@
   },
   "scripts": {
     "parcel": "parcel",
-    "dev": "concurrently --kill-others \"spago build --watch\" \"parcel watch src/background.js src/content.js --dist-dir extension/\"",
-    "build": "spago build && parcel build src/background.js src/content.js --dist-dir extension/",
+    "dev": "concurrently --kill-others \"spago build --watch\" \"parcel watch src/background.js src/content.js src/settings.html src/settings.js --dist-dir extension/\"",
+    "build": "spago build && parcel build src/background.js src/content.js src/settings.html src/settings.js --dist-dir extension/",
     "build-lib": "spago bundle-module -m LinkedIn",
     "test": "spago test",
     "clean": "rm -rf .cache .psci_modules modules dist extension/background.js extension/background.js.map extension/content.js extension/content.js.map",

src/Background.purs

@@ -15,7 +15,7 @@ import Effect.Class (class MonadEffect, liftEffect)
 import Effect.Class.Console (log, logShow)
 import ExampleWebExt.NativeMessage (NativeMessage(..), connectToNativeApplication, onNativeMessageAddListener, sendMessageToNative)
 import ExampleWebExt.RuntimeMessage (RuntimeMessage(..), mkRuntimeMessageHandler, sendMessageToContent)
-import ExampleWebExt.Storage (getJobsPath, setJobsPath)
+import ExampleWebExt.Storage (getJobsPath)
 
 main :: Effect Unit
 main = do
@@ -23,7 +23,6 @@ main = do
   port <- connectToNativeApplication "job_search_writer"
   onNativeMessageAddListener port nativeMessageHandler
 
-  setJobsPath "/tmp/dummy/path/value"
   sendConfigurationToNative port
 
   onClickedAddListener $ mkListener browserActionOnClickedHandler

src/settings.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+</head>
+
+<body>
+    <form>
+        <label>Jobs catalog path
+            <input type="text" id="jobs-path" name="jobs-path" placeholder="path to the jobs catalog" />
+        </label>
+        <button type="submit">Save</button>
+    </form>
+
+    <script src="settings.js"></script>
+</body>
+
+</html>

src/settings.js

@@ -0,0 +1,9 @@
+document.addEventListener("DOMContentLoaded", async (e) => {
+    const jobsPath = await browser.storage.sync.get("jobsPath");
+    document.querySelector("#jobs-path").value = jobsPath.jobsPath || "";
+});
+
+document.querySelector("form").addEventListener("submit", (e) => {
+    e.preventDefault();
+    browser.storage.sync.set({jobsPath: document.querySelector("#jobs-path").value});
+});