如何在Chrome扩展中使用AJAX进行POST请求？ [英] How to make a POST request using AJAX in a Chrome Extension?
问题描述
当浏览器在我的网页上时，我试图做一个ajax调用，它完美地工作，但是一旦我离开我的域，它就会失败。这是一个封闭的系统，用户知道他们正在被追踪，所以没有任何阴影发生。我在域外的所有内容上收到错误406。例如，如果我在我的网址www.mywebpage.com上执行完美的脚本，但只要访问www.yourwebpage.com，它就会返回错误。
I曾尝试将manifest.json中的权限设置为我的网址，所有网址，特定网址，但其行为方式相同。这是我的background.js
chrome.runtime.onMessage.addListener
（
函数（消息，发送者，发送响应）
{
if（message.applicationcode ==VALIDAPPLICATIONKEY）
{
var salt = message.salt;
var learnerid = message.learnerid ;
var behaviorkey = message.behaviorkey;
var behaviorname = message.behaviorname;
var behaviorkeyname = message.behaviorkeyname;
chrome.tabs.query
（
{active：true}，
function（arrayOfTabs）
{
var data = new FormData（）;
data.append（'Salt'，salt）;
data.append（'LearnerID'，learnerid）;
data.append（'BehaviorKey'，behaviorkey）;
data.append（'BehaviorName'，behaviorname）;
da ta.append（'BehaviorKeyName'，behaviorkeyname）;
data.append（'BehaviorValue'，arrayOfTabs [0] .url）;
var xhr = new XMLHttpRequest（）;
xhr.open（'POST'，'https://www.mywebpage.com/myservice.php'，true）;
xhr.onreadystatechange = function（）
{
if（xhr.readyState == 4）
{
// JSON.parse不计算攻击者的脚本。
var resp = JSON.parse（xhr.responseText）;
console.log（resp）;
}
}
xhr.send（data）;
}
）; //结束查询
返回true;
）; //结束侦听器
是我当前的清单文件。
{
manifest_version：2，
name：应用，
description：插件，
版本：1.0，
background：
{
scripts：[ jquery.js，background.js]，
persistent：true
}，
permissions：[
tabs，http：// www .mywebpage.com / *，https://www.mywebpage.com/*
]，
browser_action：
{
default_icon ：icon.png，
default_popup：popup.html
}，
content_scripts：
[
{
匹配：[< all_urls>]，
js：[jquery.js，popup.js]
}
]
}
任何想法或帮助都将不胜感激。根据这里的文档，我正在尝试做的事情可以通过扩展来实现，并且可以在有限的时尚。或者应该按照建议此处在扩展页面中执行此类操作？
预先致谢。
这是我的解决方案：
manifest.json：
< pre $ manifest_version：2，
name：我的名字，
description：我的描述。，
version：0.1，
background：
{
scripts：[jquery.js，background.js]，
持久：真
}，
权限：
[
标签，
存储
]，
browser_action：
{
default_icon：icon.png，
default_popup：popup.html
}，
content_scripts：
[
{
匹配：[https://www.myurl.com/*]，
js：[jquery.js，popup .js]，
run_at：document_end
}
]
}
background.js：
var learnerid = 0;
//当用户点击浏览器动作时调用。
chrome.tabs.onUpdated.addListener
（
函数（tabId，changeInfo，tab）
{
if（changeInfo.status =='complete'）
{
chrome.tabs.query
（
{
active：true
}，
function（tabs）
{
if（learnerid！= 0）
{
TrackURL（tabs）;
}
else
{
console.log（User not logged in;！）;
} // end if
}
）; //结束查询
}
}
）;
chrome.runtime.onMessage.addListener
（
函数（message，sender，sendResponse）
{
if（message.applicationcode ==appname ）
{
learnerid = message.learnerid;
} // end if
}
）; //结束函数
函数TrackURL（标签）
{
$ .ajax
（
{
类型：POST，
url：http：/ /www.myurl.com/action.php，
dataType：json，
data：
{
动作：'TrackURL'，
URL：标签[0] .url，
标题：tabs [0] .title，
LearnerID：learnerid
}，
成功：函数（msg）
{
console.log（URL跟踪）;
} //结束函数
}
）; //结束ajax
} //结束函数
popup.js：
document.addEventListener
（
starttrack，
函数（e）
{
startPoll （e.detail）;
}
）;
函数startPoll（e）
{
chrome.runtime.sendMessage
（
{
applicationcode：myapp ，
learnerid：e，
}
）;
从我的网页
： 函数SendLearnerID（值）
{
尝试
{
var event = new CustomEvent（starttrack， {'detail'：value}）;
document.dispatchEvent（event）;
}
catch（err）
{
console.log（err）;
}
} //结束函数
我的问题是在我的原始事件调用发生的地方，从网页......因此406错误。希望这可以帮助别人。
I am attempting to make an ajax call when the browser is on my webpage it works perfectly but as soon as I leave my domain, it fails. This is for a closed system that user knows they are being tracked so nothing shady going on. I am receiving an error 406 on everything outside of my domain. For example if I on my url of www.mywebpage.com the script executes perfectly, but as soon as I visit www.yourwebpage.com it returns the error.
I have tried setting the permissions in the manifest.json to my URL, all urls, specific urls but it behaves the same way. Here is my background.js
chrome.runtime.onMessage.addListener
(
function(message, sender, sendResponse)
{
if(message.applicationcode=="VALIDAPPLICATIONKEY")
{
var salt=message.salt;
var learnerid=message.learnerid;
var behaviorkey=message.behaviorkey;
var behaviorname=message.behaviorname;
var behaviorkeyname=message.behaviorkeyname;
chrome.tabs.query
(
{active: true},
function(arrayOfTabs)
{
var data = new FormData();
data.append('Salt', salt);
data.append('LearnerID', learnerid);
data.append('BehaviorKey', behaviorkey);
data.append('BehaviorName', behaviorname);
data.append('BehaviorKeyName', behaviorkeyname);
data.append('BehaviorValue', arrayOfTabs[0].url);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://www.mywebpage.com/myservice.php', true);
xhr.onreadystatechange = function()
{
if (xhr.readyState == 4)
{
// JSON.parse does not evaluate the attacker's scripts.
var resp = JSON.parse(xhr.responseText);
console.log(resp);
}
}
xhr.send(data);
}
);//end query
return true;
}
}
);//end listener
Here is my current manifest file.
{
"manifest_version": 2,
"name": "Application",
"description": "Plugin",
"version": "1.0",
"background":
{
"scripts": ["jquery.js","background.js"],
"persistent": true
},
"permissions": [
"tabs","http://www.mywebpage.com/*","https://www.mywebpage.com/*"
],
"browser_action":
{
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts":
[
{
"matches": ["<all_urls>"],
"js": ["jquery.js","popup.js"]
}
]
}
Any thoughts or help on this would be greatly appreciated. According to the documentation here what I am trying to do is allowed by extensions and does work in a limited fashion. Or should this type of action being taking place in the extension page as suggested here? I am new to writing Chrome extensions and I am sure I am missing something stupid.
Thanks in advance.
Here was the solution I had:
manifest.json:
{
"manifest_version": 2,
"name": "My Name",
"description": "My Description.",
"version": "0.1",
"background":
{
"scripts": ["jquery.js","background.js"],
"persistent": true
},
"permissions":
[
"tabs",
"storage"
],
"browser_action":
{
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts":
[
{
"matches": ["https://www.myurl.com/*"],
"js": ["jquery.js","popup.js"],
"run_at": "document_end"
}
]
}
background.js:
var learnerid=0;
// Called when the user clicks on the browser action.
chrome.tabs.onUpdated.addListener
(
function (tabId, changeInfo, tab)
{
if (changeInfo.status == 'complete')
{
chrome.tabs.query
(
{
active: true
},
function (tabs)
{
if(learnerid!=0)
{
TrackURL(tabs);
}
else
{
console.log("User not logged in yet!");
}//end if
}
);//end query
}
}
);
chrome.runtime.onMessage.addListener
(
function(message, sender, sendResponse)
{
if(message.applicationcode=="appname")
{
learnerid=message.learnerid;
}//end if
}
);//end function
function TrackURL(tabs)
{
$.ajax
(
{
type: "POST",
url: "http://www.myurl.com/action.php",
dataType:"json",
data:
{
Action: 'TrackURL',
URL:tabs[0].url,
Title:tabs[0].title,
LearnerID:learnerid
},
success: function(msg)
{
console.log("URL Tracked");
}//end function
}
);//End ajax
}//end function
popup.js:
document.addEventListener
(
"starttrack",
function(e)
{
startPoll(e.detail);
}
);
function startPoll(e)
{
chrome.runtime.sendMessage
(
{
applicationcode: "myapp",
learnerid: e,
}
);
}
From my webpage:
function SendLearnerID(value)
{
try
{
var event = new CustomEvent("starttrack",{'detail': value});
document.dispatchEvent(event);
}
catch(err)
{
console.log(err);
}
}//end function
My problem was where my original event call happened, from within the web page....hence the 406 error. Hope this helps someone else.
这篇关于如何在Chrome扩展中使用AJAX进行POST请求？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
