从 Chrome 扩展插入 MySQL答案

【问题标题】：Insert into MySQL from Chrome Extension从 Chrome 扩展插入 MySQL
【发布时间】：2013-12-01 15:27:51
【问题描述】：

我喜欢单击我的 chrome 扩展程序，它会获取当前的标签 URL 并将其插入 MySQL 数据库。看来我必须使用 xhr，但是我对它的工作原理不太了解。我也有点明白Chrome Extension → Web App API → MySQL 的想法。

到目前为止，我有一个有效的 chrome 扩展程序，它可以获取当前的标签 url 并显示它，以及一个连接到我的数据库的 php 文件。但是，我可以使用一些帮助将 url 变量转到 Web API，然后转到我的 php 文件。

最后，我是个新手，如果有人质疑这个问题，我很抱歉。

编辑

这是我的代码和更多详细信息...

currentUrl.js

//grab the current url

   chrome.tabs.getSelected(null, function(tab) {
       var tabId = tab.id;
       tabUrl = tab.url;

       document.write(tabUrl);
   });

popup.html

<!doctype html>
<html>
  <head>
    <script src="currentUrl.js"></script>
    <script language="javascript" type="text/javascript">

  </head>
</html>

插入db.php

<?php
$con=mysqli_connect("localhost","root","my_pw","my_db");
// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

mysqli_query($con,"INSERT INTO urlHistory (Urls)
VALUES ('Url'");

mysqli_close($con);
?>

manifest.json

{
  "manifest_version": 2,

  "name": "Current Url",
  "description": "Grab tab's current url",
  "version": "1.0",

  "browser_action": {
    "default_icon": "url_icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "tabs"
    // dont't I have to put something here?
  ]
}

【问题讨论】：

您所指的“Web API”实际上是您的 PHP 文件。 PHP 文件是否“知道”如何在数据库中存储 URL 列表？如果是，您唯一需要做的就是从您的扩展程序向您的 PHP 文件（即服务器上指向 PHP 文件的 URL）进行 AJAX 调用，并将 URL 列表作为 POST 数据传递。详细说明您的代码（扩展、PHP）可以做什么，以便我们填补空白。
你有登录机制吗？您打算如何阻止其他人访问您的数据库？
我将此代码用作学习经验，只是想了解 Ajax。
您尝试过我下面提出的解决方案吗？它对你有用吗？

标签： mysql google-chrome-extension xmlhttprequest

【解决方案1】：

您可以使用 XHR 将 URL 发送到您的服务器，insertdb.php 将在那里侦听 URL 并将其存储在数据库中。

有关相关概念的更多信息：

示例代码：
_{（下面的代码仅用于演示，它没有考虑基本概念，例如输入验证、用户授权/身份验证、错误处理等（所有这些对于生产就绪的解决方案都是必不可少的）。）}

在 insertdb.php 中：

<?php
if (isSet($_POST['url'])) {
    $con = mysqli_connect('localhost', 'root', 'my_pw', 'my_db');
    ...
    $stmt = mysqli_prepare($con, 'INSERT INTO urlHistory (Urls) VALUES (?)');
    mysqli_stmt_bind_param($stmt, 's', $_POST['url']);
    mysqli_stmt_execute($stmt);
    mysqli_stmt_close($stmt);
    mysqli_close($con);
}
?>

在 background.js 中：

function sendCurrentUrl(url) {
  var req = new XMLHttpRequest();
  req.addEventListener('readystatechange', function (evt) {
    if (req.readyState === 4) {
      if (req.status === 200) {
        alert('Saved !');
      } else {
        alert("ERROR: status " + req.status);
      }
    }
  });
  req.open('POST', 'https://your_domain/your/path/insertdb.php', true);
  req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  req.send('url=' + encodeURIComponent(url));
}

chrome.browserAction.onClicked.addListener(function (tab) {
   sendCurrentUrl(tab.url);
});

在 manifest.json 中：

{
  "manifest_version": 2,
  "name": "Test Extension",
  "version": "0.0",

  "background": {
    "persistent": false,
    "scripts": ["background.js"]
  },

  "permissions": [
    "activeTab", 
    "https://your_domain/*"
  ]
}

【讨论】：

您在控制台日志中看到了什么？有什么错误吗？您在 Debugger 的 Nerwork 选项卡中看到了哪些 XHR 请求？您是否将这些网址替换为您的确切网址？
抱歉，我是一名新程序员，对控制台日志没有经验。我会调查他们并尝试按照你的建议去做。 -- 至于 url，我使用了在我的 Apache 服务器上本地运行的特定 url，所以它是 localhost/urls/insertdb.php