Initial work on multi-server support

js/background.js

@@ -44,7 +44,8 @@ chrome.runtime.onInstalled.addListener(function (details) {
 
 // Function for creating share popup
 function createPopup(serverDomain, shareLink, shareText, tab) {
-	var popupPage = 'https://' + serverDomain + '/share?text=' + encodeURIComponent(shareText + '\n\n' + shareLink)
+	var test = chrome.runtime.getURL('share.html')
+	var popupPage = test + '?text=' + encodeURIComponent(shareText + '\n\n' + shareLink)
 	var popupWidth = 500
 	var popupHeight = 500
 	var y = Math.round((tab.height / 2) - (popupHeight / 2))
@@ -64,6 +65,7 @@ function createPopup(serverDomain, shareLink, shareText, tab) {
 chrome.contextMenus.onClicked.addListener(async function (info, tab) {
 	console.log(info, tab)
 	if (info.menuItemId == "share-to-mastodon") {
+		/*
 		// Check if there is a saved server
 		var server = await new Promise(function (resolve) {
 			chrome.storage.sync.get(function (data) {
@@ -75,6 +77,7 @@ chrome.contextMenus.onClicked.addListener(async function (info, tab) {
 			chrome.runtime.openOptionsPage()
 			return false
 		}
+		*/
 		// Set link and description
 		var shareLink = ''
 		var shareText = ''
@@ -89,7 +92,7 @@ chrome.contextMenus.onClicked.addListener(async function (info, tab) {
 			shareText = 'Type something here'
 		}
 		// Open popup
-		createPopup(server, shareLink, shareText, tab)
+		createPopup('temp', shareLink, shareText, tab)
 	}
 })
 

js/settings.js

@@ -1,37 +1,55 @@
-// Function for populating settings
+const serverList = document.querySelector('#mastodon-server-list')
-async function loadSettings() {
+
-	// Retrieve settings from storage
+// Function to load settings from storage
-	const server = document.getElementById('mastodon-server')
+function loadSettings() {
-	new Promise(function (resolve) {
+	chrome.storage.sync.get(function (data) {
-		chrome.storage.sync.get(function (data) {
+		for (const i of data.serverList) {
-			console.log(data)
+			var el = document.createElement('option')
-			// Server setting
+			el.value = i
-			if (data.userServer) {
+			el.innerText = i
-				server.value = data.userServer
+			serverList.appendChild(el)
-			} else {
+		}
-				document.querySelector('#mastodon-server-alert').classList.remove('d-none')
-			}
-			resolve()
-		})
-	}).then(function () {
-		// Allow interaction on settings
-		server.removeAttribute('disabled')
 	})
 }
 
-// Save settings after any input change
+// Function to save settings to storage
-document.querySelectorAll('input,select').forEach(function (el) {
+function saveSettings() {
-	el.addEventListener('change', function () {
+	// Get list of servers
-		chrome.storage.sync.set({
+	var array = []
-			userServer: document.querySelector('#mastodon-server').value,
+	document.querySelectorAll('#mastodon-server-list option').forEach(function (el) {
-		}, function() {
+		array.push(el.value)
-			console.log('Settings saved')
-		})
 	})
+	console.log(array)
+	// Save to storage
+	chrome.storage.sync.set({
+		serverList: array
+	}, function () {
+		console.log('Settings saved')
+	})
+}
+
+// Add server to list
+document.querySelector('#server-add-btn').addEventListener('click', function () {
+	var domain = document.querySelector('#mastodon-server-text').value.replace(' ', '')
+	if (domain) {
+		var el = document.createElement('option')
+		el.value = domain
+		el.innerText = domain
+		serverList.appendChild(el)
+		serverList.value = domain
+		saveSettings()
+	}
+})
+
+// Remove button
+document.querySelector('#server-remove-btn').addEventListener('click', function () {
+	var selectedOption = serverList.querySelector('option[value="' + serverList.value + '"]')
+	serverList.removeChild(selectedOption)
+	saveSettings()
 })
 
 // Open keyboard shortcut
-document.querySelector('#mastodon-keyboard-shortcut').addEventListener('click', function() {
+document.querySelector('#mastodon-keyboard-shortcut').addEventListener('click', function () {
 	chrome.tabs.create({ url: 'chrome://extensions/shortcuts#:~:text=Share%20to%20Mastodon' })
 })
 

settings.html

@@ -21,10 +21,15 @@
             You have to enter a server before you can share links!
         </div>
         <!-- Server select -->
-        <div class="mb-3">
+        <div class="mb-1">
-            <label for="mastodon-server" class="form-label">Mastodon server</label>
+            <label for="mastodon-server-list" class="form-label">Mastodon servers</label>
-            <input type="text" class="form-control" id="mastodon-server" placeholder="yourserver.social" disabled>
+            <select id="mastodon-server-list" class="form-select" size="5" aria-label="Mastodon server list"></select>
         </div>
+        <div class="input-group input-group-sm mb-1">
+            <input type="text" class="form-control" id="mastodon-server-text" placeholder="yourserver.social" aria-label="Server domain" aria-describedby="server-add-btn">
+            <button class="btn btn-outline-secondary" type="button" id="server-add-btn">Add</button>
+        </div>
+        <button class="btn btn-sm btn-outline-secondary w-100 mb-3" type="button" id="server-remove-btn">Remove selected</button>
         <!-- Link to keyboard shortcut -->
         <div class="mb-3">
             <button type="button" class="btn btn-sm btn-primary w-100" id="mastodon-keyboard-shortcut">Change keyboard shortcut</button>
@@ -55,8 +60,9 @@
         </a>
     </div>
 
+    <script src="js/bootstrap.js"></script>
     <script src="js/settings.js"></script>
 
 </body>
 
-</html>
+</html>

share.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Share to Mastodon</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="css/bootstrap.css" rel="stylesheet">
+    <link href="css/dark.css" rel="stylesheet" media="(prefers-color-scheme: dark)">
+    <style>
+        .list-group-item img {
+            width: 20px;
+            height: auto;
+            margin-right: 5px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container-fluid">
+        <div class="mt-2 mb-2 text-muted">Select a server</div>
+        <div class="list-group mb-2">
+            <a href="#" class="list-group-item list-group-item-action">
+                <img src="https://toot.community/favicon.ico">
+                toot.community
+            </a>
+            <a href="#" class="list-group-item list-group-item-action">
+                <img src="https://toot.cafe/favicon.ico">
+                toot.cafe
+            </a>
+            <a href="#" class="list-group-item list-group-item-action">
+                <img src="https://mastodon.social/favicon.ico">
+                mastodon.social
+            </a>
+          </div>
+          <a href="#" target="_blank">
+            <button type="button" class="btn btn-sm btn-outline-secondary w-100 mb-2">Add or remove servers</button>
+        </a>
+    </div>
+
+    <script src="js/bootstrap.js"></script>
+    <script src="js/settings.js"></script>
+
+</body>
+
+</html>