Bring the necessary Desktop Notification to Outlook Web App.

README.md

Synopsis

Outlook Web App has no Desktop Notification support. Probably because IE doesn't support it as well...

Motivation

I missed to much mails because this feature is missing...

Installation

1. Install user script manager in your browser:

• Cromium based browsers: Tampermonkey
• Firefox: Greasemonkey
• Opera 9.x: Violent monkey

2. Open this links and install the script:

• Sad Web App Notifier

3. Change @match to your Outlook Web App URL

License

Public Domain

A Sad Web App Notifier

Bring the necessary Desktop Notification to Outlook Web App.

calendar-notification-box,html

<div class="o365cs-notifications-toastControl"><div class="o365cs-notifications-notificationHeader ms-bcl-nl"> <div class="o365cs-notifications-notificationLabel"> <span class="o365cs-notifications-notificationHeaderText o365cs-segoeSemiLight wf-size-x14 ms-fcl-np">Erinnerungen</span> <span class="o365cs-notifications-notificationHeaderText o365cs-segoeSemiLight wf-size-x14 ms-fcl-np">2</span> </div> </div><div role="listbox" aria-multiselectable="true" tabindex="-1" aria-label="Erinnerungen"><div class="o365cs-notifications-reminders-scrollRegion customScrollBar scrollContainer"> <div class="o365cs-notifications-reminders-listPanel"><div tabindex="-1" role="option" aria-selected="true"><div class="o365cs-notifications-toastControl o365cs-notifications-reminders-flexpaneitem ms-bcl-nl ms-bgc-tl"> <div><div unselectable="on" class="o365cs-notifications-reminders-container ms-bcl-nl"> <span class="o365cs-notifications-reminders-row"> <div class="o365cs-table o365cs-w100-h100"> <div class="o365cs-table-cell-middle o365cs-notifications-reminders-leftColumn"> <span class="o365cs-notifications-reminders-title ms-fcl-tp">Abgesagt: Working from Home</span> </div> <div class="o365cs-table-cell-middle o365cs-notifications-reminders-rightColumn"> <span class="o365cs-notifications-toastReminders-timeToStartValue ms-fcl-np">10</span> <span class="o365cs-notifications-reminders-timeToStartUnit ms-fcl-np">Stunden</span> </div> </div> </span> <span class="o365cs-notifications-reminders-row"> <div class="o365cs-table o365cs-w100-h100"> <div class="o365cs-table-cell-middle o365cs-notifications-reminders-leftColumn"> <div class="o365cs-notifications-reminders-description"> <span class="o365cs-notifications-reminders-timeDuration ms-fcl-np">0:00 Mittwoch, 22. August 2018</span> <span class="o365cs-notifications-reminders-location ms-fcl-nd o365cs-semiLightFont">Hilden</span> </div> </div> <div class="o365cs-table-cell-middle o365cs-notifications-reminders-rightColumn"> <span class="o365cs-notifications-toastReminders-overdue" style="display: none;">Überfällig</span> </div> </div> </span> </div></div> </div></div><div tabindex="-1" role="option"><div class="o365cs-notifications-toastControl o365cs-notifications-reminders-flexpaneitem ms-bcl-nl ms-bgc-w"> <div><div unselectable="on" class="o365cs-notifications-reminders-container ms-bcl-nl"> <span class="o365cs-notifications-reminders-row"> <div class="o365cs-table o365cs-w100-h100"> <div class="o365cs-table-cell-middle o365cs-notifications-reminders-leftColumn"> <span class="o365cs-notifications-reminders-title ms-fcl-tp">bla</span> </div> <div class="o365cs-table-cell-middle o365cs-notifications-reminders-rightColumn"> <span class="o365cs-notifications-toastReminders-timeToStartValue ms-fcl-np">9</span> <span class="o365cs-notifications-reminders-timeToStartUnit ms-fcl-np">Min</span> </div> </div> </span> <span class="o365cs-notifications-reminders-row"> <div class="o365cs-table o365cs-w100-h100"> <div class="o365cs-table-cell-middle o365cs-notifications-reminders-leftColumn"> <div class="o365cs-notifications-reminders-description"> <span class="o365cs-notifications-reminders-timeDuration ms-fcl-np">13:50 - 14:20</span> <span class="o365cs-notifications-reminders-location ms-fcl-nd o365cs-semiLightFont"></span> </div> </div> <div class="o365cs-table-cell-middle o365cs-notifications-reminders-rightColumn"> <span class="o365cs-notifications-toastReminders-overdue" style="display: none;">Überfällig</span> </div> </div> </span> </div></div> </div></div></div> </div></div><div style=""><div role="group" class="o365cs-notifications-reminders-buttonBar ms-bcl-nt"> <div class="o365cs-notifications-reminders-dismissButtons ms-bcl-nt"> <button type="button" class="o365cs-notifications-reminders-button o365cs-notifications-reminders-joinOnlineButton ms-fcl-tp o365button" aria-label="Online beitreten" style="display: none;"></button> <button type="button" class="o365cs-notifications-reminders-button o365cs-notifications-reminders-dismissAll ms-fcl-tp o365button" aria-label="Alle schließen" style=""><span class="_fc_3 owaimg" style="display: none;"> </span><span class="_fc_4 o365buttonLabel">Alle schließen</span></button> <button type="button" class="o365cs-notifications-reminders-button ms-fcl-tp o365button" aria-label="Schließen" style=""><span class="_fc_3 owaimg" style="display: none;"> </span><span class="_fc_4 o365buttonLabel">Schließen</span></button> </div> <div class="o365cs-table o365cs-w100 o365cs-notifications-reminders-SnoozeOptions ms-bcl-nt"> <div class="o365cs-notifications-pickerWrapper o365cs-table-cell-bottom"> <div class="o365cs-notifications-reminders-snoozePicker ms-bgc-w pickerContainer" id="_ariaId_657" aria-label="Wählen Sie aus, wie lange Sie die ausgewählte Erinnerung verschieben möchten. Aktuelle Aufschubzeit: 15 Minuten vor dem Start." style=""><button autoid="_fce_f" type="button" class="_fce_61 o365button ms-fcl-ns ms-bgc-w ms-bcl-nta" role="combobox" aria-readonly="true" aria-expanded="false" id="_ariaId_658" aria-haspopup="true" tabindex="0" aria-labelledby="_ariaId_657"><div class="_fce_71"> <span class="ms-fcl-nt ms-fwt-sl ms-font-s"></span> <div autoid="_fce_g" class="ms-fwt-sl ms-font-s _fce_i1" aria-hidden="true"><span>15 Minuten vor dem Start</span></div> </div><div class="_fce_81"> <span class="_fce_g1 owaimg ms-Icon--caretDown ms-icon-font-size-16 ms-fcl-ns-b"> </span> <span class="_fce_g1 owaimg ms-Icon--caretDown ms-icon-font-size-16 ms-fcl-nd-b" style="display: none;"> </span> </div></button></div> </div> <button type="button" class="o365cs-notifications-reminders-snoozeButton ms-bcl-nta ms-bcl-nsa-h o365cs-last o365cs-table-cell-bottom o365button ms-fcl-np ms-bgc-nlr" aria-label="Erneut erinnern" style=""><span class="_fc_3 owaimg" style="display: none;"> </span><span class="_fc_4 o365buttonLabel">Erneut erinnern</span></button> </div> </div></div></div>

