Extend the WP_Customize_Image_Control class to change its non-frame $button_labels

Finally, I found how to change the non-frame $button_labels of a WP_Customize_Image_Control by extending its class, not reassigning a new $type and implement an enqueue() function to enqueue a pure JavaScript code to manipulate the non-frame labels, like this to change the dynamic 'default' label by .addEventListener("click", handler) to its dynamic .button:

class WP_Customize_Custom_Control extends WP_Customize_Image_Control {

    public function enqueue() {
        // There's no parent::enqueue() function.
        ?>
<script>
    // Will execute if the specific element is ready, in pure JavaScript way.
    var elemReadyCheckInterval = setInterval(function() {
        if (document.getElementById("customize-control-custom")) {
            clearInterval(elemReadyCheckInterval);

            var controlCustom = document.getElementById("customize-control-custom");
            var controlButton = controlCustom.getElementsByClassName("button")[0];

            controlButton.addEventListener("click", function () {
                buttonClick(controlCustom, controlButton);
            });
        }
    }, 10);

    function buttonClick(custom, button) {
        var previousLabel = button.innerHTML;
        var buttonClickFunc = arguments.callee;

        var elemReadyCheckInterval = setInterval(function() {
            // Remove the EventListener `buttonClick(custom, button)` from the `button`.
            button.removeEventListener('click', buttonClickFunc);

            // Assign the new element to the `button` because it's dynamically changing!
            button = custom.getElementsByClassName("button")[0];
            // Compare the `previousLabel` to the current `button` label.
            if (previousLabel !== button.innerHTML) {
                clearInterval(elemReadyCheckInterval);

                // If the dynamic label is 'Default'.
                if (button.innerHTML === 'Default')
                    button.innerHTML = 'Custom Default';

                button.addEventListener("click", function () {
                    buttonClick(custom, button);
                });
            }
        }, 10);
    }
</script>
        <?php
    }

}

I haven’t found to change the non-frame labels by overriding the other functions such content_template() and render_content(), I just got a hard time by trying to implement in those ways because those function blocks will just be used if you set a new $type but setting a new type will make all the button functionalities gone, that’s why I didn’t reassign a new $type.

And the unchanging of the non-frame $button_labels by doing this, is a bug!

$this->button_labels = array(
  'select'       => __( 'Custom Select Image' ),
  'change'       => __( 'Custom Change Image' ),
  'remove'       => __( 'Custom Remove' ),
  'default'      => __( 'Custom Default' ),
  'placeholder'  => __( 'Custom No image selected' ),
);