如何在Manifest V3版Chrome扩展中实现更优雅的网页抓取？

方案一：隐身后台窗口+动态内容脚本 #

• 创建尺寸极小的隐身模式窗口，放置在屏幕外，避免干扰用户浏览：

  chrome.windows.create({
    incognito: true,
    type: 'popup',
    width: 1,
    height: 1,
    left: -1000,
    top: -1000
  }, (win) => {
    // 在窗口内打开目标URL的标签页
    chrome.tabs.create({windowId: win.id, url: targetUrl}, (tab) => {
      // 动态注册针对该URL的内容脚本
      chrome.scripting.registerContentScripts([{
        id: `scrape-${tab.id}`,
        matches: [targetUrl],
        js: [{file: 'scrape.js'}],
        runAt: 'document_idle'
      }], () => {
        // 脚本执行后接收内容，完成后关闭窗口并注销脚本
        chrome.runtime.onMessage.addListener((msg) => {
          if (msg.tabId === tab.id) {
            // 处理抓取到的内容
            console.log(msg.content);
            chrome.windows.remove(win.id);
            chrome.scripting.unregisterContentScripts({ids: [`scrape-${tab.id}`]});
          }
        });
      });
    });
  });
  

• 优势：完全支持JS渲染页面，不污染用户常规浏览会话，动态注册脚本无需提前声明大量URL权限，用户感知极低。

方案二：Chrome Debugger API #

• 借助chrome.debugger API绕过同源限制，直接获取渲染后的页面内容：
  1. 在manifest中声明"debugger"权限。
  2. 新建空白标签页导航到目标URL，连接调试会话：

     chrome.tabs.create({url: targetUrl, active: false}, (tab) => {
       chrome.debugger.attach({tabId: tab.id}, '1.3', () => {
         // 获取完整DOM结构
         chrome.debugger.sendCommand({tabId: tab.id}, 'DOM.getDocument', {depth: -1}, (result) => {
           // 处理DOM内容
           console.log(result.root);
           chrome.debugger.detach({tabId: tab.id});
           chrome.tabs.remove(tab.id);
         });
       });
     });
     

• 优势：无需注入内容脚本，不受同源策略限制，能直接获取JS渲染后的完整DOM；缺点是需要用户授权调试权限，实现稍复杂。

方案三：优化iframe跨域通信 #

• 若坚持使用iframe，通过修改响应头解决跨域问题：
  1. 用declarativeNetRequest移除目标页面的X-Frame-Options，并修改CSP允许脚本执行和postMessage。
  2. 在iframe的sandbox属性中添加allow-scripts allow-same-origin。
  3. 向iframe注入脚本，让脚本主动将内容通过postMessage发送到扩展页面：

     // 扩展页面中的代码
     const iframe = document.createElement('iframe');
     iframe.src = targetUrl;
     iframe.sandbox = 'allow-scripts allow-same-origin';
     document.body.appendChild(iframe);
     window.addEventListener('message', (e) => {
       if (e.origin === new URL(targetUrl).origin) {
         // 处理抓取到的内容
         console.log(e.data);
         document.body.removeChild(iframe);
       }
     });
     

• 注意：部分网站的CSP可能严格限制，此方案兼容性有限。

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