Can't connect to localhost from Chrome extension

Question

I am working on a Chrome extension that tracks time, and uses Google App Engine for the backend.

For testing, I'm trying to connect a local version of the extension to a local version of the App Engine app. When I try to send a POST request, I'm getting:

XMLHttpRequest cannot load http://localhost:8080/report. Origin chrome-extension://mbndmimplohfkkcincjodnfpaapbbmei is not allowed by Access-Control-Allow-Origin.

But it works when I change the URL so that it posts to the appspot.com URL.

What is the Access-Control-Allow-Origin, and why is it stopping me from getting results from localhost?

score 43 · Accepted Answer · answered Oct 06 '11 at 13:41

43

I believe this is because you cannot make calls to a server that is not included in the permissions section of your manifest. The permissions section of manifest.json should look something like this:

"permissions": [
    "http://myapp.appspot.com/*",
    "http://localhost/*"
]

Note, I haven't tested this, but it sounds like that is where your problem is coming from.

answered Oct 06 '11 at 13:41

smfoote

5,449
5
32
38

1

Small correction. You can make requests even if it's not in the permissions, but unless CORS is configured to allow this on the server it will fail. – Xan Feb 19 '15 at 09:58
I already configured the permission for localhost but it still not work. Anyone can help? – Nguyen Minh Binh Jul 16 '16 at 13:52
@DmitryMinkovsky did you have to configure or do anything with CORS? Is adding localhost to permissions enough? – Ish Thomas Aug 29 '19 at 21:13

Steve Brush · Answer 2 · 2016-07-06T18:19:34.513

7

You can use custom ports.

manifest.json

"permissions": ["http://localhost/*"]

background.js (using jQuery)

$.post('http://localhost:5000/some-endpoint');

edited Jul 06 '16 at 18:19

answered Jul 06 '16 at 18:03

Steve Brush

2,911
1
23
15

score 3 · Answer 3 · answered Oct 05 '11 at 23:56

3

you cannot add ports within permissions. You have to use port 80 for extensions within permission manifest. I usually run nginx and route all traffic from my extensions to port 80.

answered Oct 05 '11 at 23:56

Mohamed Mansour

39,445
10
116
90

This is my first extension, so I don't really know what I'm doing. How would I do that? – Jeremy Oct 06 '11 at 02:10
7

The accepted answer is correct. I added `"http://localhost/*"` to permissions and I can now do an Ajax GET to :8080. – raine Jun 02 '13 at 20:57

Jon · Answer 4 · 2016-02-08T22:01:48.323

I was able to get this code to work:

var loginPayload = {};
loginPayload.username = document.getElementById('username').value;
loginPayload.password = document.getElementById('password').value;
console.log(loginPayload);

var callback = function (response) {
    console.log(response);
};
var handle_error = function (obj, error_text_status){
    console.log(error_text_status + " " + obj);
};

$.ajax({
    url: 'https://127.0.0.1:8443/hello',
    type: 'POST',
    success: callback,
    data: JSON.stringify(loginPayload),
    contentType: 'application/json',
    error: handle_error
});

EDIT:
Apparently someone didn't like this, so a few things to keep in mind:

For extensions that have to work on https, make sure your server is serving https.
Contrary to posts above, chrome extensions CAN serve on ports other than port 80 / 443

score 1 · Answer 5 · answered May 04 '21 at 16:57

1

if you want a generic localhost approach

*://localhost:*/*

answered May 04 '21 at 16:57

Petros Kyriakou

5,214
4
43
82

Can't connect to localhost from Chrome extension

5 Answers5

Linked