如何实现从Chrome阅读模式侧边栏复制HTML内容？

Chrome阅读模式侧边栏的文本提取效果在Google Search和ACS网站上表现优于readability.js、dom-distiller和trafilatura，我希望将提取后的内容导入GPT-4，但目前无法从该面板直接复制HTML，寻求可行解决方案。

已尝试方案 #

• 测试过主流Chrome阅读器扩展、浏览器内置阅读器及开源方案，均无法达到同等提取能力，也无法解析Google Search结果
• 基于dom-distiller而非read-anything的旧版Chrome（如Chrome 104）可复制阅读模式内容，通过chrome-distiller://<UUID>_<HASH>/?url=<URL>能重现，但效果与稳定性欠佳

潜在思路 #

• 阅读模式侧边栏具备可访问性树（如macOS的Accessibility Inspector），理论上可通过编程获取解析，但缺乏UI自动化经验
• Chromium源码中的ReadAnythingUntrustedPageHandler::OnCopy函数当前调用main_observer_->web_contents()->Copy()复制主页面HTML而非提取后的内容，修改为调用web_ui_->GetWebContents()或许可行，但对C++及大型软件工程经验不足
• 涉及chrome-untrusted://read-anything-side-panel.top-chrome和<read-anything-app />元素，或许可通过特殊方式访问

可行解决方法（按难度从低到高） #

方法1：通过DevTools直接读取侧边栏DOM

Chrome阅读模式侧边栏是独立的WebContents，可通过DevTools直接访问：

1. 打开Chrome DevTools（F12）
2. 点击DevTools左上角"选择元素"按钮旁的下拉箭头，选择read-anything-side-panel目标（或在More tools中打开Remote devices，找到侧边栏进程）
3. 选中后，在DevTools中定位<read-anything-app />元素的Shadow DOM，找到提取内容的容器节点（如#article）
4. 右键该节点，选择Copy -> Copy outerHTML即可获取提取后的HTML

方法2：用Chrome扩展注入脚本实现一键复制

通过扩展向chrome-untrusted://协议的侧边栏页面注入脚本，添加自定义复制功能：

1. 创建扩展的manifest.json：

{
  "name": "阅读模式HTML复制工具",
  "version": "1.0",
  "permissions": ["sidePanel"],
  "content_scripts": [
    {
      "matches": ["chrome-untrusted://read-anything-side-panel.top-chrome/*"],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ],
  "manifest_version": 3
}

2. 编写content.js脚本：

document.addEventListener('DOMContentLoaded', () => {
  const app = document.querySelector('read-anything-app');
  if (!app) return;
  const articleContent = app.shadowRoot.querySelector('#article');
  // 添加悬浮复制按钮
  const copyBtn = document.createElement('button');
  copyBtn.textContent = '复制HTML';
  copyBtn.style.cssText = 'position:fixed;top:10px;right:10px;z-index:9999;padding:8px 12px;cursor:pointer;';
  copyBtn.onclick = async () => {
    await navigator.clipboard.write([
      new ClipboardItem({
        'text/html': new Blob([articleContent.outerHTML], {type: 'text/html'})
      })
    ]);
    alert('提取后的HTML已复制到剪贴板');
  };
  document.body.appendChild(copyBtn);
});

3. 将扩展加载到Chrome，打开阅读模式侧边栏后即可使用自定义按钮复制HTML

方法3：修改Chromium源码编译自定义版本

如果需要原生支持复制功能，可修改Chromium源码：

1. 找到chrome/browser/ui/webui/side_panel/read_anything/read_anything_untrusted_page_handler.cc文件
2. 将main_observer_->web_contents()->Copy()替换为web_ui_->GetWebContents()->Copy()
3. 按照Chromium官方文档编译自定义Chrome版本，原生复制功能即可提取侧边栏内容

难度评估 #

• 方法1：低难度，无需编程经验，适合临时需求
• 方法2：中等难度，需基础Chrome扩展开发知识，适合长期使用
• 方法3：高难度，需熟悉C++和Chromium编译流程，适合深度定制

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