Wordpress медиа всплывающее на странице настроек с использованием JavaScript

Question

Я создаю плагин для WordPress, где нужно редактировать множество изображений. Я хочу добавить всплывающее окно с мультимедиа, в котором отображаются все изображения из библиотеки мультимедиа.

Если всплывающее окно с мультимедиа появляется, мне нужно выбрать изображение и получить URL-адрес WordPress, чтобы я мог использоватьчто в моем HTML.

Я не могу использовать jQuery, поэтому код должен быть в Javascript.

Код, который у меня сейчас есть:

Settings.php

if ( is_admin() ) { 
    add_action('admin_menu', 'register_options_page');
    add_action( 'admin_enqueue_scripts', 'load_wp_media_files' );
} 
else {
    // non-admin enqueues, actions, and filters
}

function register_options_page() {
    add_options_page('Custom Login', 'Custom Login', 'manage_options', 'Custom Login', 'Page_content');
}

function Page_content() {
    require_once "settingspage.php";
}

function load_wp_media_files( $page ) {
    // change to the $page where you want to enqueue the script
    if( $page == 'options-general.php' ) {
        // Enqueue WordPress media scripts
        wp_enqueue_media();
        // Enqueue custom script that will interact with wp.media
        wp_enqueue_script( 'MediaPopup', plugins_url( '/js/media_popup.js'), array('jquery'), '0.1' );
    }
}

settingspage.php

<div class="wrap">
    <?php screen_icon(); ?>
    <h1>Custom Login Options</h1>
    <form method="post" action="options.php">
        <?php settings_fields( 'login_background_image' ); ?>

        <input type="text" class="selected_image" />
        <input type="button" class="upload_image_button" value="Upload Image">

        <?php submit_button(); ?>
    </form>
</div>

<style scoped>
    label {
        line-height: 30px;
    }
</style>

media_popup.js

var custom_uploader;

document.querySelector('#upload_image_button').addEventListener("click", function (e) {
    e.preventDefault();
    //Extend the wp.media object
    custom_uploader = wp.media.frames.file_frame = wp.media({
        title: 'Choose Image',
        button: {
            text: 'Choose Image'
        },
        multiple: false
    });

    //When a file is selected, grab the URL and set it as the text field's value
    // custom_uploader.addEventListener("change", function () {
    //     var attachment = custom_uploader.state().get('selection').first().toJSON();
    //     alert(attachment.url);
    // });
    //Open the uploader dialog
    custom_uploader.open();
});

Если вы знаете решение, ярад попробовать.