Added files for send_to_ntfy_extension version 1.0

TheDuffman85 · May 21, 2024 · 52e2316 · 52e2316
1 parent f032f03
commit 52e2316
Show file tree

Hide file tree

Showing 7 changed files with 293 additions and 0 deletions.
diff --git a/icons/icon128.png b/icons/icon128.png
diff --git a/icons/icon16.png b/icons/icon16.png
diff --git a/icons/icon48.png b/icons/icon48.png
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,33 @@
+{
+  "manifest_version": 3,
+  "name": "Send to ntfy",
+  "version": "1.0",
+  "description": "Send to ntfy",
+  "permissions": [
+    "activeTab",
+    "storage"
+  ],
+  "icons": {
+    "16": "icons/icon16.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  },
+  "background": {
+    "service_worker": "service_worker.js",
+	"scripts": ["service_worker.js"]
+  },
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "{cad379db-edfe-4c5e-b936-27a19156b5dc}"
+    }
+  },
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "icons/icon16.png",
+      "48": "icons/icon48.png",
+      "128": "icons/icon128.png"
+    }
+  },
+  "content_security_policy": {}
+}
diff --git a/popup.html b/popup.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    :root {
+      --bg-color: #ffffff;
+      --text-color: #000000;
+      --button-bg-color: #e0e0e0;
+      --button-text-color: #000000;
+      --border-color: #cccccc;
+      --icon-color: #ffffff; /* This should match the color of the cog icon */
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --bg-color: #1e1e1e;
+        --text-color: #ffffff;
+        --button-bg-color: #333333;
+        --button-text-color: #ffffff;
+        --border-color: #444444;
+        --icon-color: #ffffff; /* This should match the color of the cog icon in dark mode */
+      }
+    }
+
+    body {
+      font-family: Arial, sans-serif;
+      margin: 0;
+      padding: 0;
+      width: 240px;
+      background-color: var(--bg-color);
+      color: var(--text-color);
+    }
+
+    .container {
+      padding: 10px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    button {
+      flex: 1;
+      margin-right: 10px;
+      background-color: var(--button-bg-color);
+      color: var(--button-text-color);
+      border: 1px solid var(--border-color);
+      padding: 5px;
+      cursor: pointer;
+    }
+
+    button:hover {
+      opacity: 0.8;
+    }
+
+    .hidden {
+      display: none;
+    }
+
+    .settings, .open-url {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+    }
+
+    .open-url {
+      margin-right: 10px; /* Add a gap between the open URL icon and the cog */
+    }
+
+    .form-container {
+      padding: 10px;
+    }
+
+    .form-container label {
+      display: block;
+      margin-top: 10px;
+    }
+
+    .form-container input, .form-container textarea, .form-container select {
+      width: 100%;
+      padding: 5px;
+      margin-top: 5px;
+      background-color: var(--bg-color);
+      color: var(--text-color);
+      border: 1px solid var(--border-color);
+      box-sizing: border-box;
+    }
+
+    #status, #warning {
+      margin: 10px 0;
+      text-align: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="form-container">
+    <textarea id="message" rows="4"></textarea>
+    <select id="topic-select"></select>
+  </div>
+  <div class="container">
+    <button id="send">Send to ntfy</button>    
+	<span class="open-url" title="Open ntfy URL">&#128279;</span>
+    <span class="settings">&#9881;</span>
+  </div>
+  <div id="warning" class="hidden">Please configure ntfy settings first.</div>
+  <div id="status"></div>
+  <div id="settings" class="hidden form-container">
+    <label for="url">ntfy URL:</label>
+    <input type="text" id="url">
+    <label for="token">Token (optional):</label>
+    <input type="password" id="token">
+    <label for="topics">Topics (comma separated):</label>
+    <input type="text" id="topics">
+    <div style="margin-top: 10px;">
+      <button id="save">Save Configuration</button>
+    </div>
+  </div>
+  <script src="popup.js"></script>
+</body>
+</html>
diff --git a/popup.js b/popup.js
@@ -0,0 +1,132 @@
+document.addEventListener('DOMContentLoaded', function() {
+  const status = document.getElementById('status');
+  const warning = document.getElementById('warning');
+  const topicSelect = document.getElementById('topic-select');
+
+  // Load saved configuration
+  chrome.storage.sync.get(['topics', 'apiUrl', 'accessToken'], function(items) {
+    if (chrome.runtime.lastError) {
+      console.error('Error retrieving settings:', chrome.runtime.lastError);
+    } else {
+      const topics = items.topics ? items.topics.split(',') : [];
+      document.getElementById('url').value = items.apiUrl || '';
+      document.getElementById('token').value = items.accessToken || '';
+      document.getElementById('topics').value = topics.join(',');
+
+      // Populate the topic dropdown
+      topicSelect.innerHTML = '';
+      topics.forEach(topic => {
+        const option = document.createElement('option');
+        option.value = topic.trim();
+        option.textContent = topic.trim();
+        topicSelect.appendChild(option);
+      });
+    }
+  });
+
+  // Toggle settings visibility
+  document.querySelector('.settings').addEventListener('click', function() {
+    const settingsDiv = document.getElementById('settings');
+    settingsDiv.classList.toggle('hidden');
+  });
+
+  // Save configuration
+  document.getElementById('save').addEventListener('click', function() {
+    const topics = document.getElementById('topics').value;
+    const apiUrl = document.getElementById('url').value;
+    const accessToken = document.getElementById('token').value;
+
+    chrome.storage.sync.set({ topics, apiUrl, accessToken }, function() {
+      if (chrome.runtime.lastError) {
+        console.error('Error saving settings:', chrome.runtime.lastError);
+        status.textContent = 'Error saving configuration.';
+        status.style.color = 'red';
+      } else {
+        console.log('Configuration saved.');
+        status.textContent = 'Configuration saved.';
+        status.style.color = 'green';
+        setTimeout(() => { status.textContent = ''; }, 3000);
+
+        // Update the topic dropdown
+        const topicsArray = topics ? topics.split(',') : [];
+        topicSelect.innerHTML = '';
+        topicsArray.forEach(topic => {
+          const option = document.createElement('option');
+          option.value = topic.trim();
+          option.textContent = topic.trim();
+          topicSelect.appendChild(option);
+        });
+      }
+    });
+  });
+
+  // Open ntfy URL in new tab
+  document.querySelector('.open-url').addEventListener('click', function() {
+    chrome.storage.sync.get('apiUrl', function(items) {
+      const apiUrl = items.apiUrl;
+      if (apiUrl) {
+        chrome.tabs.create({ url: apiUrl });
+      } else {
+        warning.textContent = 'Please configure ntfy URL first.';
+        warning.style.color = 'red';
+        warning.classList.remove('hidden');
+        setTimeout(() => { warning.classList.add('hidden'); }, 3000);
+      }
+    });
+  });
+
+  // Prefill the message textarea with the current tab's URL
+  chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
+    const url = tabs[0].url;
+    document.getElementById('message').value = url;
+  });
+
+  // Send current URL or edited message to ntfy
+  document.getElementById('send').addEventListener('click', function() {
+    chrome.storage.sync.get(['topics', 'apiUrl', 'accessToken'], function(items) {
+      if (chrome.runtime.lastError) {
+        console.error('Error retrieving settings:', chrome.runtime.lastError);
+        return;
+      }
+
+      const topic = topicSelect.value;
+      const apiUrl = items.apiUrl;
+      const accessToken = items.accessToken;
+      const message = document.getElementById('message').value;
+
+      if (!topic || !apiUrl) {
+        warning.classList.remove('hidden');
+        warning.style.color = 'red';
+        setTimeout(() => { warning.classList.add('hidden'); }, 3000);
+        return;
+      }
+
+      const fullUrl = apiUrl + '/' + topic;
+
+      const headers = new Headers();
+      if (accessToken) {
+        headers.set('Authorization', 'Bearer ' + accessToken);
+      }
+
+      fetch(fullUrl, {
+        method: "POST",
+        headers: headers,
+        body: message
+      }).then(response => {
+        if (!response.ok) {
+          console.error("Failed to send message:", response);
+          status.textContent = "Failed to send message.";
+          status.style.color = 'red';
+        } else {
+          status.textContent = "Message sent successfully.";
+          status.style.color = 'green';
+          setTimeout(() => { status.textContent = ''; }, 3000);
+        }
+      }).catch(error => {
+        console.error("Error:", error);
+        status.textContent = "Error: " + error;
+        status.style.color = 'red';
+      });
+    });
+  });
+});
diff --git a/service_worker.js b/service_worker.js
@@ -0,0 +1,9 @@
+chrome.runtime.onInstalled.addListener(function() {
+  chrome.storage.sync.get(['topic', 'apiUrl', 'accessToken'], function(items) {
+    if (!items.topic && !items.apiUrl && !items.accessToken) {
+      chrome.storage.sync.set({ topic: '', apiUrl: '', accessToken: '' }, function() {
+        console.log("The ntfy configuration is set to empty.");
+      });
+    }
+  });
+});