Skip to content

Instantly share code, notes, and snippets.

@michaelamaura

michaelamaura/A Sad Web App Notifier

Forked from sdennler/A Sad Web App Notifier
Last active March 25, 2020 09:49
Show Gist options
  • Save michaelamaura/5cbb13d6d47920530028935212ade151 to your computer and use it in GitHub Desktop.
Save michaelamaura/5cbb13d6d47920530028935212ade151 to your computer and use it in GitHub Desktop.
Download ZIP
Bring the necessary Desktop Notification to Outlook Web App.
Raw
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:
  1. Open this links and install the script:
  1. Change @match to your Outlook Web App URL

License

Public Domain

Raw
A Sad Web App Notifier
Bring the necessary Desktop Notification to Outlook Web App.
Raw
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>
Raw
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/[email protected]&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>
Raw
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);
}
@michaelamaura
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment