Initial commit

css/dark.css

@@ -0,0 +1,41 @@
+body {
+    background-color: rgb(41, 42, 45);
+}
+
+body, a, .navbar, .nav-link, .navbar-brand, .list-group-item {
+    color: #FAFAFA;
+}
+
+.navbar-toggler {
+    border-color: #0d6efd;
+}
+
+.nav-link.active, .nav-link:hover, .list-group-item:hover, .navbar-brand:hover {
+    color: #d2d2d2 !important;
+}
+
+.card, .modal-content, .navbar, .list-group-item {
+    background-color: #3b3b3b !important;
+}
+
+.btn-close {
+    background-color: #FAFAFA;
+}
+
+input[type="text"], textarea {
+    background: #3b3b3b !important;
+    color: #FAFAFA !important;
+    border-color: #6c757d !important;
+}
+
+a:hover {
+    color: #9adefe;
+}
+
+.form-text {
+    color: #d3d3d3;
+}
+
+.border-top {
+    border-color: #000 !important;
+}

js/background.js

@@ -0,0 +1,98 @@
+// Initialize welcome message and context menu entry on extension load
+chrome.runtime.onInstalled.addListener(function (details) {
+	// Initialize context menu
+	chrome.contextMenus.create({
+		id: "share-to-mastodon",
+		title: 'Share to Mastodon',
+		contexts: ['selection', 'link', 'image', 'video', 'page']
+	})
+	// Show welcome message
+	if (details.reason === 'install' || details.reason === 'update') {
+		// Set message
+		const notification = {
+			type: 'basic',
+			iconUrl: chrome.runtime.getURL('img/icon_x128.png'),
+			title: 'Share to Mastodon ' + chrome.runtime.getManifest().version + ' installed!',
+			buttons: [
+				{
+					title: 'Open Settings'
+				},
+				{
+					title: 'Join Discord'
+				}
+			],
+			message: "Click here to see what's new in this version."
+		}
+		// Send notification
+		chrome.notifications.create(notification, () => {
+			// Handle notification click
+			chrome.notifications.onClicked.addListener(function () {
+				//chrome.tabs.create({ url: 'https://corbin.io/' })
+			})
+			// Handle notification button clicks
+			chrome.notifications.onButtonClicked.addListener(function (_, buttonIndex) {
+				if (buttonIndex === 0) {
+					chrome.runtime.openOptionsPage()
+				} else if (buttonIndex === 1) {
+					// Open Discord
+					chrome.tabs.create({ url: 'https://discord.com/invite/59wfy5cNHw' })
+				}
+			})
+		})
+	}
+})
+
+// Function for creating share popup
+function createPopup(serverDomain, shareLink, shareText, tab) {
+	var popupPage = 'https://' + serverDomain + '/share?text=' + encodeURIComponent(shareText + '\n\n' + shareLink)
+	var popupWidth = 500
+	var popupHeight = 500
+	var y = Math.round(tab.height / 2 - (popupHeight / 2))
+	var x = Math.round(tab.width / 2 - (popupWidth / 2))
+	console.log(popupWidth, popupHeight, y, x)
+	chrome.windows.create({
+		url: popupPage,
+		width: popupWidth,
+		height: popupHeight,
+		left: x,
+		top: y,
+		type: 'popup'
+	})
+}
+
+// Function for context menu search
+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) {
+				resolve(data.userServer)
+			})
+		})
+		console.log('Retrieved server:', server)
+		// Open settings if needed
+		if (!server) {
+			chrome.runtime.openOptionsPage()
+			return false
+		}
+		// Set link and description
+		var shareLink = ''
+		var shareText = ''
+		if (info.mediaType) {
+			shareLink = info.srcUrl
+			shareText = tab.title
+		} else if (info.linkUrl) {
+			shareLink = info.linkUrl
+			shareText = 'Type something here'
+		} else if (info.selectionText) {
+			shareLink = info.pageUrl
+			shareText = '"' + info.selectionText + '"'
+		} else {
+			shareLink = info.pageUrl
+			shareText = 'Type something here'
+		}
+		// Open popup
+		createPopup(server, shareLink, shareText, tab)
+	}
+})

js/settings.js

@@ -0,0 +1,33 @@
+// Function for populating settings
+async function loadSettings() {
+	// Retrieve settings from storage
+	const server = document.getElementById('mastodon-server')
+	new Promise(function (resolve) {
+		chrome.storage.sync.get(function (data) {
+			console.log(data)
+			// Server setting
+			if (data.userServer) {
+				server.value = data.userServer
+			} 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
+document.querySelectorAll('input,select').forEach(function (el) {
+	el.addEventListener('change', function () {
+		chrome.storage.sync.set({
+			userServer: document.querySelector('#mastodon-server').value,
+		}, function() {
+			console.log('Settings saved')
+		})
+	})
+})
+
+loadSettings()

manifest.json

@@ -0,0 +1,30 @@
+{
+	"manifest_version": 3,
+	"name": "Share to Mastodon",
+	"version": "1.0",
+	"author": "Corbin Davenport",
+	"homepage_url": "https://github.com/corbindavenport/share-to-mastodon",
+	"description": "Share links to Mastodon in one click!",
+	"options_ui": {
+		"page": "settings.html",	
+		"open_in_tab": false
+	},
+	"omnibox": {
+		"keyword": "wiki"
+	},
+	"permissions": [
+		"contextMenus",
+		"storage",
+		"notifications"
+	],
+	"minimum_chrome_version": "93",
+	"background": {
+		"service_worker": "js/background.js"
+	},
+	"icons": {
+		"16": "img/icon_x16.png",
+		"48": "img/icon_x48.png",
+		"128": "img/icon_x128.png",
+		"512": "img/icon_x512.png"
+	}
+}

settings.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <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>
+        body {
+            max-width: 450px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container-fluid">
+        <!-- Alert for no server -->
+        <div class="alert alert-primary d-none" id="mastodon-server-alert" role="alert">
+            You have to enter a server before you can share links!
+        </div>
+        <!-- Server select -->
+        <div class="mb-3">
+            <label for="exampleFormControlInput1" class="form-label">Mastodon server</label>
+            <input type="text" class="form-control" id="mastodon-server" placeholder="yourserver.social" disabled>
+        </div>
+        <hr>
+        <p>If you find Share to Mastodon useful, please donate to support continued development. It would mean a lot!</p>
+        <div class="row mb-3">
+            <div class="col-6">
+                <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=4SZVSMJKDS35J&lc=US&item_name=Share%20to%20Mastodon%20Donation&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted" target="_blank">
+                    <button type="button" class="btn btn-sm btn-success w-100">Donate via PayPal</button>
+                </a>
+            </div>
+            <div class="col-6">
+                <a href="https://cash.app/$corbdav" target="_blank">
+                    <button type="button" class="btn btn-sm btn-success w-100">Donate via Cash App</button>
+                </a>
+            </div>
+        </div>
+        <hr>
+        <a href="https://github.com/corbindavenport/wikipedia-search/" target="_blank" class="d-block mb-3">
+            <button type="button" class="btn btn-sm btn-primary w-100">Open GitHub repository</button>
+        </a>
+        <a href="https://discord.com/invite/59wfy5cNHw" target="_blank" class="d-block mb-3">
+            <button type="button" class="btn btn-sm btn-primary w-100">Join Discord server</button>
+        </a>
+        <a href="https://toot.community/@corbin" target="_blank" class="d-block mb-3">
+            <button type="button" class="btn btn-sm btn-primary w-100">Follow on Mastodon</button>
+        </a>
+    </div>
+
+    <script src="js/settings.js"></script>
+
+</body>
+
+</html>