Add options page to the extension so users without cookie access can save with the extension

2023-05-17 13:54:25 +08:00
parent ac61c4e380
commit 0a50c7a8b3
4 changed files with 107 additions and 11 deletions
--- a/pkg/extension/src/manifest.json
+++ b/pkg/extension/src/manifest.json
@ -44,6 +44,10 @@
      "id": "save-extension@omnivore.app"
    }
  },
+  "options_ui": {
+    "page": "/views/options.html",
+    "open_in_tab": true
+  },
  "content_scripts": [
    {
      "matches": [
--- a/pkg/extension/src/scripts/api.js
+++ b/pkg/extension/src/scripts/api.js
@ -1,15 +1,19 @@
 function gqlRequest(apiUrl, query) {
-  return fetch(apiUrl, {
-    method: 'POST',
-    redirect: 'follow',
-    credentials: 'include',
-    mode: 'cors',
-    headers: {
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
-    },
-    body: query,
-  })
+  return getStorageItem('apiKey')
+    .then((apiKey) => {
+      return fetch(apiUrl, {
+        method: 'POST',
+        redirect: 'follow',
+        credentials: 'include',
+        mode: 'cors',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+          Authorization: apiKey ? apiKey : undefined,
+        },
+        body: query,
+      })
+    })
    .then((response) => response.json())
    .then((json) => {
      if (!json['data']) {
--- a/pkg/extension/src/scripts/options.js
+++ b/pkg/extension/src/scripts/options.js
@ -0,0 +1,47 @@
+function saveAPIKey() {
+  var apiKey = document.getElementById('api-key').value
+  if (!apiKey) {
+    alert(
+      'No api-key specified, please create an API key at https://omnivore.app/settings/api'
+    )
+    return
+  }
+
+  setStorage({
+    apiKey: apiKey,
+  }).then(() => {
+    alert('API key saved!')
+  })
+}
+
+function loadAPIKey() {
+  getStorageItem('apiKey').then((apiKey) => {
+    if (apiKey) {
+      document.getElementById('api-key').value = apiKey
+    } else {
+      alert('No API key found in storage.')
+    }
+  })
+}
+
+function clearAPIKey() {
+  document.getElementById('api-key').value = ''
+
+  setStorage({
+    apiKey: undefined,
+  }).then(() => {
+    alert('API key cleared!')
+  })
+}
+
+;(() => {
+  document
+    .getElementById('save-api-key-btn')
+    .addEventListener('click', saveAPIKey)
+  document
+    .getElementById('load-api-key-btn')
+    .addEventListener('click', loadAPIKey)
+  document
+    .getElementById('clear-api-key-btn')
+    .addEventListener('click', clearAPIKey)
+})()
--- a/pkg/extension/src/views/options.html
+++ b/pkg/extension/src/views/options.html
@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>API Key Storage</title>
+  <script src="/scripts/common.js"></script>
+  <style>
+    div.wrapper: {
+      max-width: 480px;
+      padding: 20px;
+    }
+  </style>
+</head>
+<body>
+  <div class='wrapper'>
+    <h1>API Key</h1>
+
+    <p>Normally Omnivore uses an authentication cookie that is set when
+      you log in at <a href='https://omnivore.app'>omnivore.app</a>. If
+      your security settings do not allow the extension to access this
+      cookie (for example if you are using containers), you can set an
+      API token in the extension's local storage instead.
+    </p>
+
+    <p>To do this, create an API key at 
+      <a href='https://omnivore.app/settings/api'>omnivore.app/settings/api</a>,
+      paste it into the textboix below, and choose 'Save API Key'.
+    </p>
+    
+    <p></p>
+    <label for="api-key">API Key:</label>
+    <input type="text" id="api-key">
+
+    <br><br>
+
+    <button id="save-api-key-btn">Save API Key</button>
+    <button id="load-api-key-btn">Load API Key</button>
+    <button id="clear-api-key-btn">Clear API Key</button>
+  </div>
+  <script src="/scripts/options.js"></script>
+</body>
+</html>