HipChat-like theme for Slack

hipslack.js

// ==UserScript==
// @name         HipSlack
// @namespace    http://domarkas.lt/
// @version      0.1
// @description  HipChat-like theme for Slack
// @author       Tadas Domarkas
// @match        https://*.slack.com/*
// @grant        none
// ==/UserScript==

(function(bootData) {
    'use strict';
    // skip frames
    if (window.self != window.top) {
        return
    }

    const injectCss = function(css) {
        var head = document.head || document.getElementsByTagName('head')[0]
        var style = document.createElement('style')

        style.type = 'text/css'
        style.appendChild(document.createTextNode(css))
        head.appendChild(style)
    }

    injectCss(`
body.slackOverride {
    font-family: Helvetica, Arial, sans-serif;
}

.slackOverride .slackOverride-message-owner .c-message {
    background: #E0EAF3;
}

.slackOverride .c-member_slug {
    border: 1px solid #CCCCCC;
    background: #F5F5F5;
    color: #333 !important;
}

.slackOverride .p-channel_sidebar__channel--selected, .p-channel_sidebar__channel--selected:hover, .p-channel_sidebar__link--selected, .p-channel_sidebar__link--selected:hover {
    background: #2472AD;
}

.slackOverride .c-message__sender a {
    color: #707070;
    margin-right: 5px;
}

.slackOverride .slackOverride-message-owner .c-message__sender a {
    color: #4A6785;
}

.slackOverride .c-mrkdwn__broadcast--mention {
    background: #3B73AF;
    color: #fff;
    padding: 0 3px 3px;
}
`)

    const userId = bootData['user_id']

    if (!userId) {
        return
    }

    document.querySelector('body').classList.add('slackOverride')

    const decorateMessageList = () => {
        document.querySelectorAll('.c-virtual_list__item:not(.slackOverride-message)').forEach((el) => {
            const messageSenderElement = el.querySelector('[data-message-sender]')

            el.classList.add('slackOverride-message')

            if (!messageSenderElement) {
                return
            }

            messageSenderElement.style.color = ''

            el.classList.add(messageSenderElement.getAttribute('data-message-sender') === userId ? 'slackOverride-message-owner' : 'slackOverride-message-user')
        })
    }

    setInterval(decorateMessageList, 3000)
})(boot_data || {})