CustomOutlookBackgroundImage.js

// ==UserScript==
// @name         Custom Outlook Background Image
// @namespace    https://paw.dev/
// @version      0.0.9
// @description  Allows users to set their own custom background within Outlook!
// @author       Faux
// @match        https://outlook.office.com/*
// @match        https://outlook.office365.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=office.com
// @updateURL    https://gist.githubusercontent.com/TheFauxFox/b06a9f5f8310e2f8f1e92d024eaf083b/raw/CustomOutlookBackgroundImage.js
// @downloadURL  https://gist.githubusercontent.com/TheFauxFox/b06a9f5f8310e2f8f1e92d024eaf083b/raw/CustomOutlookBackgroundImage.js
// @grant        GM_xmlhttpRequest
// @grant        GM_registerMenuCommand
// @grant        GM_setValue
// @grant        GM_getValue
// @run-at       document-start
// @connect      www.bing.com
// @connect      unsplash.com
// @connect      *
// ==/UserScript==

let useCustomBackground = await GM.getValue('COT_useCustomBackground', false);
let customBackgroundURL = await GM.getValue('COT_customBackgroundURL', '');
let backgroundRefreshTime = await GM.getValue('COT_customBackgroundRefresh', 600); // 10 minutes
let bgRefreshHandle;
let background = '';

const blobToBase64 = (blob) => new Promise(callback => {
    let reader = new FileReader();
    reader.onload = function(){ callback(this.result) };
    reader.readAsDataURL(blob)
})

const getBackground = async () => {
    if (useCustomBackground) {
        if (customBackgroundURL.includes('source.unsplash.com')) {
            GM.xmlHttpRequest({ url: "https://source.unsplash.com/1920x1080?wallpaper" })
                .catch(e => console.error(e))
                .then(r => GM.xmlHttpRequest({ url: r.finalUrl, responseType: "blob" }))
                .then(r => blobToBase64(r.response))
                .then(r => { background = r });
            if (background == '') {
                return customBackgroundURL;
            }
            return background;
        }
        return customBackgroundURL;
    }

    const response = await GM.xmlHttpRequest({ url: "http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=en-US" }).catch(e => console.error(e));
    const data = JSON.parse(response.responseText);
    return `https://bing.com/${data.images[0].url}`;
}

const setBackground = async () => {
    customBackgroundURL = prompt("Enter background image URL:");
    if (customBackgroundURL) {
        useCustomBackground = true;
        GM.setValue('COT_customBackgroundURL', customBackgroundURL);
        GM.setValue('COT_useCustomBackground', true);

    }
    background = await getBackground();
}

const clearCustomBackground = async () => {
    useCustomBackground = false;
    customBackgroundURL = '';
    GM.setValue('COT_useCustomBackground', false);
    GM.setValue('COT_customBackgroundURL', '');
    background = await getBackground();
}

const setBackgroundRefresh = async () => {
    backgroundRefreshTime = prompt("Refresh time in seconds:");
    if (!backgroundRefreshTime || backgroundRefreshTime < 5) backgroundRefreshTime = await GM.getValue('COT_customBackgroundRefresh', 600);
    GM.setValue('COT_customBackgroundRefresh', backgroundRefreshTime);
    if (bgRefreshHandle) {
        clearInterval(bgRefreshHandle);
        bgRefreshHandle = setInterval(() => {
            getBackground().then(r=>{ background = r });
        }, backgroundRefreshTime * 1000)
    }
}

GM_registerMenuCommand("Use Custom Background Image", setBackground);
GM_registerMenuCommand("Set Custom Background Refresh Time", setBackgroundRefresh);
GM_registerMenuCommand("Back to Bing Images", clearCustomBackground);

const registerLoops = async () => {
    background = await getBackground();
    bgRefreshHandle = setInterval(() => {
        getBackground().then(r=>{ background = r });
    }, backgroundRefreshTime * 1000)
    setInterval(() => {
        renderBackground();
    }, 10);
    console.log(`Today's image is: ${background}`);
}

