Add "Replay" button to API Messages in Pusher Debug Console

replay-api-messages.js

// ==UserScript==
// @name         Pusher Debug Console Enhancements
// @namespace    http://www.leggetter.co.uk
// @version      0.1
// @description  Add a button to the Pusher JavaScript console that lets you replay API Messages
// @author       Phil @leggetter
// @match        https://app.pusher.com/apps/*/console
// @grant        none
// ==/UserScript==

var DEBUG = true;

function debugLog() {
    if( DEBUG ) {
        console.log( arguments );
    }
}

var PRIVATE_LOGGER_PREFIX = 'private-logger-';

var pusher = Pusher.instances[ 0 ];
var channels = pusher.channels.channels;
var loggerChannel;
Object.keys( channels ).forEach( function( name ) {
    if( name.indexOf( PRIVATE_LOGGER_PREFIX ) === 0 ) {
        loggerChannel = channels[ name ];
        return;
    }
} );

debugLog( '>> Found logger channel', loggerChannel.name );

loggerChannel.bind( 'log_message', function( log ) {
    if( log.type === 'api_message' ) {
        debugLog( '>> New API Message' );
        setTimeout( addReplayButtons, 100 ); // ensure DOM has updated
    }
} );

function addReplayButtons() {
    var apiMessageEls = jQuery('.api_message');
    debugLog( '>> found ', apiMessageEls.size(), 'message elements' );
    var debugDataEls = apiMessageEls.siblings('.message_body').find('.debug_data');
    debugLog( '>> found ', debugDataEls.size(), 'debug elements' );
    debugDataEls.each( function() {
        el = jQuery( this );
        debugLog( '>> debug el', el.attr( 'has-replay' ) );
        if( !el.attr( 'has-replay' )  ) { 
            debugLog( '>> adding button' );
            el.append('<div class="api-message-actions" style="position:relative; height: 30px;">' +
                      '  <button class="btn-flat" style="position: absolute; right: 10px;">Replay</button>' +
                      '</div>').click( replayApiMessage );
			el.attr( 'has-replay', true );
        }
    } );
}

function replayApiMessage() {
    debugLog( '>> replay' );
    var el = jQuery( this );
    
    var msgBodyEl = el.parent( '.message_body' );
    var apiMsgEl = msgBodyEl.prev( '.api_message' );
    
    var eventText = apiMsgEl.find( '.debug_message' ).text();
    var eventData = msgBodyEl.find( 'pre' ).text();
        
    var channelName = /Channel:\s([\w-@\.;]+)/.exec(eventText)[1];
    var eventName = /Event:\s([\w-@\.;]+)/.exec(eventText)[1];
    
    jQuery( '#event_channel' ).val( channelName );
    jQuery( '#event_event_name' ).val( eventName );
    jQuery( '#event_data' ).val( eventData );
    jQuery( '#submit_button' ).click();
}