1

This is regarding a Google Chrome Extension which I am trying to build.

I currently have 2 files. One JS file and one HTMl file.

I want to use the JS variable in my HTML file. But I'm using the "mailto" functionality in my HTMl file. So when someone clicks on the image in the HTML file, it will automatically open the email client for the user and auto-populate the "to", "subject" and the "body" fields.

So, I have one variable in my JS file and I want the value of that variable to attached in the body section of the email inbox.

So, my question is how do I do that?

So here's my JS file - 

var all_details = "Core = " + core + "\n" + "Workspace GUID = " + workspaceId + "\n" + "Model GUID = " + modelId;

console.log(all_details);

// So here, I want all the data from the "all_details" variable in my HTML mailto body field.

Here's my HTML code - 

<a id= "insert" href="mailto:abc@google.com?subject=Issue &body=${all_details}" target="_blank"><img border="0" src="support.png" width="50" height="50" title="Have questions?"></a>
<h3>Contact Us</h3>

So, I want that when I click on the above image (which is fetched from the HTML src), it should open an email inbox (it does open now).

I just want the contents/data from the "all-details" variable from my JS to be pasted in the body section of the email inbox.

Bhavik Thakkar
  • 9
  • 1
  • Are you using ES6+? Asking because the `${all_details}` should work in a backtick string (`) – Jimmy Adaro May 01 '19 at 17:20
  • @JimmyAdaro Only if the HTML is also built in the javascript file which I'm not sure that it is - `"One JS file and one HTMl file."` – Lewis May 01 '19 at 17:20

2 Answers2

1

Instead of hard coding into the href, you can use javascript to detect a click on the link and access the variable that way and "redirect" the user to mailto: instead of messing with the href. You can also get rid of the target="_blank". Also you don't need the anchor link anyway.

var all_details = "testdata";

document.getElementById("insert").addEventListener("click",function(e){
     e.preventDefault();
     location.href = "mailto:abc@google.com?subject=Issue &body=" + all_details;
});
 #insert{cursor:pointer;}
<img id= "insert" border="0" src="support.png" width="50" height="50" title="Have questions?">
<h3>Contact Us</h3>
imvain2
  • 15,480
  • 1
  • 16
  • 21
  • Only downside: the location has to be hardcoded in the javascript. This wouldn't work for multiple links without also hardcoding those. – Lewis May 01 '19 at 17:27
  • Thanks for the help. I somehow cannot make it work in my Chrome extension. It works when I create a new page and copy the same code but does not work in my Chrome Extension. I know that there are some limitations for the Chrome Extensions but any idea about why is this not working for the chrome extension? It does not open the email inbox. – Bhavik Thakkar May 01 '19 at 18:09
  • I don't use Chrome Extensions so I can't assist, but here are some options that might make sense to you: https://stackoverflow.com/a/34363081/3684265 – imvain2 May 01 '19 at 18:15
  • Okay, so it eventually worked out. If I remove the `e.preventDefault();`, it will work as expected. Not sure why but seems as if it is working now. – Bhavik Thakkar May 22 '19 at 06:34
-1

You could add an event listener to the insert link and append the variable to its href that way. An example is below;

let insertA = document.getElementById('insert');
let allDetails = 'test-string';

insertA.addEventListener('click', function(e){
  e.preventDefault();
  this.href = this.href + allDetails;
  console.log(this.href);
})
<a id= "insert" href="mailto:abc@google.com?subject=Issue&body=" target="_blank"><img border="0" src="support.png" width="50" height="50" title="Have questions?"></a>
<h3>Contact Us</h3>
Lewis
  • 3,479
  • 25
  • 40