Chrome Extension Not Sending Request [duplicate] - javascript

I've written a Chrome Extension for my library. It makes an AJAX call to api.library.edu (school's library).
My extension uses jQuery and my code looks like this:
$.get("http://api.library.edu/?period=1month", function (data) {
// process data
});
When I load my Extension, it makes the AJAX call and I get data back.
Right now I give absolutely no permissions to my extension (permissions is []).
Is my extension going to work when I publish it? Shouldn't it require special permissions to make AJAX calls with jQuery?
Thanks! I'm just making sure I wrote my extension correctly.

Your extension does not need any additional permissions to make AJAX calls from within the same origin. However, if api.library.edu does not set the proper CORS headers, you may need to request cross-origin permission for that domain:
{
"name": "My extension",
...
"permissions": [
"http://api.library.edu/"
],
...
}
From Google's Docs:
Each running extension exists within its own separate security origin. Without requesting additional privileges, the extension can use XMLHttpRequest to get resources within its installation.
...
By adding hosts or host match patterns (or both) to the permissions section of the manifest file, the extension can request access to remote servers outside of its origin.
If your extension is already working though, that would lead me to believe that the library API already has cross-domain headers set, and that you will not need any additional permissions.

Related

External file fail to load on 'load' function

I want to load content of external text file (demo.txt) in my div on button click.
Text file containes text 'Demo text.'
But it shows error
XMLHttpRequest cannot load file:///C:/Users/Tom/Desktop/jQuery%20thenewboston/76.)%20Load%20function/demo.txt. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
on my browser console.
$(document).ready(function(){
$('#button_file').on('click',function(){
$('#load_html').load('demo.txt');
});
});
<button type="button" id="button_file">Load file</button>
<br />
<div id="load_html" >
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I am a beginner in jquery , please comment below for any query.
You cannot get the result because the remote site doesn't have CORS enabled: If you look at the console, you'll see:
(Reason: CORS header 'Access-Control-Allow-Origin' missing).
You can bypass CORS by using something like anyorigin.com, i.e.:
$.getJSON('http://anyorigin.com/get/?url=http%3A//thenewboston....&callback=?', function(data){
$('#div-data').html(data.contents);
});
PS: If it's a local file, make sure you load it on the same address as the script, (localhost, 127.0.0.1, 192.168.1.1, etc...)
You are being restricted by HTTP access control (CORS). The file you are requesting asynchronously needs to be from the same domain or the domain you are accessing it from needs to allow your domain to access it. As you are using the file:/// protocol you need to allow it, so check out this if that's the way you wish to go.
Alternatively you can create a local web server to host your site an allow access to the file on the same domain.
In order to make this work you need to use a web server instead of using just clicking on the html file.
Check XAMPP
Unfortunately, Google Chrome doesn't allow cross-origin request although Firefox does.
Alternatively, if the text file is short you can store it in an object and place it wherever you like.
text_file = {
contents = 'content';
}
$('.button_class').on('click',function(){
$('.div').html(text_file.contents);
});
I would never suggest you use this but if it's a small project, a one page application that nobody will see the code to - desperate times call for desperate measures.
The best thing to do is to use XAMPP and PHP.
Load in from your database the content you would like to show.
You can read the PHP documentation or watch online tutorials , I personally suggest TheNewBoston PHP Tutorials with Alex Garrett

Externally load Json with jquery.getJSON

