I'm attempting to send a mail from a chrome extension.I could successfully perform the task using php. However I wanted to make the process asynchronous using ajax. I made the necessary changes. I can display "mail sent successfully" on same page without redirecting to another page in normal html window but, when I try to do the same inside an extension the whole php page gets loaded instead of echo message.
**manifest.json**
{
"name":"extmail",
"description":"Quicky send emails to your contacts",
"version":"2.0",
"permissions":["activeTab"],
"background":{
"script":["js/script.js"],
"script":["js/submit.js"]
},
"content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'",
"browser_action":{
"default_title":"TinyMessage",
"default_icon":"images/icon.png",
"default_popup":"popup.html"
},
"manifest_version": 2
}
**submit.js**
$(document).ready(function(){
$(".image").click(function(){ //on click image
var name = $(this).attr("name"); //declare name as email
var url=$("#temp").val(); //set email to hidden input as value
var message=$("#message").val();
//to work asynchronously
var Url="php/mail.php";
var httpRequest;
httpRequest=new XMLHttpRequest();
httpRequest.onreadystatechange=sendUrl;
httpRequest.open("POST",Url,true);
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpRequest.send("url="+url+"&toemail="+name+"&message="+message);
function sendUrl()
{
if(httpRequest.readyState==httpRequest.DONE)
if(httpRequest.status==200)
{
var response=httpRequest.responseText;
document.getElementById("response").innerHTML=response;
}
}
});
});
**mail.php**
<?php
session_start();
$url = $_POST['url']; // getting url
$toemail = $_POST['toemail'];
$message = $_POST['message']; // getting message
$to = $toemail; // to email address
$subject = "sent from extension"; // assign subject
$txt = "$url
$message";
$headers = "From: donotreply@fmt.com";
// Sending mail
if(mail($to,$subject,$txt,$headers)){ // mail function send mail using a smtp server
echo "mail sent successfully ";
}
else{
echo "mail not sent";
}
?>
**popup.html**
<html>
<head>
<title>Easy Mail</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/submit.js"></script>
<script type="text/javascript" src="js/load.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>Tiny MESSAGE!</h1>
<form action="http://localhost/extmail/php/mail.php" id="form1" method="POST">
<input id="toemail" type="hidden" name="toemail" >
<input id="temp" name="url">
<label for="message">Enter message:</label><br/>
<input id="message" type="text" name="message">
<!-- <input type="submit" value="send Mail"> -->
<br>
<br>
<img class="image" id="image1" name="temp@example.com" src="images/contact1.jpg" title="temp@example.com" alt="Smiley face" height="40" width="40"><span id="badge1"></span>
<figcaption>contactone</figcaption>
</form>
<div id="response"></div>
</body>
