Ajax call blocked on HTTPS - Chrome Extension

Question

I'm writing an extension, which should notify a user when a specific game has received an update. The data is received form a MySQL database.

I made an ajax call to receive the json data, provided by a PHP script on my localhost server (for test purposes).

Well, it works fine on HTTP websites. But the script gets blocked by HTTPS websites.

The message is "This page is trying to load scripts from unauthenticated sources", which leads to this troubleshooting page from Google: Link

Any suggestions?

The Manifest:

{
"manifest_version": 2,
"name": "Extension",
"version": "1.0",
"icons": {
    "128": "icon128.png",
    "48": "icon48.png",
    "16": "icon16.png"
},
"page_action": {
    "default_icon": "icon16.png",
    "default_popup": "popup.html"
},
"background":{
    "scripts" : ["eventPage.js"],
    "persistent": false
},
"content_scripts": [
    {
        "matches": ["<all_urls>"],
        "js": ["content.js", "jquery-3.2.0.min.js"],
        "css": ["content.css"],
        "run_at": "document_start",
        "match_about_blank": true   
    }
],
"permissions": [
    "notifications", "http://localhost/*", "tabs"
]}

eventPage.js

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {

chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
    chrome.tabs.sendMessage(tabs[0].id, {todo: "displayNews"});
});
});

content.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
if (request.todo == "displayNews"){
    $.ajax({
        url: 'http://localhost/database/connect.php',
        type:'POST',
        dataType: 'json',
        success: function(output_string){
                alert(output_string[1].url);
            },
                error: function (xhr, ajaxOptions, thrownError){
                alert(xhr.statusText);
                alert(thrownError);
                }
    });
 //Some other code is executed here
}});

[You may find this site helpful](https://developer.chrome.com/extensions/xhr) — Matthew Ciaramitaro, Apr 12 '17 at 23:16
An HTTPS site isn't allowed to make AJAX calls to an HTTP API. You need to implement an HTTPS server on your localhost. — Barmar, Apr 12 '17 at 23:38

score 0 · Accepted Answer · edited May 23 '17 at 12:32

0

According to Barmar's comment, I had to configure localhost as HTTPS - this was the problem.

Here's an answer how to archieve this with XAMPP: How do I use https (SSL) in XAMPP while using virtual hosts

If the Apache server doesn't start, you have to uncomment this line in the httpd.conf file: LoadModule ssl_module modules/mod_ssl.so

edited May 23 '17 at 12:32

Community

1
1

answered Apr 13 '17 at 12:17

user3430746

33
1
6

Ajax call blocked on HTTPS - Chrome Extension

1 Answers1