[英]How can I send data to Chrome extension?
我正在為我的書簽擴展開發用戶身份驗證。 該擴展程序適用於http://ting-1.appspot.com/上的Google App Engine(Python)后端。
第一次運行擴展程序時, 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 <ting@gmail.com>",
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答案的代碼。 除最后一步外,一切正常: 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 <ting@gmail.com>"
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 <ting@gmail.com>"
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)
您可以使用Channel API來完成此任務。 在創建XMLHttpRequest的同時請求令牌,並打開通道以偵聽消息。 當您的應用處理與用戶點擊鏈接相對應的HTTP請求時,請向為該用戶的擴展創建的頻道發送消息。
更多詳情:
基本上,在制作XHR的options.html中,執行以下操作:
var channel;
var socket;
var handler = {
onmessage: function(evt) {
// evt.data will be what your server sends in channel.send_message
}
};
var xhr = new XMLHttpRequest();
xhr.onReadyStateChange = function() {
// error handling and whatnot elided
if (xhr.readyState == 4 and xhr.status == 200) {
// We got a response from the server. The responseText is
// a channel token so we can listen for a "verified" message.
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);
然后在您的服務器上,'authsender'頁面的處理程序將執行以下操作:
class AuthSenderHandler(webapp.RequestHandler):
def post(self):
# get whatever data is in the form to send an email.
# let's say that user_id is a field we extracted either from a cookie or from
# the POST parameters themselves.
link = "http://your.server.com/authHandler?user_id=%s" % user_id
message = mail.EmailMessage()
message.body = """some stuff %s""" % link
# fill in other message fields, then send it.
# now we'll create a channel token using the user_id and return
# it to the client.
token = channel.create_channel(user_id)
self.response.out.write(token)
以上兩個功能將讓您的客戶端在一個頻道上收聽。 下一步是:當用戶點擊鏈接時會發生什么?
之前,我們在包含user_id參數的電子郵件中發送了該鏈接(出於說明的目的,您可能想要使用其他內容)。 現在,當用戶點擊鏈接時,它將向authHandler
路徑發出HTTP請求,並以user_id
作為參數。 因此我們可以使用user_id來識別要發送消息的頻道,如下所示:
class AuthHandler(webapp.RequestHandler):
def get(self):
user_id = self.request.get("user_id")
# send a message indicating the user received the email and
# verified to our client page. You may want to send other data.
channel.send_message(user_id, "authorized")
# probably want to show a nice "you've been authorized" page or something
然后將調用handler.onmessage回調,您可以做任何您需要做的事情,因為用戶已經驗證了他們的電子郵件地址。
希望那有所幫助!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.