How to get a working AJAX/PHP script on chrome extension

Question

I'm currently trying to develop my first chrome extension based on a web app that I have already on another server as website.

Everything works fine except a section with an ajax form which sends Infos to a PHP file that sends mail. (simple contact form using ajax to display success message instead of changing or reloading my page)

i know that our browser can't even execute PHP since it's a Server-side language so is there a way to make that form functional? (and that give the same result as on a webserver?

Clearly I'm looking for a form that can work on a chrome extension and send email to the desired address that will display a success message at submit (no reload or new page)

(Extension is not mail-based, its a cryptocurrency wallet. There's just a contact form with 1 input at the bottom.)

php:

<?php

if ($_SERVER["REQUEST_METHOD"] == "POST") {


    $mail_to = "test@yopmail.com";


    $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);


    if ( empty($email)) {

        http_response_code(400);
        echo "Please complete the form and try again.";
        exit;
    }

    # Mail Content
    $content .= "New token demand\n\n";
    $content .= "Email: $email\n\n";


    # email headers.
    $headers = "From: New user";


    $success = mail($mail_to, $subject, $content, $headers);
    if ($success) {

        http_response_code(200);
        echo "Thank You! Your message has been sent.";
    } else {

        http_response_code(500);
        echo "Oops! Something went wrong, we couldn't send your message.";
    }

} else {

    http_response_code(403);
    echo "There was a problem with your submission, please try again.";
}
?>

jquery (.js)

(function ($) {
'use strict';

var form = $('.contact__form'),
    message = $('.contact__msg'),
    form_data;

// Success function
function done_func(response) {
    message.fadeIn().removeClass('alert-danger').addClass('alert-success');
    message.text(response);
    setTimeout(function () {
        message.fadeOut();
    }, 2000);
    form.find('input:not([type="submit"]), textarea').val('');
}

// fail function
function fail_func(data) {
    message.fadeIn().removeClass('alert-success').addClass('alert-success');
    message.text(data.responseText);
    setTimeout(function () {
        message.fadeOut();
    }, 2000);
}

form.submit(function (e) {
    e.preventDefault();
    form_data = $(this).serialize();
    $.ajax({
        type: 'POST',
        url: form.attr('action'),
        data: form_data
    })
    .done(done_func)
    .fail(fail_func);
});
})(jQuery);

form (html)

 <form novalidate="" class="contact__form" method="post" action="mailnews.php">

                            <!-- form message -->
                            <div class="row">
                                <div class="col-12">
                                    <div class="alert contact__msg alert-success" 
style="display: none;" role="alert">Thanks </div>
                                </div>
                            </div>
                            <!-- end message -->

                            <!-- form element -->
                            <div class="row">

                                <div class="col-md-6 form-group" style="">
                                    <input name="email" type="email" class="form-control" 
placeholder="Wallet Address" required="" style="">
                                </div>

                                <div class="col-12" style="">
                                    <input name="submit" type="submit" class="btn btn success" value="Get tokens">
                                </div>
                            </div>
                            <!-- end form element -->
                        </form>

Here's what I get on chrome extension when submitting

Possible that can help you (develop system mail by gmail)? [LINK](https://stackoverflow.com/questions/23174710/how-to-develop-chrome-extension-for-gmail) — Simone Rossaini, Mar 04 '20 at 11:52
@SimoneRossaini Thanks but if i understand this is for extension created to intteract with mail or get special data. To be clear, my extension is a cryptocurrency wallet where at the bottom, there's a form with one input to collect wallet address from usr. -> in order to send free token to those who want — 0x44N, Mar 04 '20 at 11:57
as a said, its a simple contact form.i Will look deeper into ur link. — 0x44N, Mar 04 '20 at 11:58
@wOxxOm ok got that https://pastebin.com/huFzYaFT, where to place it ? action="?" — 0x44N, Mar 04 '20 at 13:04

score 0 · Answer 1 · answered Mar 04 '20 at 13:19

Ok got an idea: resolved by deleting local php/ajax form, create an iframe on my html page that point to a web-server where I host the entire working form (html,js,php) precedently deleted from the extension local files.

Hope it will help someone.

Any other solutions appreciated

How to get a working AJAX/PHP script on chrome extension

1 Answers1