Initial commit

background.js

@@ -0,0 +1,80 @@
+'use strict';
+
+console.log("Loading background script....");
+
+let notificationMap = {};
+
+chrome.runtime.onMessage.addListener(
+  function (message, sender) {
+    if (message.type === 'quick-links') {
+      chrome.storage.sync.get('showQuickLinks', (data) => {
+        if (data.showQuickLinks) {
+          chrome.tabs.executeScript(sender.tab.id, { code: "$('#quick-links').show()" });
+        }
+      });
+    } else if (message.type === 'email') {
+      const { from, subject, body } = message;
+      chrome.notifications.create(null, {
+        type: "basic",
+        iconUrl: "images/email.png",
+        title: subject,
+        message: `From: ${from}\n${body}`,
+        requireInteraction: true
+      }, (notificationId) => {
+        notificationMap[notificationId] = { type: 'email', tabId: sender.tab.id, windowId: sender.tab.windowId };
+        startCloseNotificationTimer(notificationId, 'email');
+      });
+    } else {
+      const { title, duration } = message;
+      chrome.notifications.create(null, {
+        type: "basic",
+        iconUrl: "images/calendar.png",
+        title,
+        message: duration,
+        requireInteraction: true
+      }, (notificationId) => {
+        notificationMap[notificationId] = { type: 'calendar', tabId: sender.tab.id, windowId: sender.tab.windowId };
+        startCloseNotificationTimer(notificationId, 'calendar');
+      });
+    }
+  }
+);
+
+chrome.notifications.onClicked.addListener((notificationId) => {
+  if (notificationMap[notificationId]) {
+    const { type, tabId, windowId } = notificationMap[notificationId];
+    chrome.tabs.update(tabId, { active: true, highlighted: true });
+    chrome.windows.update(windowId, { focused: true });
+    chrome.notifications.clear(notificationId);
+    if (type === 'email') {
+      chrome.tabs.executeScript(tabId, { code: `$('#quick-link-mail')[0].click()` });
+    } else {
+      chrome.tabs.executeScript(tabId, { code: `$('#quick-link-calendar')[0].click()` });
+    }
+  }
+});
+
+chrome.runtime.onInstalled.addListener(function() {
+  chrome.storage.sync.set({emailDelay: -1, calendarDelay: -1, showQuickLinks: true});
+
+  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
+    chrome.declarativeContent.onPageChanged.addRules([{
+      conditions: [new chrome.declarativeContent.PageStateMatcher({
+        css: ["body[aria-label='Outlook']"]
+      })],
+      actions: [new chrome.declarativeContent.ShowPageAction()]
+    }]);
+  });
+});
+
+function startCloseNotificationTimer(notificationId, type) {
+  chrome.storage.sync.get(`${type}Delay`, (data) => {
+    const delay = data[`${type}Delay`];
+    if (delay > 0 ) {
+      console.log(`Showing notification for ${delay} seconds`);
+      setTimeout(() => {
+        chrome.notifications.clear(notificationId);
+      }, delay * 1000);
+    }
+  });
+}

contentScript.js