I don't know if this is a duplicate post or not, sorry if it is. I'm using jquery.getJSON to load a json on my server which works just fine. Although, if I try and load a json file on a different server it doesn't work. I know I don't have any code here (because there's not much point) but I just want to know if I'm using it wrong or if it isn't supposed to load external files. I'm using the iOS Safari browser if that effects anything.
EDIT: I've looked at the console (idk what the error thing really means, it's just red with an x by the url it's trying to get the json from) and it looks like it's not actually receiving the data. Plus, do remember I'm on iOS, not desktop so I couldn't look at the console in the "Develop tab :P
EDIT 2: Great! I think I got it working! http://skitty.xyz/getJSON/
You're most likely encountering a path issue; the purpose of $.getJSON is to acquire data via http GET request so yes, it is intended to work remotely. To diagnose your issue, make certain you can access the json file in your browser first: http://domain.com/my_data.json. If that works, use that as the URL you pass into $.getJSON:
$.getJSON( 'http://domain.com/my_data.json', function(data) {
// do something with your data
});
http://api.jquery.com/jquery.getjson/
jquery.getJSON uses ajax which is all about external resources. Here's a couple things to check for if it's not working on an external resource:
1: Is the path you specified correct? The usage is jquery.getJSON(path, callback). The path should be something you can just drop in your browser and see. If an incorrect path is your problem, you'll see a 404 in the console.
2: Is the resource http and your site https? Non-secure resources on secure pages will get blocked by browser security features. You'd see a error to this effect in the console.
3: Is CORS (Cross-origin resource sharing) enabled for your site on the external resource? Servers will sometimes use a whitelist of IPs and domains to determine what origins are allowed to make requests of it. You'd also see an error to this effect in the console.
There probably some other things to look for but this is where I'd start.
Also, by all means, use the debugging features of Safari to LQQK at the actual HTTP data-streams that are passing back-and-forth in response to what you're doing. (You might need to click on a preference to see the "Develop" menu, which will take you to "Show Web Inspector" and its Network tab.)
This approach will instantly answer many questions that a JavaScript-centered approach will not so-readily tell you. (And of course, you can look at the JavaScript console too ... and at the same time.) "The actual data streams, please." Safari will tell you "exactly what bytes" your app actually sent to the server, and "exactly what bytes" the server sent in return. "Priceless!™"
Are you saying you are using jquery ajax request to load some json data from a server?
check the "not working server" has the same end point as your server.
Check if the url you want to get data from is correct.
check if console logged any errors.
Also quote from http://api.jquery.com/jquery.getjson/
"Additional Notes:
Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.
Script and JSONP requests are not subject to the same origin policy restrictions."

How to perform cross domain requests locally in JavaScript/Chrome?

I am developing a test page, which will used only by myself and only with Google Chrome. Is there any way to perform cross domain requests to 3rd party server (which doesn't allow such requests) with such conditions? The requests could be GET or OPTIONS.
(I am aware about Chrome extensions like Advanced REST client, which could perform such requests, but it doesn't help me since complex calculations should be performed prior to request execution)
One option is to disable the same-origin policy entirely, as detailed in Disable same origin policy in Chrome. This will probably do the trick for you, but it's a bit inelegant, as it turns off the same-origin policy for the entire browser instance.
A second option is to create a small Chrome extension that holds all of the files that you need to load. It will make your files accessible via chrome-extension://... and only files within that extension will be immune from the same-origin policy.
Create a new folder, put your testing Web page in it, and create a manifest.json file in the same folder:
/testing_extension
test_page_immune_from_same_origin.html
script_used_by_test_page.js
styles_for_test_page.css
manifest.json
The contents of manifest.json should be
{
"name": "All-origin access extension",
"manifest_version": 2,
"version": "1.0",
"permissions": ["<all_urls>"]
}
Load the extension by going to chrome://extensions, enabling Developer Mode, and selecting the new folder with Load unpacked extension... option.
You can view your page as an extension resource chrome-extension://[app_id]/[file_name], where "app_id" is the hash listed for the extension on the chrome://extensions page. (It will be a long string of lowercase letters.) Now when the page performs cross-origin resources, it does so with the authority of a browser extension, unrestricted by the same-origin policy.
Note that you will need to move any inline scripts into separate files in order to comply with extension CSP requirements.
One way is to serve your files off a webserver rather than the local file system. Another way is to start Chrome with a flag:
chrome --disable-web-security
(From Cross-origin image load denied on a local image with THREE.js on Chrome)
A more extensive list of flags is here: http://peter.sh/experiments/chromium-command-line-switches/
I'm working on a project similar to this and I had to upload a simple html file to one of my prod servers for testing so I could test the cross domain functionality.
The html file pointed to localhost, so it would only work for me while in development.
The jquery code looked like this (just in case it helps):
$.ajax({
type: "POST",
dataType: "json",
cache: false,
url: url,
data: data,
crossDomain: true,
success: function (data) {
ATSJBAjax = null;
if (callback != null) callback(data);
}
});
Also I'm using c#/MVC, and I had to add an attribute to all controller methods that added "Access-Control-Allow-Origin" to the response header so Chrome would be OK with it. I called the attribute "AllowCrossDomainAccess", which ref'd the class below:
public class AllowCrossDomainAccessAttribute : ActionFilterAttribute
{
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*");
base.OnActionExecuting(filterContext);
}
}

$.getJSON not working

I'm trying to create a very simple chrome extension for my school. I am fairly certain the underlying issue is that chrome doesn't allow XHR requests by default, but at the same time, was expecing the #results div (here is the code) to populate. I've read about certain things like jSONP, but then again, I'm not quite sure what's causing this. I'd appreciate any help! Thank you!
For chrome extensions to break cross-origin policies, you need to add the domain to your manifest file via the permissions entry:
"permissions": [
"tabs",
"bookmarks",
"http://slu.edu/",
"http://*.google.com/",
"unlimitedStorage"
],
Source: http://code.google.com/chrome/extensions/manifest.html#permissions
You are correct in thinking this was a cross-site issue. If you look at the Chrome console, you should see something like:
XMLHttpRequest cannot load
http://slu.edu/peoplefinder/json/json_index.php?q=.
Origin http://jsbin.com is not allowed
by Access-Control-Allow-Origin.
If you're running this on a server with scripting capabilities (eg: PHP), you can create a script on your own server which will fetch the remote data instead of doing it in the browser.

What permissions (if any) I need to give my Chrome Extension to let it make remote AJAX calls?

I've written a Chrome Extension for my library. It makes an AJAX call to api.library.edu (school's library).
My extension uses jQuery and my code looks like this:
$.get("http://api.library.edu/?period=1month", function (data) {
// process data
});
When I load my Extension, it makes the AJAX call and I get data back.
Right now I give absolutely no permissions to my extension (permissions is []).
Is my extension going to work when I publish it? Shouldn't it require special permissions to make AJAX calls with jQuery?
Thanks! I'm just making sure I wrote my extension correctly.
Your extension does not need any additional permissions to make AJAX calls from within the same origin. However, if api.library.edu does not set the proper CORS headers, you may need to request cross-origin permission for that domain:
{
"name": "My extension",
...
"permissions": [
"http://api.library.edu/"
],
...
}
From Google's Docs:
Each running extension exists within its own separate security origin. Without requesting additional privileges, the extension can use XMLHttpRequest to get resources within its installation.
...
By adding hosts or host match patterns (or both) to the permissions section of the manifest file, the extension can request access to remote servers outside of its origin.
If your extension is already working though, that would lead me to believe that the library API already has cross-domain headers set, and that you will not need any additional permissions.

Categories