首页 > 解决方案 > 无法让 Chrome 扩展程序通过 XML 请求运行其 PHP 文件

问题描述

我正在开发一个 Chrome 扩展程序,它只是从某个网页的标记中解析出一些数据,然后将该数据发送到一个 PHP 文件,该文件也是我的扩展程序的一部分。虽然我的 Javascript 没有任何错误,但在我看来 PHP 文件实际上并没有被执行,我什至不知道如何调试。

根据对许多教程和 SO 搜索的回顾,我的方法是让我的 Javascript 文件向 PHP 文件发送 XML 请求,该文件将与我的 MySQL 数据库(通过 freesqldatabase.com 托管)进行对话

我的解压加载文件结构是:

我的清单看起来像这样(为清楚起见,对一些值进行了编辑):

{
  "manifest_version": 3,
  "name": "my extension name",
  "version": "0.1",
  "content_scripts": [
    {
      "matches": [
        "*://*.thesiteImworkingon.com/games/play.phtml*"
      ],
      "js": ["jquery-3.6.0.min.js", "content.js"]
    }
  ],
  "web_accessible_resources": [
    {
        "resources": ["my_php_file.php"],
        "matches": ["<all_urls>"]
    }
  ]
}

content.js 看起来像这样(再次,为了清楚起见,修改了一些变量名):

// a bunch of querySelector statements to parse out my data of interest; save these as var1 etc.

var query = chrome.runtime.getURL("my_php_file.php") + "?par1=" + var1 + "&par2=" + var2 + "&par3=" + var3 + "&par4=" + var4;
console.log(query); // looks as expected

var xhr = new XMLHttpRequest();
xhr.onerror = function() {console.log('error');};
xhr.open("GET", query, true);
xhr.send();

my_php_file.php 看起来像这样(为了清楚起见,再次编辑/修改):

<?php

echo "I'm in the PHP file";


$var1 = $_GET['par1'];
$var2 = $_GET['par2'];
$var3 = $_GET['par3'];
$var4 = $_GET['par4'];

$con = mysqli_connect('[host name]',
                      '[user name]',
                      '[password]',
                      '[db name]',
                      db port);
if (!$con) {
  die('Could not connect: ' . mysqli_error($con));
}

$sql="INSERT INTO myTable (col1, col2, col3, col4) VALUES(".$var1 .",".$var2.",".$var3.",".$var4.")";

mysqli_stmt_execute($sql);
mysqli_stmt_close($sql);
mysqli_close($con);
?>

当我在浏览器中打开相关页面时,Javascript 文件的解析部分运行良好(控制台的日志确认了这一点),我什至得到了成功的结果(XML 请求的 readyState 为 4,状态为 200),但我echo没有似乎出现在任何地方,我的数据库表仍然是空的。我会尝试以某种方式调试 PHP,但似乎它实际上并没有被执行?

让我的 PHP 脚本成为我的扩展的一部分是不是可以?我是否需要将它托管在适当的服务器上(即使只是localhost)?

这是我第一次开发 Chrome 扩展程序(以及编码 Javascript 和 PHP,就此而言),我担心我犯了一些非常基本的错误,以至于尽管我进行了搜索,但我无法找到它的解决方案

标签: javascriptphpgoogle-chrome-extensionxmlhttprequestchrome-extension-manifest-v3

解决方案


推荐阅读