1

In my chrome extension (this is in the popup page) I have an option to open directly into the user's default mail client with href="mailto:" and I have also added target=_blank to this link, however, when it is clicked, a new tab opens, but the page doesn't load and is in a blackscreen until I manually press enter on the URL of the new tab.

This code snippet simulates the problem, however stackouverflow snippets cannot open new tabs, so to test it you must open it elsewhere

body {
  font-family: "Avenir Next", "Avenir", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
<h1>example@gmail.com</h1>
<a href="mailto:example@gmail.com" target="_blank">Send Email</a>

Appreciate any help, thanks :)

arg_arthur
  • 78
  • 5

2 Answers2

1

Maybe you can take a look on this code

body {
  font-family: "Avenir Next", "Avenir", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="a.css" />
  <title>Document</title>
</head>

<body>
  <h1>example@gmail.com</h1>
  <a href="" target="_blank" onclick="window.open('https://mail.google.com/mail/?view=cm&fs=1&to=someone@example.com');">Click to Mail</a
    >
  </body>
</html>

Maybe you can empty your 'href' attribute on your anchor tag, then use onclick attribute, perhaps the reason why you get stuck is the href-mailto prevent opening new tab, because the behavior of mailto is open a different window (maybe your email app on your computer), not to open a new tab on your browser

for further info and detail you can check on this link: URL to compose a message in Gmail (with full Gmail interface and specified to, bcc, subject, etc.)

Thank you, I hope this will help

Rodericus Ifo Krista
  • 84
  • 3
0

I think what you're looking for is mailto.

Try mailto:example@gmail.com.

body {
  font-family: "Avenir Next", "Avenir", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
<h1>example@gmail.com</h1>
<a href="mailto:example@gmail.com" target="_blank">Send Email</a>
Brandon Burkett
  • 49
  • 2
  • 1
    it was a typeo sorry, even with `mailto` I get loading issues, when following the link, the new tab is stuck in a blackscreen – arg_arthur Aug 12 '22 at 01:05