diff --git a/pkg/extension/src/manifest.json b/pkg/extension/src/manifest.json index 7bad58854..7fd7219b8 100644 --- 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": [ diff --git a/pkg/extension/src/scripts/api.js b/pkg/extension/src/scripts/api.js index c4a35a90a..4f50120e1 100644 --- 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']) { diff --git a/pkg/extension/src/scripts/options.js b/pkg/extension/src/scripts/options.js new file mode 100644 index 000000000..9eee230ba --- /dev/null +++ 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) +})() diff --git a/pkg/extension/src/views/options.html b/pkg/extension/src/views/options.html new file mode 100644 index 000000000..0b344e583 --- /dev/null +++ b/pkg/extension/src/views/options.html @@ -0,0 +1,41 @@ + + +
+Normally Omnivore uses an authentication cookie that is set when + you log in at omnivore.app. 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. +
+ +To do this, create an API key at + omnivore.app/settings/api, + paste it into the textboix below, and choose 'Save API Key'. +
+ + + + + +