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

Question

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

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

以下是一些详细信息；

ma​​nifest.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>

背景.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文件没有任何问题。但我认为我缺少一些关于如何发送请求或其他内容的扩展

Answer 1

您不能在 Chrome 扩展程序中使用 PHP。将其放在PHP服务器上并向服务器发送请求。并修复 PHP 脚本中明显的 SQL 注入(inject)漏洞。

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

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