How can I solve this problem? : google chrome extension ajax

Question

I'm developing a chrome extension now. However, there is one problem during development.

Any advice would be appreciated.

First, I want to connect mysql(database) with my chrome extension. This is because I want to implement a function that takes the text of the chrome execute Script page and compares it with mysql(database) data.

Second, while searching for what is described above, I find that direct connect between mysql and chrome extension is not possible, and that I have to use a web app api (eg ajax or xmlhttprequest) in the middle.

Third, I decide to use ajax and the code below is what I wrote. But there's some problem/error somewhere, the chrome extension isn't working properly.

There are three things I'm curious about:

How can I correct my code written below?
I use file.php now, but can't I use js other than php when connecting to mysql? I mean, in script js, can I use file.js instead of file.php in ajax url?
Maybe there is an effective way to connect with mysql without using ajax? Thank you.

All files are inside the chrome extension folder(same folder).

<manifest.json>

{
  "name": "chrome extension name",
  "description": "Build a Sample Extension",
  "version": "1.0",
  "manifest_version": 2,

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },

  "dependencies": {
    "node-mysql": "^0.4.2",
    "mysql": "^2.18.1"
  },
  
  "permissions": [
    "activeTab",
    "tabs",
    "gcm",
    "background",
    "notifications",
    "http://localhost/",
    "<all_urls>"
  ],

  "host_permissions": [
    "https://*/*",
    "http://*/*"
  ],

  "background": {
    "scripts": ["background.js"],
    "persistent": false
  }
}

<popup.html>

The body tag has the code I wrote before, but I remove it and upload it because it's not needed for this question.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
        <script src="script.js"></script>
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
    <!--popup.html code is here-->
    </body>
</html>

<script.js>

I will upload only the ajax part first, excluding the code that receives the text of the page.
The reason I set the ajax url like that was because I found an answer like Ajax with chrome extension while searching on stack overflow.

$.ajax({
    type: "POST",
    url: "http://localhost.com/file.php",
    data: {data:"chrome extension test"},
    error:function() {
        alert("error");
    },
    success: function(data) {
        alert("success");
    }
});

<file.php>

<?php 
$result = $_POST['data']; 
echo $result;
?>

How can I solve this problem? : google chrome extension ajax

0 Answers0