Javascript 无法通过来自chrome扩展的Ajax请求在数据库中存储值

我正在做一个扩展，当用户提交按钮时，它获取页面url并将其存储在数据库中

我被困在这一点上，我认为我在扩展部分遗漏了一些我无法识别的东西。 这只是一个学习项目，所以我没有包括任何验证

这里有一些细节

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://*/"
]
}

这是我的弹出窗口.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>

现在，当用户单击go按钮时，我调用了ajax请求

$("#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);
        }
    }
});

$（“#提交”）。单击（函数（）{
document.getElementById（“加载”）.innerHTML=“”；
var title=document.getElementById（“title”）.value；
var url=document.getElementById（“url”）.value；
var xhr=new XMLHttpRequest（）；
如果（！xhr）{
xhr=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
open（“post”，“updatedata.php”，true）；
setRequestHeader（“内容类型”，“应用程序/x-www-form-urlencoded”）；
xhr.send（“url=“+url+”&title=“+title”）；
xhr.onreadystatechange=函数（）{
如果（xhr.status==200&&xhr.readyState==4）{
reply=xhr.responseText；
警报（回复）；
}
}
});

updatedata.php

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

---

不能在Chrome扩展中使用PHP。将其放在PHP服务器上，并将请求发送到服务器。并修复PHP脚本中突出的SQL注入漏洞

您的PHP脚本似乎只用于在数据库中存储数据。除非您需要通过不同的视图访问此数据，否则我建议使用客户端存储API来持久化数据，例如使用

如果您需要一个完整的数据库，请查看。鉴于您的知识水平，我建议您使用
chrome.storage
API，因为它更易于使用，特别是对于新手程序员（无意冒犯）
您不能在chrome扩展中使用PHP。将其放在服务器上，并将请求发送到服务器。并修复PHP脚本中突出的SQL注入漏洞…感谢您的回复。你的意思是它不会在本地主机上运行。我必须把它放到网上的某个地方吗？只有在本地计算机上启动PHP服务器，它才会“在本地主机上运行”。将其“在线”也会起作用。但是，如果您只需要本地可访问的键值存储，请使用。一个完整的数据库也可以以的形式提供，但是考虑到你的知识水平，我甚至不会尝试使用它（无意冒犯）。好的，谢谢。这真的很有帮助。@ RobW，你会考虑从你的建议中编译答案，所以这个问题可以关闭吗？谢谢……这也只是为了学习的目的，所以我还没有包含漏洞检查。感谢您对chrome.storage.hello rob的建议，我已经将我的文件放在php服务器上了..但是
$\u GET['url']
和
$\u POST['title']
的值显示为空。。。空值被插入到数据库中..有什么想法吗？你上传数据的方法被破坏了。我建议使用jQuery.ajax，因为您已经在扩展中使用了jQuery，
 <?php
    echo "welcome";
    include('connection.php');
    $url = $_GET['url'];
    $title = $_GET['title'];
    mysql_query("insert into `data` VALUES('','$url','$title');" );
 ?>