如何通过script.js修改Chrome扩展popup.html并展示AJAX返回的JSON数据？

我来帮你搞定这两个问题——Chrome扩展的popup本质就是个小型HTML页面，你完全可以像操作普通网页那样用JS修改它的DOM，核心是要在AJAX的success回调里处理返回的数据，再把数据插入到popup的指定元素中。

第一步：先完善popup.html的结构 #

首先得在popup里准备好用来承载数据的DOM容器，这样后续才有地方放AJAX返回的内容：

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
  <title>我的扩展</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
  <style>
    /* 给popup加些基础样式，避免太简陋 */
    body { width: 350px; padding: 15px; margin: 0; }
    #data-display { margin-top: 15px; padding: 10px; border: 1px solid #eee; border-radius: 4px; }
  </style>
</head>
<body>
  <h3>当前页面数据</h3>
  <!-- 这个容器专门用来展示AJAX返回的内容 -->
  <div id="data-display"></div>
</body>
</html>

第二步：修正并优化你的script.js代码 #

你的原代码里有个小语法错误：console.log("2")写在了AJAX的配置对象里，这会导致代码报错，得移到合适位置。另外，我们要在success回调里把返回的JSON数据渲染到刚才的容器中：

// script.js
$(document).ready(function() {
  const currentUrl = location.href;
  console.log("1: 获取到当前页面URL:", currentUrl);
  sendRequest(currentUrl);
});

function sendRequest(pageUrl) {
  const requestData = { js_link: pageUrl };
  console.log("2: 准备发送AJAX请求");
  
  $.ajax({
    url: '你的目标请求URL', // 替换成你实际的接口地址
    data: JSON.stringify(requestData),
    type: 'POST',
    contentType: 'application/json', // 必须加这个，否则后端可能解析不了JSON格式的请求体
    success: function(response) {
      console.log("3: 请求成功，返回数据:", response);
      // 调用方法把数据展示到popup里
      renderData(response);
    },
    error: function(xhr, status, error) {
      // 别忘了处理请求失败的情况
      $('#data-display').html(`<p style="color:red;">请求失败：${error}</p>`);
      console.error("请求出错详情:", error);
    }
  });
}

function renderData(data) {
  const displayContainer = $('#data-display');
  // 方式1：直接把JSON转为格式化的字符串展示（适合调试或查看原始数据）
  displayContainer.html(`<pre>${JSON.stringify(data, null, 2)}</pre>`);
  
  // 方式2：如果是结构化数据，可以自定义渲染成更友好的格式（比如列表）
  // 假设返回的data是数组：[{key: "xxx", value: "yyy"}, ...]
  // let content = '<ul>';
  // data.forEach(item => {
  //   content += `<li><strong>${item.key}</strong>: ${item.value}</li>`;
  // });
  // content += '</ul>';
  // displayContainer.html(content);
}

关键注意事项 #

• 权限配置：如果你的请求目标是外部网站，必须在manifest.json里添加对应权限，不然浏览器会拦截请求：

  {
    "manifest_version": 3,
    "name": "我的扩展",
    "version": "1.0",
    "action": {
      "default_popup": "popup.html"
    },
    "host_permissions": [
      "https://你的目标域名/*" // 替换成实际的接口域名
    ]
  }
  

  （如果用的是Manifest V2，把host_permissions换成permissions数组即可）
• 异步操作注意：AJAX是异步请求，一定要在success回调里操作DOM，提前操作的话数据还没返回，容器会是空的。
• jQuery依赖：确保你在popup.html里正确引入了jQuery，否则$会报错。如果不想用jQuery，也可以用原生JS的fetch或XMLHttpRequest，逻辑是完全一样的。

这样修改后，点击扩展图标打开popup时，它会自动获取当前页面URL、发送AJAX请求，然后把返回的数据展示在popup里啦！

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