CODEWITHSUNDEEP
google-chromegoogle-chrome-extensiongoogle-chrome-app
Joshua Smith
Joshua Smith

Reputation: 3809

Opening a mailto: link from a chrome packaged app

I've created a chrome packaged app which comes down from the Chrome Store as a CRX. I'd like to let the user send mail from the app, using a mailto: link. It appears that this is not allowed, because of security restrictions (when I try in development, that's the error I get).

I found another thread where they said it worked by setting location.href, but that question is pretty old, and I'm assuming the security restriction may be new.

So… is there any way to open the user's local mail client from a chrome packaged app, so they can send a message?

Upvotes: 0

Views: 1457

Answers (1)

gkalpak
gkalpak

Reputation: 48211

A few remarks:

  • This question is about providing the mailto functionality from within an iframe in the main window.
  • Adding a link (with the appropriate href) works fine, but requires user-interaction (clicking the link): <a href="mailto:...">...</a>
  • Using location.href = ... is prevented from the Content Security Policy (which can possibly be relaxed - I didn't look further into it).
  • Using window.top.location.href = ... results in the following error: Can't open same-window link to "mailto:..."; try target="_blank".

The solution:

It worked for me using:

    window.open("mailto:...");

For the sake of completeness, below is the source code of a sample extension that illustrates the above

manifest.json:

{
    "manifest_version": 2,
    "name":    "Test App",
    "version": "0.0",

    "app": {
        "background": {
            "scripts": ["background.js"]
        }
    }
}

background.js:

chrome.app.runtime.onLaunched.addListener(function() {
    chrome.app.window.create("wrapper.html");
});

wrapper.html:

<!DOCTYPE html>
<html>
    <head></head>
    <body><iframe src="main.html"></iframe></body>
</html>

main.html:

<!DOCTYPE html>
<html>
    <head><script type="text/javascript" src="main.js"></script></head>
    <body>
        <form id="frm1">
            <input type="email" id="inp1" placeHolder="Recipient's e-mail"
                   required /><br />
            <input type="text" id="inp2" placeHolder="Message's subject"
                   required /><br />
            <input type="submit" id="btn1" value="Send e-mail" />
        </form>
    </body>
</html>

main.js:

window.addEventListener("DOMContentLoaded", function() {
    var frm1 = document.getElementById("frm1");
    var inp1 = document.getElementById("inp1");
    var inp2 = document.getElementById("inp2");
    var btn1 = document.getElementById("btn1");

    frm1.addEventListener("submit", function(evt) {
        evt.preventDefault();
    });

    btn1.addEventListener("click", function() {
        var email = inp1.value;
        var subject = encodeURIComponent(inp2.value);
        var mailToStr = "mailto:" + email + "?Subject=" + subject);
        console.log(mailToStr);
        window.open(mailToStr);
    });

});

Upvotes: 1

Related Questions