如何获取Chrome App中Webview的源代码？现有代码无法正常运行

嘿，我明白你在开发Chrome App时遇到的麻烦了——直接拿webview元素的源码肯定行不通，因为webview是个独立的沙盒环境，和你的popup页面不在同一个上下文里。别担心，我给你一套可行的方案：

第一步：确保Manifest配置正确 #

首先你的manifest.json必须包含webview权限，以及你要访问的目标网站权限，不然会被浏览器拦截。示例配置如下：

{
  "name": "Webview源码查看器",
  "version": "1.0",
  "manifest_version": 2,
  "permissions": [
    "webview",
    "https://www.google.com/*" // 替换成你要访问的网站
  ],
  "browser_action": {
    "default_popup": "index.html"
  }
}

第二步：修改Popup.js的代码逻辑 #

你需要通过webview的executeScript方法，往webview加载的页面里注入一段脚本，让它自己获取页面的完整HTML源码，再通过回调返回给你的popup页面。完整的popup.js代码如下：

document.addEventListener('DOMContentLoaded', function() {
  const webview = document.getElementById('wa_webview');
  
  // 监听webview的加载完成事件，确保页面加载后再获取源码
  webview.addEventListener('loadstop', function() {
    // 注入脚本获取页面完整HTML
    webview.executeScript({
      code: 'document.documentElement.outerHTML;'
    }, function(results) {
      // results是一个数组，第一个元素就是返回的源码
      const sourceCode = results[0];
      document.getElementById('demo').textContent = sourceCode;
    });
  });
});

第三步：完善你的index.html #

确保你的HTML结构正确，webview元素能正常加载，同时用合适的标签保留源码格式：

<!doctype html>
<html>
<head>
</head>
<body>
  <webview id="wa_webview" src="https://www.google.com/" autosize="on"></webview>
  <br>
  <h2 id="heading">Source Code</h2>
  <pre id="demo"></pre> <!-- 用pre标签保留源码的换行和缩进格式 -->
  <script type="text/javascript" src="popup.js"></script>
</body>
</html>

关键说明： #

• 为什么不能直接获取webview的innerHTML？因为webview的内容运行在独立的进程和沙盒中，你的popup页面无法直接访问它的DOM树，必须通过Chrome提供的executeScript API来跨上下文通信。
• 用loadstop事件确保页面完全加载后再获取源码，避免拿到不完整的内容。
• 用<pre>标签显示源码可以保留原有的排版结构，比<p>标签更适合展示代码类内容。

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