const renderBackground = async () => {
    try {
        document.querySelectorAll('button[aria-label="Mail"]')[0].addEventListener('click', getBackground);
        const isDark = getComputedStyle(document.body).getPropertyValue('--black') == '#FFFFFF';
        const bg = isDark ? '0, 0, 0' : '255, 255, 255';
        const Main = document.getElementById('MainModule');
        Main.style.backgroundImage = `url("${background}")`;
        Main.style.backgroundSize = 'cover';
        Main.style.transition = 'background-image 2s ease-in-out';
        const LeftRail = document.querySelector('div[aria-label="Navigation pane"]>div>div');
        LeftRail.style.backgroundColor = `rgba(${bg}, 0.6)`;
        LeftRail.style.borderRadius = '5px';
        LeftRail.style.margin = '8px 7px 4px 0px';
        LeftRail.style.boxShadow = 'var(--shadow4)';
        const ReadingArea = document.querySelector(':has(>div[aria-label="Navigation pane"])>div:nth-child(3)>div>div');
        ReadingArea.style.backgroundColor = `rgba(${bg}, 0.6)`;
        ReadingArea.style.margin = '8px 0px 4px 2px';
        ReadingArea.style.borderRadius = '5px';
        ReadingArea.style.boxShadow = 'var(--shadow4)';
        const ReadingContainer = document.getElementById('ReadingPaneContainerId');
        try {
            ReadingContainer.style.backgroundColor = `rgba(${bg}, 0)`;
        } catch {}
        const EmailList = document.getElementById('Skip to message list-region');
        EmailList.style.margin = '8px 8px 0px 8px';
        EmailList.style.borderRadius = '5px';
        EmailList.style.backgroundColor = `rgba(${bg}, 0)`
        try {
            const MailHead = EmailList.firstChild;
            MailHead.style.backgroundColor = `rgba(${bg}, 0.3)`;
        } catch {}
        try {
            const MailScroll = document.querySelector('div[role="listbox"]>div>div>div');
            MailScroll.style.backgroundColor = `rgba(${bg}, 0.3)`
        } catch {}
        try {
            const MailList = document.querySelector('div[role="listbox"]>div');
            MailList.style.backgroundColor = `rgba(${bg}, 0)`;
        } catch {}
        if (!document.getElementById(`COT_Style_${isDark ? 'DARK' : 'LIGHT'}`)) {
            if (document.getElementById(`COT_Style_${!isDark ? 'DARK' : 'LIGHT'}`)) {
                document.getElementById(`COT_Style_${!isDark ? 'DARK' : 'LIGHT'}`).remove()
            }
            const MailEntryStyle = document.createElement('style');
            MailEntryStyle.id = `COT_Style_${isDark ? 'DARK' : 'LIGHT'}`;
            MailEntryStyle.innerText = `.IjQyD { background-color: rgba(${bg}, 0.1); } .threeColumnCirclePersonaDivWidth { background-color: rgba(${bg}, 0.1); }`;
            Main.appendChild(MailEntryStyle);
        }
        if (document.getElementById('EmptyState_MainMessage')) {
            Object.values(document.getElementById('EmptyState_MainMessage').parentElement.children).forEach(e=>e.remove());
            document.getElementById('Skip to message-region').style.display = 'none';
            ReadingArea.style.width = 'max-content';
        }
        const ItemReadingPane = document.getElementById('ItemReadingPaneContainer') || document.getElementById('ConversationReadingPaneContainer');
        if (ItemReadingPane) {
            document.getElementById('Skip to message-region').style.display = '';
            ReadingArea.style.width = '';
            ItemReadingPane.style.marginLeft = '0px';
            ItemReadingPane.style.backgroundColor = `rgba(${bg}, 0)`;
            Main.firstChild.firstChild.style.marginRight = '8px';
        } else if (ReadingContainer.firstChild?.firstChild?.id && ReadingContainer.firstChild.firstChild.id.includes('InitVisiblePart')) {
            ReadingContainer.firstChild.firstChild.style.backgroundColor = `rgba(${bg}, 0)`;
            document.getElementById('Skip to message-region').style.display = '';
            ReadingArea.style.width = '';
            Main.firstChild.firstChild.style.marginRight = '8px';
        }
    } catch (e){console.log(e)}
}

registerLoops();