Chrome Extension - Cross-Origin XMLHttpRequest - Returning HTML/JSON
- by Tyler
Hi everyone, I hope you can help me :)
I've created a Chrome extension (my first one) and I'm having some difficulty auto-populating a <select> with <option> that are being returned.
the default_popup page is index.htm. I have two <select> (listboxes? can't remember the name) boxes. When a user first clicks the extension, it performs a XMLHttpRequest to a php script and get's a list of names from a MySQL database. It returns (onLoad) the list in the form of:
<option>blah</option>
When a user selects an option from the first listbox/select, it performs another XMLHttpRequest and auto-populates the second listbox/select. Then when a user selects an option from the second listbox it will eventually populate a few details further down the page.
I've been testing by just running the index.htm file and seeing if just the code works correctly, which it does. However when trying to view it from the extension, it doesn't work. The onLoad doesn't fill in the first listbox, and selecting an option (one that I typed in the box for testing purposes) from the first listbox doesn't populate the second listbox.
I thought maybe it was a permissions error, so I tried adding the domain to the manifest.json file; but I appear to be getting an error in the manifest.json file after doing so.
In my default_popup (index.htm) file I have this script for my XMLHttpRequest:
<script type="text/javascript">
function getClient(str,type)
{
if (str=="")
{
document.getElementById(type).innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(type).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","http://(domain removed)/Extension/getInfo.php?q="+type+"&c="+str,true,"user","pass");
xmlhttp.send();
}
</script>
This is what my manifest.json file looks like:
{
"name": "Client Center Lite",
"version": "1.0",
"description": "blah",
"browser_action": {
"default_icon": "images/icon_19.png",
"default_popup": "index.htm",
"default_title": "Client Center Lite"
},
"icons":{
"128":"images/icon_128.png"
}
"permissions": {
"http://(domain removed)/"
},
}
Am I doing this correctly? The point of the extension is to be able to quickly view client details. The extension will only be given to employees locally in a .crx file, and not distributed online. The domain I am accessing through the PHP/MySQL is accessible from the web, but I'm currently using localhost in my mysql_connect string. Do I need to be returning the <option> elements encoded as JSON? If so, I'm completely cluesless as how to do that.
