如何在浏览器中以编程方式获取运行中JS文件的完整源码？

1. 通过<script src="...">引入的脚本，能否不发起额外请求读取完整内容？ #

没办法直接做到。浏览器加载外部脚本时，只会执行代码逻辑，不会把脚本的原始文本暴露给页面内的JavaScript——这是出于安全和性能的设计，避免不必要的内存开销。你没法通过页面自身的JS直接拿到该脚本的完整源码（包括底部的sourceMapURL或debugId），必须发起额外的HTTP请求去拉取这个脚本文件才能获取内容。

2. 不局限于<script>标签的其他实现方式 #

如果能调整脚本的引入或构建流程，有几种更高效的方案：

• 内联脚本：把脚本内容直接写在<script>标签里（不用src属性），之后可以通过document.querySelector('script').textContent直接读取完整源码，从中提取需要的sourceMapURL或debugId。
• 服务端注入元信息：在页面渲染阶段，先从打包后的脚本里提取出sourceMapURL和debugId，直接注入成页面的全局变量，比如window.__SOURCE_MAP_META__ = { url: 'app.js.map', debugId: 'abc123' }，页面JS直接读取这个变量就行，不用处理完整源码。
• 构建时单独输出元信息：在打包流程里，把sourceMapURL和debugId单独生成一个小型JSON文件，或者直接内联到HTML的某个隐藏元素中，页面JS直接读取这个元信息，完全不用碰脚本源码。

3. Chrome扩展能否解决这个问题？ #

当然可以。Chrome扩展拥有比普通页面JS更高的权限，能通过两种核心方式获取外部脚本内容：

• 利用chrome.devtools.inspectedWindow.getResources() API，获取当前页面加载的所有资源详情，其中就包含外部脚本的完整文本，直接从中提取sourceMapURL或debugId。
• 通过webRequest API拦截脚本的加载请求，直接获取响应内容；或者在扩展的内容脚本里用fetch请求脚本URL（扩展内容脚本不受普通页面的CORS限制），拿到完整源码后再处理。

4. 备选方案：window.fooSourceCode='...'传递源码的优缺点 #

这方案能解决问题，但缺点很突出：

• 会大幅增加页面的初始加载体积，尤其是大型项目的打包脚本，直接拖慢页面加载速度。
• 源码直接暴露在全局变量中，存在安全风险，比如敏感逻辑被恶意爬取或篡改。
• 维护成本高，每次打包后都要自动或手动把源码注入到这个变量里，容易出现同步错误。

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