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

时间:2014-05-09 09:22:23

标签: javascript php ajax google-chrome google-chrome-extension

我正在进行扩展,当用户提交按钮时,它会获取页面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://*/"
]
}

这是我的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+"
    });
});

现在,当用户点击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);
        }
    }
});

updatedata.php

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

现在alert(reply)返回整个Updatedata.php文件而不是发送欢迎消息。我也尝试单独执行代码(即不是从扩展名),它提醒我欢迎并在数据库中插入值。所以我认为Ajax请求或PHP文件没有任何问题。但我认为我遗漏了关于如何发送请求或某事的延伸

1 个答案:

答案 0 :(得分:1)

您无法在Chrome扩展程序中使用PHP。将它放在PHP服务器上并将请求发送到服务器。并修复PHP脚本中明显的SQL注入漏洞。

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

如果您需要一个成熟的数据库,请查看IndexedDB。鉴于您的知识水平,我建议使用chrome.storage API,因为它更易于使用,特别是对于新手程序员(没有违法行为)