Unable to store values in database through an Ajax request from chrome extension

Question

I am making an extension which takes the page url and store it in the database when the user submits the button.

I am stuck at this and i think that i am missing something in the extension part which I am unable to identify. Its just a learning project so i haven't included any validations.

Here are a few details;

manifest.json

{
"manifest_version": 2,
"name": "Hello Extention",
"description": "POST details of the current page.",
"version": "0.1",
"content_scripts": [{
  "js": ["contentscript.js"],

}],
"web_accessible_resources": ["script.js"],
"background": {
    "scripts": ["background.js"],
    "persistent": true
},
"browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
},
"permissions": [

    "contextMenus",
    "bookmarks",
    "tabs", 
    "http://*/", 
    "https://*/"
]
}

This is my popup.html

  <input type="text" name="url" id="url" value=""><br>
  <input type="text" name="title" id="title"></br>
  <input type="button" name="submit" value="Go" id="submit"><br>

background.js

chrome.tabs.getSelected(null, function (tab) {
    var tabId = tab.id;
    var tabUrl = tab.url;
    var tabTitle = tab.title;

    document.getElementById("url").value = tabUrl;
    document.getElementById("title").value = tabTitle;

    chrome.browserAction.setBadgeText({
        text: "10+"
    });
});

Now when user clicks on the go button i have called the ajax request

$("#submit").click(function () {
    document.getElementById("load").innerHTML = "<img style='height:30px;' src='/img/loading-  sprocket-gray-light-transparent.gif' />";
    var title = document.getElementById("title").value;
    var url = document.getElementById("url").value;
    var xhr = new XMLHttpRequest();
    if (!xhr) {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.open("post", "updatedata.php", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("url=" + url + "&title=" + title);
    xhr.onreadystatechange = function () {
        if (xhr.status == 200 && xhr.readyState == 4) {
            reply = xhr.responseText;
            alert(reply);
        }
    }
});

updatedata.php

 <?php
    echo "welcome";
    include('connection.php');
    $url = $_GET['url'];
    $title = $_GET['title'];
    mysql_query("insert into `data` VALUES('','$url','$title');" );
 ?>

Now the alert(reply) returns me the entire Updatedata.php file instead of sending the welcome message. I also tried executing the code separately (i.e. not from the extension) there its alerting me welcome and also inserting the values in the database. So I think there is nothing wrong with the Ajax request or the PHP file. but I think i am missing something with the extention on how to send request or something

Answer 1

You cannot use PHP in a Chrome extension. Put it on a PHP server and send the request to the server. And fix the glaring SQL injection vulnerability in your PHP script.

Your PHP script seems to only be used for storing data in a database. Unless you need to access this data through a different view, I suggest to use the client-side storage APIs to persist data, e.g. with chrome.storage.

If you need a full-fledged database, take a look at the IndexedDB. Given your level of knowledge, I suggest to use the chrome.storage API because it is easier to use, especially for novice programmers (no offence intended)