如何直接在 Chrome 中编辑 chrome 扩展内容脚本源文件

Question

我知道我们可以直接在chrome中编辑源代码，

我们可以在chrome中编辑扩展background.js，

就像：https://www.sitepoint.com/edit-source-files-in-chrome/

但是如何在 chrome devtools 中编辑内容脚本？

我已经设置了source->filesystem，但似乎不起作用。

Answer 1

TL;DR： 您需要 WorkSpace、动态导入 和 //# sourceURL=file:///

0. 将扩展文件夹添加到WorkSpace

1. 在 清单

   {“匹配”： [“https://example.com/*”]， “all_frames”：正确， "run_at": "文档开始", “js”：[ “装载机.js” ] },

2. 在 loader.js

   等待导入（chrome.runtime.getURL（“contentScript.js”））；

3. 在 contentScript.js 结尾

   //# sourceURL=file:///C:/path/To/Extension/ExtName/contentScript.js

之后，当您进入源面板>>内容脚本>>file://path/contentScript.js（或直接从控制台）时，文件系统>>script.js将被打开并保存更改。

但是效果不好。当 DevTools 打开时（在所有页面上），网络面板中始终会禁用缓存。