無法通過Chrome擴展程序的Ajax請求將值存儲在數據庫中

Question

我正在做一個擴展，當用戶提交按鈕時，它接受頁面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+"
    });
});

現在，當用戶單擊“執行”按鈕時，我已經調用了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注入漏洞。

您的PHP腳本似乎僅用於在數據庫中存儲數據。 除非您需要通過其他視圖訪問此數據，否則建議使用客戶端存儲API持久化數據，例如使用chrome.storage 。

如果您需要完整的數據庫，請查看IndexedDB 。 鑒於您的知識水平，我建議使用chrome.storage API，因為它易於使用，尤其是對於新手程序員（不打算冒犯）