Download .ts webpack

[StealthDemonX]

Is it possible to download webpack folder from sources and .ts files, coz its saying no content?

[pzhlkj6612]

Hey. Is SourceMap enabled?

coz its saying no content?

Screenshots?

I'm not a frontend developer, though.

[StealthDemonX]

Yes, SourceMap is enabled. Visit any site with Webpack in the sources, and you will find the same.

[pzhlkj6612]

OK, it looks that the extension found those files but failed to download them? Did you see any errors? You can read this before you test it again:

• Debug extensions  |  Chrome Extensions  |  Chrome for Developers - https://developer.chrome.com/docs/extensions/get-started/tutorial/debug

[0xquad]

Same issue here. Version 2.0.6 in a non-incognito window. All files are downloaded (including .map files), but WebPack sources are empty after being downloaded (content is No Content: webpack://XXXX/yyyyy/src/Router.tsx, for instance). Not sure if it's at all possible, but if it cannot be done I think it would be nice to document it to manage user expectations. For me it was important that I could provide files as evidence of findings to a client.

[crossworth]

I spent some time debugging this problem, normally the flow is:

• Call chrome.devtools.inspectedWindow.getResources to get the resources.
• Call getContent to get the resource content.

But for virtual resources like webpack://, this don't seems to work, it returns undefined or empty, it also log the message Extension server error: Operation failed: Permission denied, the No Content comes from this line

ResourcesSaverExt/src/devtoolApp/utils/file.js

Line 70 in 2fa02b7

return new zip.TextReader(item.content || 'No Content: ' + item.url);

I tried to play with the manifest host_permissions to allow custom protocols or all, but I could not make it work.

If someone want to have a go with it, clone this repo, install the extension, open the extension on the dev tools and click to inspect it (the extension panel on dev tools, not the extension popup), this should bring another dev tools only for the extension, in my case I have to reload the extension after every change.

For debugging on the console, you can use the instructions below:

Get all the resources items with

chrome.devtools.inspectedWindow.getResources(console.log)

You can right click on the printed resource items and click on Store as global variable, that way you can access it using temp1, temp2, and so on.

[0xquad]

Thanks for putting some effort into debugging this. I was also thinking about how Chrome (or Firefox) is able to reconstruct/get the source codes from the webpack map files and how it is able to display it properly in the dev console, and if it would be possible for the extension to go the same route.

Also I find it very curious that right-clicking on a file allows to save that individual file, but that the browser does not offer the same function when right-clicking a folder to save all files -- it really looks to me like it would be a simple matter of iterating through that collection. But in any case, it is possible to get the contents of an individual files this way. Perhaps an extension doesn't have any access to that chrome-level functionality.

[crossworth]

Yeah, I think the problem is mostly related for the way the URI works, having webpack:// as the schema, since the extension is required to provided the hosts that it intend to work with, and when se try to add webpack we get errors.

Now, having a "Save all" on the UI would be so easy to work with.

I also investigated Firefox, but the APIs are more limited, and on the UI side Firefox allow only a single file download as well.

Other thing that I thought that would work is intercepting the map files requests using Chrome APIs, but they seem to be out-of-band.

What I have made that worked for me was using a web proxy (https://www.charlesproxy.com), opening the target site, opening the dev tools (so the browser is able to request the source maps), saving all the resources on the proxy and running this script to parse the source files and source maps and reconstruct them on another folder.

https://gist.github.com/crossworth/2b1c31ef76478138165832c2c51bc853

Not as easy as using the extension, but it works for me.

[StealthDemonX]

Yeah, not easy but this proxy + script method works.

[supriome]

I use charlesproxy to records all the request, but when I right click save all, it only save file with .com extendion file, I can't save any .js file, so that gist with node reconstruct-sources.js not work.

[YanzhongSu]

Yes, SourceMap is enabled. Visit any site with Webpack in the sources, and you will find the same.

Hi, did you manage to find a fix in the end or another tool for saving webpack?

[maxim5]

Same problem. I'm only interested in the webpack sources.

[Far4Ru]

One possible approach to intercept webpack-generated files is via Debugger.scriptParsed:

// Attach debugger and capture sources  
await chrome.debugger.attach({ tabId }, "1.3");  
await chrome.debugger.sendCommand(tabId, "Debugger.enable");  

chrome.debugger.onEvent.addListener((_, eventName, script) => {  
  if (eventName === "Debugger.scriptParsed") {  
    console.log("Captured:", script, script.url);  
  }
});

// Reload page without cache  
chrome.tabs.reload(tabId, { bypassCache: true });  

This requires adding the debugger permission to manifest.json:

"permissions": ["debugger"]

Working example: save-resources-extension

[moekhalil]

Sadly, I don't think this is working anymore.

It's not the extension either. I install this on MS Edge (it's Chromium based so same as Chrome) and lately realized it stopped downloading the source mapped files.

I Went ahead and installed Edge 135 from like April and it worked like a charm with the same extension version.

I installed Edge Beta 135 and used Group Policy to disable updates in the meantime, but yeah: I wonder what changed in Chromium and if there is any alternatives I'm all ears.

@Far4Ru -- does your extension work in the latest version or is it also broken?

btw: it seems some sites work and others don't. e.g. one that doesn't: fullstory.com/plans - source maps get loaded correctly and Sources tab show files, but ResourcesSaver does not see them.