Chrome扩展中PHP脚本无法运行问题求助

需求背景 #

我正在开发一款基础Chrome扩展，核心需求是把本地XAMPP服务器（因80端口被占用，部署在8080端口）上的HTML页面内容，回显到扩展的弹窗界面中。

现有代码文件 #

manifest.json #

{ 
  "manifest_version": 2, 
  "name": "Demo", 
  "description": "Demo description", 
  "browser_action": { 
    "default_title":"Hello", 
    "default_popup":"pop.html" 
  }, 
  "version": "1", 
  "permissions": [ "http://localhost/*" ] 
}

pop.html #

<!DOCTYPE html> 
<html lang="en">
<!-- 目前HTML内容尚未完成，接下来可以通过添加容器和脚本实现内容回显逻辑 -->
</html>

实现内容回显的关键步骤 #

要完成页面内容回显，你需要在pop.html中补充JavaScript逻辑，用来请求本地8080端口的页面内容并插入到弹窗中：

1. 先在pop.html里添加一个容器，专门用来展示回显的内容：

<div id="content-display"></div>

2. 加入JavaScript代码（可以内联写在script标签里，也可以引入外部JS文件），借助fetch API获取页面内容：

document.addEventListener('DOMContentLoaded', () => {
  const displayContainer = document.getElementById('content-display');
  
  // 请求本地8080端口的目标页面
  fetch('http://localhost:8080')
    .then(response => {
      if (!response.ok) throw new Error('服务器响应异常');
      return response.text();
    })
    .then(pageHtml => {
      displayContainer.innerHTML = pageHtml;
    })
    .catch(error => {
      displayContainer.textContent = `页面加载失败: ${error.message}`;
      console.error('加载出错:', error);
    });
});

注意事项 #

• 你的manifest.json已经正确配置了http://localhost/*权限，这能保证扩展可以向本地服务器发起请求，不会触发跨域限制
• 要确保XAMPP服务器正在8080端口正常运行，且服务器根目录下有可访问的HTML页面
• 由于使用的是manifest_version 2，注意Chrome版本兼容性（Chrome 88及以上部分特性可能受限，如果需要适配新版本，建议升级到manifest_version 3）

内容的提问来源于stack exchange，提问作者Kavan