源代码Map是否适用于Chrome扩展?

wqsoz72f  于 2023-03-10  发布在  Go
关注(0)|答案(5)|浏览(156)

我正在使用Closure编译器创建一个Chrome扩展,我想让源代码Map可以用于调试。我可以让源代码Map正常工作,方法是将浏览器直接指向源代码树中的一个页面,并在编译后的javascript文件末尾添加特殊的sourceMappingURL(所有内容都在一个目录中):

debugger;document.getElementById("hello").innerHTML="Hello, world!";
//@ sourceMappingURL=background-compiled.map

但是当我访问同一个脚本作为扩展时,我只能看到编译后的javascript,而不能看到原始源代码。我确实配置了Chrome调试器,在这两种情况下都启用了源代码Map,否则它们都会完全相同地执行,没有任何错误。源代码Map在扩展中不起作用吗?还是我在设置时遗漏了什么?
我试过Chrome 25稳定版和Chrome 27金丝雀版,两者的行为相同。

6pp0gazn

6pp0gazn1#

我遇到了同样的问题,在切换到内联源Map后,一切都工作正常。
原因是,chrome扩展只支持内联源mpas
因此,当您使用Webpack时,只需添加

devtool: "inline-source-map"

有一系列可能的选项,请参阅webpack文档here中的表格。

bq8i3lrv

bq8i3lrv2#

我知道我迟到了,但是Chrome确实允许源Map。你可能遇到的问题是,它默认拒绝加载Map。这个问题可以通过将Map添加到manifest.json文件的web_accessible_resources中来解决。

ruoxqz4g

ruoxqz4g3#

providing answers to questions resolved in comments的精神下,Chrome先前不支持在扩展中使用源Map,但这在Chrome 29中得到了纠正。
感谢评论者,@w00kie谁提交和跟踪的bug on Chromium-如果你想收到你的有益努力的声誉,只是张贴自己的答案,我会删除这一个。

vuktfyat

vuktfyat4#

Chrome支持一个扩展源Map,无需将其内联或添加到manifest.json文件中。
Map文件分配在“开发人员工具”下“源”选项卡中的“内容脚本”选项卡下。
有一个所有启用的扩展的源代码,加上webpack://文件(如果源Map是用Webpack创建的)。
也可以使用Cmd + P查找Map文件。

jdg4fx2g

jdg4fx2g5#

与之前的文章相反,我发现为了让源Map能够为内容脚本工作,实际上必须在manifest.json中将它们列入白名单,如下所示:

"web_accessible_resources": [
    {
        "resources": [
            "*.map"
        ],
        "matches": [
            ...
        ]
    }
]

相关问题