Merge pull request #12 from hbz/18-ExtensionOptions

feat: Option to set a default schema URL
skohub-io · Mar 13, 2020 · c3b462e · c3b462e
2 parents 58663fc + ea0815e
commit c3b462e
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "skohub-extension",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "",
   "main": "index.js",
   "scripts": {

diff --git a/src/manifest.json b/src/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "__MSG_extensionName__",
   "short_name": "__MSG_extensionName__",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "default_locale": "en",
 
   "description": "__MSG_extensionDescription__",
@@ -35,6 +35,11 @@
   ],
 
   "permissions": [
-    "activeTab"
-  ]
+    "activeTab",
+    "storage"
+  ],
+  "options_ui": {
+    "page": "options.html",
+    "open_in_tab": false
+  }
 }
diff --git a/src/options.html b/src/options.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Options</title>
+
+  <style>
+    body {
+      padding: 10px 20px;
+      color: hsl(0, 0%, 24%);
+    }
+
+    .formGroup {
+      display: flex;
+      flex-direction: column;
+    }
+
+    label {
+      font-weight: bold;
+      font-size: 16px;
+      margin-bottom: 5px;
+    }
+
+    .styledInput {
+      background-color: rgb(242, 245, 247);
+      box-shadow: 2px 2px 0 0 hsl(0, 0%, 24%);
+      border: none;
+      cursor: pointer;
+      border: 1px solid hsl(0, 0%, 24%);
+      color: hsl(0, 0%, 24%);
+      padding: 5px 10px;
+    }
+
+    .styledInput:focus,
+    .styledInput:hover {
+      background-color: hsl(192, 8.2%, 88%);
+    }
+
+    #saveBtn {
+      margin-top: 20px;
+    }
+
+  </style>
+
+</head>
+<body>
+  <form id="optionsForm">
+
+    <div class="formGroup">
+      <label for="defaultSchema">
+        Default schema URL
+      </label>
+      <input
+        class="styledInput"
+        type="url"
+        id="defaultSchema"
+        placeholder="https://yourURL..."
+      >
+    </div>
+
+    <button class="styledInput" id="saveBtn" type="submit">
+      Save
+    </button>
+  </form>
+
+  <script src="options.js"></script>
+
+</body>
+</html>
diff --git a/src/options.js b/src/options.js
@@ -0,0 +1,25 @@
+/* global chrome */
+const saveOptions = async (e) => {
+  e.preventDefault()
+  const { value } = document.getElementById('defaultSchema')
+  const saveBtn = document.getElementById('saveBtn')
+  await chrome.storage.local.set({
+    defaultSchema: value
+  })
+
+  saveBtn.textContent = 'Options saved'
+  setTimeout(() => {
+    saveBtn.textContent = 'Save'
+  }, 750)
+}
+
+const restoreOptions = () => {
+  chrome.storage.local.get({
+    defaultSchema: ''
+  }, ({ defaultSchema }) => {
+    document.getElementById('defaultSchema').value = defaultSchema
+  })
+}
+
+document.addEventListener('DOMContentLoaded', restoreOptions)
+document.getElementById('optionsForm').addEventListener('submit', saveOptions)
diff --git a/src/page.js b/src/page.js
@@ -1,11 +1,17 @@
 
 /* global chrome */
-var attach = () => {
+var attach = async () => {
   const EDITOR_URL = 'https://test.skohub.io/editor/'
-  const SCHEMA_URL = 'https://raw.githubusercontent.com/literarymachine/oer-metadata-schemas/generic-OER/oer.json'
+
+  const loadSavedOptions = new Promise((resolve, reject) => {
+    chrome.storage.local.get({ defaultSchema: null }, (options) => {
+      resolve(options)
+    })
+  })
+  const { defaultSchema } = await loadSavedOptions
 
   const url = new URL(EDITOR_URL)
-  url.searchParams.set('schema', SCHEMA_URL)
+  defaultSchema && url.searchParams.set('schema', defaultSchema)
 
   const getMetaTag = (attribute, value) => {
     return (document.querySelector(`meta[${attribute}="${value}"]`) && document.querySelector(`meta[${attribute}="${value}"]`).content) || null