请求第三方接口返回HTML,Chrome Extension中跨域请求访问外部网站数据步骤

跨域请求访问外部网站数据需要通过 Chrome Extension 中的 background script 来完成，具体步骤如下：

1. 在 manifest.json 文件中添加权限声明：

{
  "name": "My Extension",
  "version": "1.0",
  "manifest_version": 2,
  "permissions": [
    "https://www.example.com/*"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  }
}

上面的权限声明表示我们需要访问 https://www.example.com/ 这个网站的内容。

2. 在 background.js 中编写请求逻辑：

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === 'fetch') {
    fetch(request.url)
      .then(response => response.text())
      .then(html => sendResponse({ html }))
      .catch(error => console.error(error));
    return true;
  }
});

上面的代码监听了来自 content script 的消息，如果消息的 action 属性为 fetch，就发起一个跨域请求，并将结果返回给 content script。

3. 在 content script 中发送请求：

chrome.runtime.sendMessage({ action: 'fetch', url: 'https://www.example.com/' }, function(response) {
  console.log(response.html);
});

上面的代码向 background script 发送了一个消息，请求访问 https://www.example.com/ 这个网站的内容。当 background script 返回结果时，content script 就会收到结果并打印到控制台上。

需要注意的是，跨域请求需要在服务器端设置 CORS 头信息，否则请求会被浏览器拦截。在实际开发中，如果遇到跨域问题，可以尝试在 background script 中使用代理服务器来转发请求。