mail-notification-box.html

<div class="o365cs-notifications-newMailPopupButton ms-bcl-tp"> <div class="o365cs-notifications-newMailPopupButtonCell"> <div class="o365cs-notifications-newMailPopupButtonContent"> <span autoid="__Microsoft_O365_ShellG2_Owa_templates_cs_Z" class="wf-size-x14 o365cs-notifications-text ms-fcl-nd" style="display: none;">Sie haben 1 neue Nachrichten.</span> <div><div class="o365cs-notifications-newMailPersonaImage" style="background-color: rgb(218, 83, 44); outline-color: rgb(218, 83, 44);">EM</div><img src="service.svc/s/GetPersonaPhoto?email=michaela.elschner@rwe.com&amp;UA=0&amp;size=HR64x64&amp;sc=1534844322035" class="o365cs-notifications-newMailPersonaImage o365cs-notifications-newMailPersonaImagePosition" style="display: inline; width: 50px; top: 0px;"><span autoid="__Microsoft_O365_ShellG2_Owa_templates_cs_01" class="wf-size-x14 o365cs-notifications-text o365cs-segoeRegular">Elschner, Michaela</span><span autoid="__Microsoft_O365_ShellG2_Owa_templates_cs_11" class="wf-size-x12 o365cs-notifications-text o365cs-segoeSemiBold ms-fcl-tp">test</span><span autoid="__Microsoft_O365_ShellG2_Owa_templates_cs_21" class="wf-size-x12 o365cs-notifications-text o365cs-notifications-bodypreviewtext o365cs-segoeSemiLight ms-fcl-ns o365cs-notifications-newFlexPane-newMailNotification">
</span></div> <button type="button" class="o365cs-notifications-closeButton ms-fcl-np ms-bgc-w-h o365button" aria-label="Schließen"><span class="o365cs-notifications-closeIcon owaimg ms-Icon--x ms-icon-font-size-16"> </span></button> </div> </div> </div>

sadWebAppNotifier.user.js

// ==UserScript==
// @name         Sad Web App Notifier
// @namespace    https://gist.github.com/codesourceress/
// @version      1
// @description  Bring the necessary Desktop Notification to Outlook Web App.
// @author       Michaela Elschner
// @match        https://outlook.office.com/owa/*
// @exclude      */manifests/*
// @grant        none
// ==/UserScript==

console.log('Start Sad Web App Notifier');
if (!("Notification" in window)) {
    alert("This browser does not support desktop notification. Sad Web App Notifier will not work.");
} else {
    Notification.requestPermission();
    var BoxName = getBoxName();
    checkForNewMail();
}

function getBoxName(){
    var name = document.URL.match(/\/([^@\/]+@[^@\/]+)\//);
    return name ? name[1] : false;
}

function checkForNewMail(){
    var calendarNotification = document.getElementsByClassName('o365cs-notifications-reminders-title')[0];
    if (!calendarNotification) {
        console.log('No calendar notification');
    } else {
        console.log('New calendar notification!');
        spawnNotification('', 'You have new calendar notification!');
    }

    var newMailNote = document.getElementsByClassName('o365cs-notifications-newMailPopupButtonContent')[0];
    if(!newMailNote) {
        console.log('No new mail');
    } else {
        console.log('New mail!');
        spawnNotification('', 'You have new mail!');
    }
    setTimeout(checkForNewMail, 5000);
}

function spawnNotification(body, title){
    if(BoxName) title += ' ('+BoxName+')';
    var options = {
        body: body,
        icon: 'https://openclipart.org/image/128px/svg_to_png/214764/1424701298.png'
    }
    return new Notification(title, options);
}

So, the principle is quite simple: Periodically check for the outlook notification box in the web app... and then turn that into a desktop notification.

Improvements:

• make distinct notifications for mail/calendar
• display message sender/subject or calendar information