@@ -0,0 +1,88 @@
+const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
+const bodyObserver = new MutationObserver(bodyMutationHandler);
+const popUpObserver = new MutationObserver(popUpAreaHandler);
+const obsConfig = { childList: true };
+let insertedQuickLinks = false;
+
+bodyObserver.observe($('body').get()[0], obsConfig);
+
+$('body').append(`
+    <style>
+        .quick-links-container {
+            display: none;
+            line-height: 41px;
+            border-left: 1px solid rgba(255,255,255,.3);
+            border-right: 1px solid rgba(255,255,255,.3);
+        }
+
+        .o365cs-nav-appTitle.quick-link {
+            margin-left: 0;
+            text-align: center;
+            width: 50px;
+        }
+
+        .quick-link-icon {
+            font-size: 25px;
+            vertical-align: middle;
+        }
+    </style>
+`)
+
+function bodyMutationHandler (mutationRecords) {
+    if ($('.o365cs-nav-leftAlign').length && !insertedQuickLinks) {
+        $(`
+        <div id="quick-links" class="o365cs-nav-topItem o365cs-topnavLinkBackground-2 quick-links-container" style='display: none'>
+            <a id='quick-link-mail' title="Inbox" class="o365cs-nav-appTitle o365cs-topnavText o365button ms-bgc-tdr-h quick-link" href="https://${window.location.host}/owa/#path=/mail/inbox">
+                <span class="red o365cs-nav-appTileIcon owaimg ms-Icon--outlook ms-icon-font-size-55 ms-fcl-w quick-link-icon"></span>
+            </a>
+            <a id='quick-link-calendar' title="Calendar" class="o365cs-nav-appTitle o365cs-topnavText o365button ms-bgc-tdr-h quick-link" href="https://${window.location.host}/owa/#path=/calendar">
+                <span class="o365cs-nav-appTileIcon owaimg ms-Icon--calendar ms-icon-font-size-55 ms-fcl-w quick-link-icon"></span>
+            </a>
+            <a id='quick-link-people' title="People" class="o365cs-nav-appTitle o365cs-topnavText o365button ms-bgc-tdr-h quick-link" href="https://${window.location.host}/owa/#path=/people">
+                <span class="o365cs-nav-appTileIcon owaimg ms-Icon--people ms-icon-font-size-55 ms-fcl-w quick-link-icon"></span>
+            </a>
+            <a id='quick-link-tasks' title="Tasks" class="o365cs-nav-appTitle o365cs-topnavText o365button ms-bgc-tdr-h quick-link" href="https://${window.location.host}/owa/#path=/tasks">
+                <span class="o365cs-nav-appTileIcon owaimg ms-Icon--tasks ms-icon-font-size-55 ms-fcl-w quick-link-icon"></span>
+            </a>
+        </div>`).insertBefore($('.o365cs-nav-leftAlign').find('.o365cs-nav-topItem').last());
+        insertedQuickLinks = true;
+        chrome.runtime.sendMessage(null, { type: 'quick-links' });
+    }
+
+    if ($(".o365cs-notifications-notificationPopupArea").length === 1 && $(".o365cs-notifications-notificationPopup").length > 0) {
+        bodyObserver.disconnect();
+        console.log('Attaching popup observer...');
+        popUpObserver.observe($(".o365cs-notifications-notificationPopup").get()[0], obsConfig);
+        sendMessages();
+    }
+}
+
+function popUpAreaHandler(mutationRecords) {
+    mutationRecords.forEach(function (mutation) {
+        if (mutation.addedNodes.length > 0) {
+            sendMessages();
+        }
+    });
+}
+
+function sendMessages() {
+    $('.o365cs-notifications-notificationPopup').each(function () {
+        const textNodes = $(this).find('.o365cs-notifications-text');
+        if (textNodes.length) {
+            console.log('New message...');
+            const from = $(textNodes[1]).text();
+            const subject = $(textNodes[2]).text();
+            const body = $(textNodes[3]).text();
+            chrome.runtime.sendMessage(null, { type: 'email', from, subject, body });
+        }
+
+        if ($(this).find('.o365cs-notifications-reminders-listPanel').length) {
+            console.log('New calendar reminder...');
+            $(this).find('.o365cs-notifications-reminders-container').each(function () {
+                const title = $(this).find('.o365cs-notifications-reminders-title').text();
+                const duration = $(this).find('.o365cs-notifications-reminders-timeDuration').text();
+                chrome.runtime.sendMessage(null, { type: 'calendar', title, duration });
+            });
+        }
+    });
+}

manifest.json

@@ -0,0 +1,40 @@
+{
+  "name": "A Toasty OWA",
+  "version": "1.0.1",
+  "description": "Show desktop notifications for new mail and calendar alerts",
+  "permissions": [
+    "activeTab",
+    "declarativeContent",
+    "storage",
+    "notifications",
+    "tabs",
+    "http://*/*",
+    "https://*/*"
+  ],
+  "background": {
+    "scripts": [
+      "background.js"
+    ],
+    "persistent": false
+  },
+  "page_action": {
+    "default_popup": "popup.html"
+  },
+  "content_scripts": [
+    {
+      "matches": [
+        "https://*/owa/*"
+      ],
+      "js": [
+        "jquery.3.3.1.slim.js",
+        "contentScript.js"
+      ]
+    }
+  ],
+  "icons": {
+    "32": "images/icon_32.png",
+    "48": "images/icon_48.png",
+    "128": "images/icon_128.png"
+  },
+  "manifest_version": 2
+}

