크롬 확장 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+" 
    }); 
}); 

입니다 사용자가 이동 버튼을 클릭 할 때 내가 지금 alert(reply) 날 전체 Updatedata.php 대신 환영 메시지를 보내는 파일을 반환

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

updatedata.php 아약스 요청

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

라고했다. 나 또한 코드를 별도로 (즉, 확장명이 아닌) 실행 해 보았습니다. 해당 경고를 환영하며 데이터베이스에 값을 삽입했습니다. 그래서 Ajax 요청이나 PHP 파일에는 아무 문제가 없다고 생각합니다. 하지만 요청이나 무언가를 보내는 방법에 대한 연장 사항이 누락되었다고 생각합니다.

Answer 1

Chrome 확장 프로그램에서는 PHP를 사용할 수 없습니다. PHP 서버에 넣고 서버에 요청을 보냅니다. 그리고 PHP 스크립트에서 눈부신 SQL 인젝션 취약점을 수정하십시오.

PHP 스크립트는 데이터베이스에 데이터를 저장하는 용도로만 사용되는 것 같습니다. 다른보기를 통해이 데이터에 액세스해야하는 경우가 아니라면 클라이언트 측 저장소 API를 사용하여 데이터를 보존하는 것이 좋습니다. chrome.storage.

본격적인 데이터베이스가 필요한 경우 IndexedDB을 살펴보십시오. 귀하의 지식 수준을 감안할 때, 특히 초보 프로그래머 (의도적 인 의도 없음)를 사용하는 것이 더 쉽기 때문에 chrome.storage API를 사용하는 것이 좋습니다