slackdev.user.js

slackdev.user.js

// ==UserScript==
// @name         SlackDev
// @namespace    http://ewsme.com/
// @version      0.1
// @description  Replace slack apis with ngrok url. Open ngrok local (http://127.0.0.1:4040/inspect/http) then open slack settings pages
// @author       You
// @match        http://127.0.0.1:4040/inspect/http
// @match        https://api.slack.com/*
// @grant        GM_getValue
// @grant        GM_setValue
// ==/UserScript==
//
// A small script that updates slack hook endpoints based on the ngrok address
// 1. Open http://127.0.0.1:4040/inspect/http
// 2. Open your slack settings pages
//    a. https://api.slack.com/apps/xxxxx/interactive-messages?
//    b. https://api.slack.com/apps/xxxxx/event-subscriptions?

(function() {
    'use strict';

    const copyAddress = str => {
        const el = document.createElement('textarea')
        el.value = str
        el.setAttribute('readonly', '')
        el.style.position = 'absolute'
        el.style.left = '-9999px'
        document.body.appendChild(el)
        el.select()
        document.execCommand('copy')
        document.body.removeChild(el)
    }

    const storeNgrokAddress = () => {
        const ngrokAddress = [... document.querySelectorAll('.tunnels a')].filter(el => el.innerText.startsWith('https'))[0].innerText
        const storage = window.localStorage
        if (ngrokAddress) {
            GM_setValue('ngrokAddress', ngrokAddress)
            copyAddress(ngrokAddress)
        } else {
            console.log('Please click on the clear button')
        }
    }

    const updateNgrokAddress = address => {
        let normalisedAddress = address
        if (!address.startsWith('http')) {
            normalisedAddress = `https://${address}`
        }
        let eventsRequestUrl = $('#request_url')
        if (eventsRequestUrl.length > 0 && !eventsRequestUrl.first().val().startsWith(normalisedAddress) && window.confirm('Do you want to update ngrok urls?')) {
            if (eventsRequestUrl.first().val().length > 0) {
                $('#change_request_url').click()
            } else {
                if(!$('div[data-qa="activate_enable_events_toggle"] .ts_toggle').hasClass('checked')) {
                    $('div[data-qa="activate_enable_events_toggle"] .ts_toggle_button').click()
                }
            }
            $('#request_url')
                .val(`${normalisedAddress}/slack/events`)
                .blur()
            $('button[data-qa="save_changes_button"]').click()
        }
        const attachmentActionUrl = $('#attachment_action_section_add input[data-qa="attachment_action_url"]')
        const optionsLoadUrl = $('#attachment_action_section_add input[data-qa="options_load_url"]')
        if (attachmentActionUrl.length > 0 && !(attachmentActionUrl.first().val().startsWith(normalisedAddress) && optionsLoadUrl.first().val().startsWith(normalisedAddress)) && window.confirm('Do you want to update ngrok urls?')) {
            attachmentActionUrl
                .val(`${normalisedAddress}/slack/actions`)
                .trigger('keyup')
            optionsLoadUrl
                .val(`${normalisedAddress}/slack/options-loader`)
                .trigger('keyup')
            $('button[data-qa="save_changes_button"]').click()
        }
    }

    window.addEventListener('load', () => {
        const locationUrl = window.location
        if (locationUrl.host.startsWith('127.0.0.1') && locationUrl.pathname === '/inspect/http') {
            storeNgrokAddress()
        }
        if (locationUrl.host.startsWith('api.slack.com') && (locationUrl.pathname.endsWith('event-subscriptions') || locationUrl.pathname.endsWith('interactive-messages'))) {
            const ngrokAddress = GM_getValue('ngrokAddress')
            if (ngrokAddress) {
                console.log('Retrieved ngrokAddress:', ngrokAddress)
                updateNgrokAddress(ngrokAddress)
            }
        } else {
            console.log('Did not execute functions on page')
        }
    }, false);
})();