Merge pull request #4494 from Dadams2/main

Self hosting browser extension updates
omnivore-app · Jan 17, 2025 · 06449ca · 06449ca
2 parents d82bc89 + 276c560
commit 06449ca
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 4 deletions.
diff --git a/pkg/extension/src/manifest.json b/pkg/extension/src/manifest.json
@@ -11,7 +11,7 @@
     "url": "https://omnivore.app/"
   },
   "homepage_url": "https://omnivore.app/",
-  "content_security_policy": "default-src 'none'; child-src 'none'; manifest-src 'none'; media-src 'none'; object-src 'none'; worker-src 'none'; connect-src https://storage.googleapis.com/ process.env.OMNIVORE_GRAPHQL_URL blob:; frame-src 'none'; font-src 'none'; img-src data:; script-src 'self'; script-src-elem 'self' 'unsafe-inline'; script-src-attr 'unsafe-inline'; style-src 'self' 'unsafe-inline'; style-src-elem 'self' 'unsafe-inline'; style-src-attr 'none'; base-uri 'none'; form-action 'none'; block-all-mixed-content; upgrade-insecure-requests; report-uri https://api.jeurissen.co/reports/csp/webext/omnivore/",
+  "content_security_policy": "default-src 'none'; child-src 'none'; manifest-src 'none'; media-src 'none'; object-src 'none'; worker-src 'none'; connect-src *; frame-src 'none'; font-src 'none'; img-src data:; script-src 'self'; script-src-elem 'self' 'unsafe-inline'; script-src-attr 'unsafe-inline'; style-src 'self' 'unsafe-inline'; style-src-elem 'self' 'unsafe-inline'; style-src-attr 'none'; base-uri 'none'; form-action 'none'; block-all-mixed-content; upgrade-insecure-requests; report-uri https://api.jeurissen.co/reports/csp/webext/omnivore/",
   "icons": {
     "16": "/images/extension/icon-16.png",
     "24": "/images/extension/icon-24.png",

diff --git a/pkg/extension/src/scripts/api.js b/pkg/extension/src/scripts/api.js
@@ -1,8 +1,9 @@
 function gqlRequest(apiUrl, query) {
-  return getStorageItem('apiKey')
-    .then((apiKey) => {
+  return Promise.all([getStorageItem('apiKey'), getStorageItem('apiUrl')])
+    .then(([apiKey, savedUrl]) => {
       const auth = apiKey ? { Authorization: apiKey } : {}
-      return fetch(apiUrl, {
+      const url = savedUrl ? `${savedUrl}/graphql` : apiUrl
+      return fetch(url, {
         method: 'POST',
         redirect: 'follow',
         credentials: 'include',

diff --git a/pkg/extension/src/scripts/options.js b/pkg/extension/src/scripts/options.js
@@ -34,6 +34,40 @@ function clearAPIKey() {
   })
 }
 
+function saveAPIUrl() {
+  var apiUrl = document.getElementById('api-url').value
+  if (!apiUrl) {
+    alert('No API URL specified.')
+    return
+  }
+
+  setStorage({
+    apiUrl: apiUrl,
+  }).then(() => {
+    alert('API URL saved!')
+  })
+}
+
+function loadAPIUrl() {
+  getStorageItem('apiUrl').then((apiUrl) => {
+    if (apiUrl) {
+      document.getElementById('api-url').value = apiUrl
+    } else {
+      alert('No API URL found in storage.')
+    }
+  })
+}
+
+function clearAPIUrl() {
+  document.getElementById('api-url').value = ''
+
+  setStorage({
+    apiUrl: undefined,
+  }).then(() => {
+    alert('API URL cleared!')
+  })
+}
+
 function autoDismissChanged(event) {
   const value = document.getElementById('disable-auto-dismiss').checked
   console.log(
@@ -91,6 +125,15 @@ function handleConsent() {
   document
     .getElementById('clear-api-key-btn')
     .addEventListener('click', clearAPIKey)
+  document
+    .getElementById('save-api-url-btn')
+    .addEventListener('click', saveAPIUrl)
+  document
+    .getElementById('load-api-url-btn')
+    .addEventListener('click', loadAPIUrl)
+  document
+    .getElementById('clear-api-url-btn')
+    .addEventListener('click', clearAPIUrl)
 
   getStorageItem('disableAutoDismiss').then((value) => {
     document.getElementById('disable-auto-dismiss').checked = value

diff --git a/pkg/extension/src/views/options.html b/pkg/extension/src/views/options.html
@@ -33,6 +33,24 @@ <h1>API Key</h1>
 
     <p>&nbsp;</p>
 
+    <h1>API URL</h1>
+    <p>For users self hosting their own instance of Omnivore, you can set the API URL here.
+      Note this should be the URL of the graphql endpoint, not the webserver.
+    </p>
+
+    <p>
+    For example, if you are running the Omnivore API at <a href="">https://api-omnivore.mydomain.com</a>,
+    the API URL would be <a href="">https://api-omnivore.mydomain.com/api</a>.
+    </p>
+
+    <label for="api-url">API URL:</label>
+    <input type="text" id="api-url">
+    <br><br>
+    <button id="save-api-url-btn">Save API URL</button>
+    <button id="load-api-url-btn">Load API URL</button>
+    <button id="clear-api-url-btn">Clear API URL</button>
+    <p>&nbsp;</p>
+
     <h1>Settings</h1>
 
     <p>