CODEWITHSUNDEEP
javascriptphpjqueryajaxgoogle-chrome-extension
Ankit Bansal
Ankit Bansal

Reputation: 5

How do I interact with my database using a chrome extension with the help of PHP, and Jquery?

I want to cause changes to the database I have using a chrome extension. I have tried to use AJAX to link the PHP page with the query to the popup.html page but it is still not working. The page is working fine when used independently but not as a chrome extension. What is the mistake I am making?

This is the myScript.js file that I am using:

    $("document").ready(function(){

    $("#save").click(function(){
   alert("Clicked");
  var jxhr= $.ajax("save.php");
//doSomething();
jxhr.done(function(){alert("Complete");});

});


$("#shareu").click(function(){
//  alert("shared");

  $.ajax({
  url: "share_with_user.php"});


});



$("#shareg").click(function(){
//  alert("showing Groups");

  $.ajax({
  url: "edit_page.php"});


});



$("#show").click(function(){
//  alert("showing Links");

  $.ajax({
  url: "display.php"});


});

});

This is the php file I used to update to the database.

<?php


  if (empty($errors)) {

    // Perform Update


    $query="INSERT INTO LINKS (USER_ID, LINK) VALUES (";
    // $query.=$_SESSION['userID'];
    $query.="2 ,";
    $query.="'WWW.GOOGLE.COM' ";
    $query.=");";

    $result = mysqli_query($connection, $query);

    if ($result && mysqli_affected_rows($connection) == 1) {
      // Success
      echo "Awesome";
      $_SESSION["message"] = "Page updated.";

    } else {
      // Failure
      $_SESSION["message"] = "Page update failed.";
    }

  }

?>

<?php include("header.php"); ?>
<div>
  Display Page
</div>

<?php include("footer.php"); ?>

Please tell me if any other information is needed.

Thanks

Edit 1: Picker.html(Popup file)

       <html>
<head>

    <title>Pump!- Share your URLs</title>
    <link rel="stylesheet" type="text/css" href="mystyles.css">
</head>
<body>
<h1>URL Recognised!</h1>
<button id="save">Save to own Links</button></br>
<button id="shareu">Share with 1 user</button></br>
<button id="shareg">Share with Groups</button></br>
<button id="show">Show Links</button>
<div id="update"></div>



<script src="jquery.js" type="text/javascript"></script>
<!-- <script src="pumpapp.js" type="text/javascript"></script>
 --><script src="myScript.js" type="text/javascript"></script>







</body>
</html>

Manifest file: manifest.json

{

"manifest_version":2,
"name" : "Pump",
"description": "Just to add the page"
,
"version":"1.0",

"browser_action":{
    "default_icon":"icon.png",
    "default_popup":"picker.html"
},
"content_scripts": [
    {
      "matches": ["http://*/*"],
      "css": ["mystyles.css"],
      "js": ["jquery.js", "myScript.js"],
      "all_frames":true
    }
  ] 

}

Upvotes: 0

Views: 366

Answers (1)

abraham
abraham

Reputation: 47833

You are making ajax requests relative to the extension origin. You need to explicitly set the server's URL.

$.ajax({url: "share_with_user.ph"});

Should be something like:

$.ajax({url: "https://exapmle.com/share_with_user.php"});

Upvotes: 1

Related Questions