options.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
+    <style>
+      body {
+        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+        margin: 30px;
+      }
+      h1 {
+        font-weight: 300;
+        font-size: 2.2rem;
+        font-family: 'Indie Flower', cursive;
+      }
+      h2 {
+        font-size: 1.2rem;
+      }
+      div, select {
+        font-size: 0.8rem;
+      }
+      div + div {
+        padding-top: 10px;
+      }
+    </style>
+    <script src='jquery.3.3.1.slim.js'></script>
+  </head>
+  <body>
+    <h1>A Toast to OWA</h1>
+    <h2>Settings</h2>
+    <div>
+      <label>Email Notification Delay: </label>
+      <select id="emailDelay">
+        <option value=-1>Forever </option>
+        <option value=3>3 Seconds</option>
+        <option value=4>4 Seconds</option>
+        <option value=5>5 Seconds</option>
+        <option value=10>10 Seconds</option>
+        <option value=20>20 Seconds</option>
+      </select>
+    </div>
+    <div>
+      <label>Calendar Notification Delay: </label>
+      <select id="calendarDelay">
+        <option value=-1>Forever </option>
+        <option value=3>3 Seconds</option>
+        <option value=4>4 Seconds</option>
+        <option value=5>5 Seconds</option>
+        <option value=10>10 Seconds</option>
+        <option value=20>20 Seconds</option>
+      </select>
+    </div>
+  </body>
+  <script src="options.js"></script>
+</html>

options.js

@@ -0,0 +1,14 @@
+'use strict';
+
+$('#emailDelay').change((event) => {
+  chrome.storage.sync.set({ emailDelay: parseInt(event.target.value) });
+});
+
+$('#calendarDelay').change((event) => {
+  chrome.storage.sync.set({ calendarDelay: parseInt(event.target.value) });
+});
+
+chrome.storage.sync.get(null, (data) => {
+  $('#emailDelay').val(data.emailDelay);
+  $('#calendarDelay').val(data.calendarDelay);
+});

popup.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <style>
+      body {
+        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
+        margin: 10px;
+        width: 220px;
+      }
+
+      h1 {
+        font-weight: 300;
+        font-size: 1.7rem;
+        margin-bottom: 12px;
+        margin-top: 0px;
+        text-align: center;
+      }
+
+      h2 {
+        font-size: 1.1rem;
+      }
+
+      div,
+      select {
+        font-size: 0.7rem;
+      }
+
+      div+div {
+        padding-top: 10px;
+      }
+
+      label {
+        width: 110px;
+        display: inline-block;
+      }
+    </style>
+  <script src='jquery.3.3.1.slim.js'></script>
+</head>
+
+<body>
+  <h1>A Toast to OWA</h1>
+  <div>
+    <label>Email Delay: </label>
+    <select id="emailDelay">
+      <option value=-1>Forever </option>
+      <option value=3>3 Seconds</option>
+      <option value=4>4 Seconds</option>
+      <option value=5>5 Seconds</option>
+      <option value=10>10 Seconds</option>
+      <option value=20>20 Seconds</option>
+    </select>
+  </div>
+  <div>
+    <label>Calendar Delay: </label>
+    <select id="calendarDelay">
+      <option value=-1>Forever </option>
+      <option value=3>3 Seconds</option>
+      <option value=4>4 Seconds</option>
+      <option value=5>5 Seconds</option>
+      <option value=10>10 Seconds</option>
+      <option value=20>20 Seconds</option>
+    </select>
+  </div>
+  <div>
+    <label>Show Quick Links:</label>
+    <input id="quickLinks" type="checkbox">
+  </div>
+</body>
+
+<script src='popup.js'></script>
+</html>

popup.js

@@ -0,0 +1,24 @@
+'use strict';
+
+$('#emailDelay').change((event) => {
+  chrome.storage.sync.set({ emailDelay: parseInt(event.target.value) });
+});
+
+$('#calendarDelay').change((event) => {
+  chrome.storage.sync.set({ calendarDelay: parseInt(event.target.value) });
+});
+
+$('#quickLinks').change((event) => {
+  chrome.storage.sync.set({ showQuickLinks: $('#quickLinks').prop('checked') });
+  if ($('#quickLinks').prop('checked')) {
+    chrome.tabs.executeScript({ code: "$('#quick-links').show()" });
+  } else {
+    chrome.tabs.executeScript({ code: "$('#quick-links').hide()" });
+  }
+});
+
+chrome.storage.sync.get(null, (data) => {
+  $('#emailDelay').val(data.emailDelay);
+  $('#calendarDelay').val(data.calendarDelay);
+  $('#quickLinks').prop('checked', data.showQuickLinks);
+});