[英]Chrome Extension post request not sending data
First time using the site to ask a question. 第一次使用网站提问。 I'm new to Chrome Extensions so I'm sure I'm making some stupid mistake. 我是Chrome扩展程序的新用户,所以我确定我犯了一些愚蠢的错误。 I apologize in advance. 我提前道歉。
I'm trying to grab the current tab's url and POST it to a URL that will then recieve it and push it into a database. 我正在尝试获取当前选项卡的URL并将其POST到URL,然后将其接收并将其推送到数据库中。 Like my own personal bookmarking service. 就像我自己的个人书签服务。 I've debuged as much as I can, the data is making it all the way to where i'm sending my XHR request.. but the data doesn't come out when I echo it on my server side script. 我已经尽可能多地进行了调试,数据正在一直到我发送XHR请求的地方..但是当我在服务器端脚本上回显它时,数据不会出现。 I'm confirming that it's hitting my URL because i'm console logging the output... but again no data is being passed. 我确认它正在击中我的URL,因为我是控制台记录输出...但是再次没有传递数据。
BACKGROUND.JS BACKGROUND.JS
chrome.runtime.onMessage.addListener(function(request, sender, callback) {
if (request.action == "xhttp") {
var xhttp = new XMLHttpRequest();
var method = request.method ? request.method.toUpperCase() : 'GET';
xhttp.open(method, request.url, true);
xhttp.send(request.data);
xhttp.onload = function() {
callback(xhttp.responseText);
};
return true
}
});
MANIFEST.json 的manifest.json
{
"name": "bookmarker",
"version": "0.0.1",
"manifest_version": 2,
"description": "POSTIN BOOKMARKS!",
"homepage_url": "URL",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"permissions": [
"contentSettings",
"cookies",
"tabs",
"geolocation",
"http://*/*"
],
"content_scripts": [
{
"js": ["contentscript.js"],
"matches": ["http://*/*"]
}
],
"browser_action": {
"default_icon": "icons/icon16.png",
"default_popup": "popup.html"
},
"background": {
"scripts": ["background.js"],
"persistent": false
}
}
MAIN.JS MAIN.JS
jQuery(function() {
jQuery('.reminded').on('click', function(e){
e.preventDefault();
chrome.tabs.query({currentWindow: true, active: true}, function(tabs){
var url = tabs[0].url,
date = 1391048414,
clientId = 1234
chrome.runtime.sendMessage({
method: "POST",
action: "xhttp",
url: "http://www.API.com/endpoint",
data: {url: url, date: date, clientId: clientId}
}, function(responseText) {
console.log(responseText);
});
});
});
});
Thank you very much in advance for any light anyone can share. 非常感谢您提前与任何人分享的光。
You didn't mention where "main.js" was used, but I guess that it's used in the popup page, right? 你没有提到使用“main.js”的地方,但我猜它是在弹出页面中使用的,对吧? The popup page can also make cross-domain requests in a Chrome extension when you've declared the permissions in the manifest file. 当您在清单文件中声明权限时,弹出页面还可以在Chrome扩展程序中发出跨域请求。 So, just use jQuery.ajax
directly to make the cross-domain request: 所以,只需直接使用jQuery.ajax
来发出跨域请求:
jQuery.ajax({
type: "POST",
url: "http://www.API.com/endpoint",
data: {url: url, date: date, clientId: clientId},
success: function(data) {
console.log(data);
}
});
For the record, the code in your question is failing because you're trying to submit a JavaScript Object ( {url: url, date: date, clientId: clientId}
via the .send
method of a XMLHttpRequest
. This makes no sense, and your server would receive the string [object Object]
because of the default serialization of objects. 为了记录,您的问题中的代码失败了,因为您尝试通过XMLHttpRequest
的.send
方法提交JavaScript对象( {url: url, date: date, clientId: clientId}
。这没有任何意义,并且由于[object Object]
的默认序列化,您的服务器将收到字符串[object Object]
。
To get your original code to work, you should use jQuery.param
to serialize the form data and xhttp.setRequestHeader("Content-Type", "application/x-www-form-url-encoded");
要使原始代码xhttp.setRequestHeader("Content-Type", "application/x-www-form-url-encoded");
,您应该使用jQuery.param
来序列化表单数据和xhttp.setRequestHeader("Content-Type", "application/x-www-form-url-encoded");
. 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.