Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does Google App Engine Channel API (jsapi) fail to load in a Chrome extension?

I'm using the Channel API in a Chrome extension.

In Google App Engine Channel API Javascript Reference (Python) page it says that

Include the following in your html page before any JavaScript code that refers to it:

<script type="text/javascript" src="/_ah/channel/jsapi"></script>

So, I put that in the header of my options.html file:

<html>
<head>
    <title>Extension Options</title>
    <script type="text/javascript" src="/_ah/channel/jsapi"></script>
</head>

but Chrome throws jsapiFailed to load resource error. What am I doing wrong?

Update

As per Moishe's answer I updated the call to jsapi like this:

<head>
    <title>Extension Options</title>
    <!-- this does not work because it is local
    <script type="text/javascript" src="/_ah/channel/jsapi"></script>
    -->
    <script type="text/javascript" src="https://talkgadget.google.com/talkgadget/channel.js"></script>
</head>

Update

I added onopen and other properties. Now I get the onopen alert but I am not getting the evt.data alert. What am I doing wrong?

<html>
<head>
    <title>Extension Options</title>
    <!-- this does not work because it is local url
    <script type="text/javascript" src="/_ah/channel/jsapi"></script>
    -->
    <script type="text/javascript" src="https://talkgadget.google.com/talkgadget/channel.js"></script>
</head>

<body>
<p>Enter your gmail address:</p>

<textarea id="getEmail" style="margin-bottom: 4px; width: 250px; height: 20px">
</textarea><br />

<button id="save">Save</button>
<!--<button id="save">Clear</button>-->

<script>
document.getElementById("getEmail").placeholder = "your gmail address" ;

//save entered gmail address
document.getElementById("save").addEventListener
(
    "click", 
    function ()
    {
        var userEmail = document.getElementById("getEmail").value;
        var formData = new FormData();
        formData.append("extension_user", userEmail);
        alert("after formData.append")

        var channel;
        var socket;
        var handler = 
        {
            onopen: function () { alert("onopen") },
            onerror: function () { alert("onerror") },
            onclose: function () { alert("onclose") },
            onmessage: 
            function (evt)
            {
                //evt.data will be what the server sends in channel.send_message
                console.log("evt.data received from authhandler: " + evt.data);
                alert("evt.data is: " + evt.data)
            }
        };    

        var xhr = new XMLHttpRequest();
        //changed to lowercase
        xhr.onreadystatechange = function()
        {
            //alert("xhr.onReadyStateChange")
            //error handling etc not included
            if (xhr.readyState == 4 && xhr.status == 200)
            {
                token = xhr.responseText;
                alert("token: " + token)
                channel = new goog.appengine.Channel(token);
                socket = channel.open(handler);
            }
        };
        xhr.open("POST", "http://ting-1.appspot.com/authsender", true);
        xhr.send(formData);
        console.log("formData sent to authsender: " + formData);
    }, false
)



</script>
</body>
</html>
like image 390
Zeynel Avatar asked Oct 10 '22 14:10

Zeynel


1 Answers

In a chrome extension, you'll need to directly specify the path for the Channel javascript (https://talkgadget.google.com/talkgadget/channel.js). The request for /_ah/channel/jsapi can't be redirected by anything because the file that's trying to load it is local.

like image 102
Moishe Lettvin Avatar answered Oct 13 '22 11:10

Moishe Lettvin