新手JS开发者求助：Chrome扩展中跨页面GET请求获取HTML并解析

你要完成的需求，核心就是在Chrome扩展里做这几件事：发起请求获取Page B的HTML、解析出需要的数据、把数据传递到Page A展示。下面是具体的实现方法和注意点：

1. 配置扩展权限 #

首先得在manifest.json里添加权限，确保扩展能访问目标站点的页面：

"host_permissions": ["https://目标站点域名/*"],

如果用Manifest V3版本，还要配置后台服务工作线程和内容脚本（负责在Page A里渲染数据）：

"background": {
  "service_worker": "background.js"
},
"content_scripts": [
  {
    "matches": ["https://目标站点域名/pageA的URL"], // 匹配你要注入脚本的Page A地址
    "js": ["content-script.js"]
  }
]

2. 发起GET请求获取Page B的HTML #

推荐把请求逻辑放在后台脚本里，避免阻塞Page A的页面运行：

// background.js
async function getPageBHtml() {
  try {
    const res = await fetch('https://目标站点域名/pageB的完整URL');
    if (!res.ok) throw new Error('请求失败');
    return await res.text(); // 获取页面的HTML文本
  } catch (err) {
    console.error('拉取Page B数据出错:', err);
    return null;
  }
}

3. 解析HTML提取数据 #

拿到HTML文本后，用DOMParser把它转成DOM对象，就可以像操作普通网页一样提取数据了：

// background.js 中添加解析函数
function parseDataFromHtml(html) {
  if (!html) return null;
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');
  
  // 替换成你实际要提取的元素选择器，比如找class为"search-result"的内容
  const resultEls = doc.querySelectorAll('.search-result');
  // 把元素内容转成数组返回
  return Array.from(resultEls).map(el => el.textContent.trim());
}

4. 把数据传到Page A展示 #

用Chrome扩展的消息传递机制，让注入在Page A里的内容脚本向后台要数据，拿到后渲染到页面上：

4.1 在内容脚本里发请求并渲染 #

// content-script.js
// 向后台发送消息，请求Page B的数据
chrome.runtime.sendMessage({ action: 'fetchPageBData' }, (response) => {
  if (!response?.data) return;
  
  // 把数据渲染到Page A，这里写你自己的渲染逻辑，比如创建一个悬浮框
  const dataContainer = document.createElement('div');
  dataContainer.style.cssText = `
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    z-index: 9999;
  `;
  dataContainer.innerHTML = `
    <h4>Page B搜索结果</h4>
    <ul>${response.data.map(item => `<li>${item}</li>`).join('')}</ul>
  `;
  document.body.appendChild(dataContainer);
});

4.2 在后台脚本里接收消息并返回数据 #

// background.js
// 监听内容脚本的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'fetchPageBData') {
    // 先拉取HTML，再解析数据，最后返回给内容脚本
    getPageBHtml().then(html => {
      const data = parseDataFromHtml(html);
      sendResponse({ data });
    });
    return true; // 告诉Chrome这是异步响应，不要立刻关闭通信通道
  }
});

关键知识点说明 #

• fetch()：JS原生用来发起HTTP请求的API，和你在Postman里发GET请求逻辑一致
• DOMParser：专门用来把HTML文本转换成DOM对象的工具，这样你就能用querySelector这类方法提取数据
• Chrome扩展消息传递：因为后台和内容脚本运行在不同上下文，需要用这个机制传递数据
• Manifest配置：必须正确配置权限和脚本注入规则，否则扩展会没有权限执行请求或修改页面

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