add notification function

src/background-pinger.js

@@ -2,24 +2,53 @@ import { loadOptions } from './utils.js';
 
 let options = {};
 
+function down(error) {
+	if (options.alert && !options.alertShown) {
+		browser.notifications.create('server-down-notification', {
+			'type': 'basic',
+			'iconUrl': browser.extension.getURL('icons/offline-48.png'),
+			'title': 'Server went down',
+			'message': error
+		});
+
+		options.alertShown = true;
+	}
+
+	browser.browserAction.setIcon({
+		path: 'icons/offline-32.png'
+	});
+
+	if (error) {
+		browser.browserAction.setTitle({
+			title: error
+		});
+	}
+}
+
+function up() {
+	browser.browserAction.setIcon({
+		path: 'icons/available-32.png'
+	});
+	browser.browserAction.setTitle({
+		title: 'pinging ' + options.server
+	});
+
+	options.alertShown = false;
+	browser.notifications.clear('server-down-notification');
+}
+
 function ping(server) {
 	console.log('pinging ' + server);
 	fetch(server)
 	.then(function(response) {
 		if (response.status === 200) {
-			browser.browserAction.setIcon({
+			up();
-				path: 'icons/available-32.png'
-			});
 		} else {
-			browser.browserAction.setIcon({
+			down(response.statusText);
-				path: 'icons/offline-32.png'
-			});
 		}
 	})
 	.catch((error) => {
-		browser.browserAction.setIcon({
+		down(error.message);
-			path: 'icons/offline-32.png'
-		});
 	});
 }
 
@@ -27,6 +56,7 @@ function reloadConfig() {
 	loadOptions().then((savedOptions) => {
 		options.server = savedOptions.server;
 		options.interval = savedOptions.interval;
+		options.alert = savedOptions.alert;
 
 		if (options.server && options.interval >= 1) {
 			ping(options.server);

src/manifest.json

@@ -28,6 +28,7 @@
 	"permissions": [
 		"storage",
 		"<all_urls>",
-		"webRequest"
+		"webRequest",
+		"notifications"
 	]
 }

src/popup/ping.css

@@ -29,5 +29,5 @@ input[type="number"] {
 }
 
 input[type="checkbox"] {
-	margin-bottom: -7px;
+	margin-bottom: -4px;
 }

src/popup/ping.html

@@ -20,6 +20,11 @@
 			<label for="interval">Interval in seconds: </label>
 			<input type="number" id="interval" name="interval">
 		</div>
+
+		<div>
+			<input type="checkbox" id="alert" checked="checked" name="alert">
+			<label for="alert">Alert if server goes down</label>
+		</div>
 	</form>
 	<script type="module" src="ping.js"></script>
 </body>

src/popup/ping.js

@@ -3,7 +3,8 @@ import { loadOptions, saveOptions } from '../utils.js';
 function getParams() {
 	return {
 		server: document.getElementById('server').value,
-		interval: parseInt(document.getElementById('interval').value)
+		interval: parseInt(document.getElementById('interval').value),
+		alert: document.getElementById('alert').checked
 	};
 };
 
@@ -19,6 +20,7 @@ document.addEventListener('DOMContentLoaded', function() {
 	loadOptions().then((options) => {
 		document.getElementById('server').value = options.server;
 		document.getElementById('interval').value = options.interval;
+		document.getElementById('alert').checked = options.alert;
 
 		browser.runtime.sendMessage('configChanged');
 	});

src/utils.js

@@ -1,7 +1,8 @@
 function loadOptions() {
 	return browser.storage.local.get({
 		server: '',
-		interval: 60
+		interval: 60,
+		alert: false
 	});
 };