3
ブックマーク拡張のユーザー認証を開発しています。この拡張機能は、Google App Engine（Python）バックエンドのhttp://ting-1.appspot.com/で動作します。Chrome拡張機能にデータを送信するにはどうすればよいですか？
エクステンションが初めて実行されたときに、background.htmlはoptions.htmlを新しいタブで開き、ユーザーは自分のメールアドレスを入力します。私はこのようなアプリ（まだ試していない）に電子メールアドレスを送信します。
in options.html
---------------
var formData = new FormData();
formData.append("extension_user", userEmail);
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://ting-1.appspot.com/authsender", true);
xhr.send(formData);
アプリでは、ハンドラAuthSenderは、ユーザーに確認のメールを送信します。
class AuthSender(webapp.RequestHandler):
def post(self):
new_user = self.request.get("extension_user")
mail.send_mail(
sender="Ting <[email protected]>",
to=new_user,
subject="Ting Bookmarking: confirm your email",
body="""click on the link below to confirm your email:
<a href="http://ting-1.appspot.com/authHandler"></a>
Happy Bookmarking!""")
ユーザーがクリックした場合アプリ内のメールAuthReceiveハンドラのリンクがリクエストを処理し、確認メッセージを内線番号に送信します。しかし、私はその確認書を内線番号に送る方法を理解できませんでした。
ユーザーがリンクをクリックすると、確認メッセージを内線番号に送り返すにはどうすればよいですか？ XMLHttpRequestをもう一度使用しますか？どうやって？どのようなリスナーをエクステンションに置く必要がありますか？以下は
アプリでAuthReceiveハンドラのスケッチです：
class AuthReceive(InboundMailHandler):
def receive(self, message):
#---------------------------------------
#receive email // I know this part
#send confirmation to extension // I need help with this
#--------------------------------------
...
そしてbackground.htmlにあなたの助けを
//...
// add listener and save the variable to localStorage
//...
感謝。
UPDATE
これは、Moishe's answerに適合するためのコードです。最後のステップ以外はすべて動作します。handler.onmessageはトリガーされません。
options.html
<html>
<head><title>Extension Options</title></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 type="text/javascript">
document.getElementById("getEmail").placeholder = "your gmail address" ;
//send entered gmail address to the server
document.getElementById("save").addEventListener
(
"click",
function()
{
var userEmail = document.getElementById("getEmail").value;
var formData = new FormData();
formData.append("extension_user", userEmail);
var channel;
var socket;
var handler = new Object();
handler.onmessage =
function (evt)
{
//evt.data will be what the server sends in channel.send_message
console.log("evt.data received from authhandler: " + evt.data);
};
var xhr = new XMLHttpRequest();
xhr.onReadyStateChange = function()
{
//error handling etc not included
if (xhr.readyState == 4 && xhr.status == 200)
{
token = xhr.responseText;
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>
AuthSenderとAuthHandler
class AuthSender(webapp.RequestHandler):
def post(self):
new_user = self.request.get("extension_user")
link = "http://ting-1.appspot.com/authhandler?new_user=%s" % new_user
message = mail.EmailMessage()
message.sender="Ting <[email protected]>"
message.to=new_user
message.subject="Ting Bookmarking - Confirm your email"
message.body="""Click on the link to confirm your email: %s """ % link
message.send()
logging.info("message sent to: %s " % message.to)
token = channel.create_channel(new_user)
self.response.out.write(token)
class AuthHandler(webapp.RequestHandler):
def get(self):
new_user = self.request.get("new_user")
channel.send_message(new_user, new_user)
logging.info("new_user sent to client: %s" % new_user)
作業バージョン
options.html
<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>
<script>
document.getElementById("getEmail").placeholder = "your gmail address" ;
document.getElementById("save").addEventListener
(
"click",
function()
{
var userEmail = document.getElementById("getEmail").value;
var formData = new FormData();
formData.append("extension_user", userEmail);
var channel;
var socket;
var handler =
{
onopen: function() { alert("onopen") },
onerror: function() { alert("onerror") },
onclose: function() { alert("onclose") },
onmessage:
function (evt)
{
alert("evt.data is: " + evt.data)
}
};
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function()
{
if (xhr.readyState == 4 && xhr.status == 200)
{
token = xhr.responseText;
channel = new goog.appengine.Channel(token);
socket = channel.open(handler);
}
};
xhr.open("POST", "http://ting-1.appspot.com/authsender", true);
xhr.send(formData);
}, false
)
</script>
</body>
</html>
AuthSenderとAuthHandler
class AuthSender(webapp.RequestHandler):
def post(self):
new_user = self.request.get("extension_user")
link = "http://ting-1.appspot.com/authhandler?new_user=%s" % new_user
message = mail.EmailMessage()
message.sender="Ting <[email protected]>"
message.to=new_user
message.subject="Ting Bookmarking - Confirm your email"
message.body="""Click on the link to confirm your email: %s """ % link
message.send()
token = channel.create_channel(new_user)
self.response.out.write(token)
class AuthHandler(webapp.RequestHandler):
def get(self):
new_user = self.request.get("new_user")
self.response.out.write(new_user)
channel.send_message(new_user, new_user)
「電子メール」とは、「電子メールアドレス」を意味します。* – kindall
@kindall;はい、ご理解いただきありがとうございます。私は、 'userEmail = message.sender'のように、アプリケーションの' AuthReceive'ハンドラでユーザの電子メールアドレスを取得し、この情報をエクステンションに送ることを提案します。拡張機能に 'userEmail'を送る方法を見つけようとしています。再度、感謝します。 – Zeynel
あなた自身の認証ソリューションを調理しようとしています。 Chrome-to-Phoneの何が問題なのですか？ –