1437937 - WebExtensions Doesn't Find Source Maps

Status: UNCONFIRMED

(WebExtensions :: Developer Tools, defect, P3)

Description

[[e-mail]]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:58.0) Gecko/20100101 Firefox/58.0
Build ID: 20180208175058

Steps to reproduce:

Open about:debugging.
Click debugger link for current extension.
Look at the Deugger source when I've locked the popup open.


Actual results:

The console shows a network error stating that the source map can't be found. It's likely that I didn't configure something properly in the manifest, but there is no documentation on this topic.


Expected results:

The source map should load.

Comment 1

[Kris Maglione [:kmag]]

Can you attach an extension that shows this problem?

Comment 2

[[e-mail]]

Attachment: Extension showing issue.

Comment 3

[:shell escalante]

Luca checking for duplicate

Comment 4

[Luca Greco [:rpl] [:luca] [:lgreco]]

I checked for the existent issue and we don't have an exact duplicate of this one,
but we have Bug 1401241 related to the sourceMaps and the content scripts and the scripts injected using tabs.executeScript (which are basically the same thing, because scripts injected using tabs.executeScript are going to run in the content script context similarly to a content script registered in the manifest). 

In Bug 1401241 comment 4 I also provided some details about the source maps and a regular extension page, and I've also took more notes about the issues described in that comment and organized them into the following google doc: https://docs.google.com/document/d/1lnrhOs4IHW9W6vxCG_96f553GAaudsLIKwuVJ3Wd5pY

The reason for the missing source maps is that:

- the BrowserToolbox runs in a separate process and a separate profile from the target Firefox instance

- the BrowserToolbox is currently used by the addon debugging window to connect the developer tools to the extension
  (mainly because the extensions are running in the main process of Linux and OSX, and so to be able to pause the
  debugger on an extension that runs in the main process we have to run the DevTools toolbox in a separate process)

- the DevTools toolbox internals are fetching the source maps data from the client side (and so from the BrowserToolbox process) using a the fetch WebAPI

- the target extension is installed in the target Firefox instance and so the moz-extension url from which the Addon Debugging Window's toolbox should fetch the source maps is not available from a DevTools toolbox running in the separate BrowserToolbox process.

My proposal to make the toolbox able to load a source map from an extension url is to:

- expose a new RDP method from the debugging server, which can be used from a connected RDP client to fetch a source map from a moz-extension url available on the Firefox instance where the Remote Debugging Server is running on

- change the toolbox internals to fetch the source map with a moz-extension url by asking them to the debugging server
  over the RDP protocol when the toolbox target is remote (because if the target is local, the source maps can be directly
  fetched from the toolbox because the target is the one where the extension is actually installed)

This way we can fix at the same time the issue with the Addon Debugging Window running in the BrowserToolbox process, and also the similar issue when a toolbox is connected to an extension running on a remote target like Firefox for Android.

Comment 5

[Patrick Szalapski]

Any workarounds for this?  Can I somehow at least turn off or suppress the warnings that result? It is very annoying.

Comment 7

[Luca Greco [:rpl] [:luca] [:lgreco]]

(In reply to Patrick Szalapski from comment #5)
> Any workarounds for this?  Can I somehow at least turn off or suppress the
> warnings that result? It is very annoying.

There is a workaround, even if it is pretty annoying, it is described in more details in the following comment on github:
- https://github.com/webpack/webpack/issues/1194#issuecomment-402494524

In short, the workaround is to temporarily change the "sourceMappingURL=..." comment to include a reachable and working HTTP url, so that the debugger ui client can successfully fetch the source maps and apply them to the related extension sources.

Comment 8

[Patrick Szalapski]

Thanks. Is there a way to exclude certain files from even looking for a map?

(In reply to Luca Greco [:rpl] from comment #7)

Comment 9

[Maicas]

I just had a similar problem when trying to make a payment online and the 3-D Secure Payment Autorization pop-up didn't show up. My bank and VerifiedByVISA card service checked but found no problem on their side.
Finally, I discover that it was a stupid bug proper to Firefox and paid without problem using Explorer instead.

TypeError: NetworkError when attempting to fetch resource.
URL de la ressource : moz-extension://20f2ab83-c4f5-474f-9e9d-2d9a1fbe19e1/js/lib/purify.min.js
URL du lien source : purify.min.js.map [ https://bugzilla.mozilla.org/show_bug.cgi?id=1437937 ]

​

Comment 10

[[e-mail]]

Same problem here. Actually this is for my chat button. Works fine on IE and Chrome and worked fine on firefox until today. Now the chat button will not display in firefox.

Source map error: TypeError: NetworkError when attempting to fetch resource.
Resource URL: https://chatserver5.comm100.com/js/bundle.422e527d02426c4c2fedbd7b421d3d3f.js
Source Map URL: http://localhost:8000/bundle.422e527d02426c4c2fedbd7b421d3d3f.js.map

Comment 11

[Kris Maglione [:kmag]]

Fetching source maps has nothing to do with the problems you're seeing. Source maps only matter when using developer tools.

Comment 12

[Maicas]

OK, understood but, in this case,if the bug is new when using Firefox and only Firefox and its source map URL is linking here (https://bugzilla.mozilla.org/show_bug.cgi?id=1437937), where else other than here should it be stated in order that people in charge get informed and fix it ?

Comment 13

[Kris Maglione [:kmag]]

(In reply to Maicas from comment #12)

OK, understood but, in this case,if the bug is new when using Firefox and only Firefox and its source map URL is linking here (https://bugzilla.mozilla.org/show_bug.cgi?id=1437937), where else other than here should it be stated in order that people in charge get informed and fix it ?

You can file a separate bug for it here: https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox

Comment 14

[guillaume+mozilla]

Experiencing a similar error when browsing Twitter.com using Firefox 68.8.0esr (64-bit) and uBlock Origin 1.27.10.

Source map error: TypeError: NetworkError when attempting to fetch resource.
Resource URL: https://abs.twimg.com/responsive-web/web/loader.AppModules.0ce545b4.js
Source Map URL: https://ton.smf1.twitter.com/responsive-web-internal/sourcemaps/web/loader.AppModules.0ce545b4.js.map

Comment 15

[ALWIN]

The bug appear is when you try goes to a specific website that most commonly blocked and embedded by anonymous host and fake cloud that shown 502 bad gateway usually this bug appear at your script like css and js so for as far they concern about block the site you'll get 404 forbidden and forwardly to them manipulated display screen therefore most expected at firefox not the developer type because it let you blocked to see the site if developer they shown in frame to open in new window.

The fix:

1. go to file named css and js has shown in console for attempting 404 network error and edit the css file with notepad and scroll down to the end of css file written at notepad then delete the node sourceMappingURL=bootstrap.min.css.map / under the line
   /# save at note pad and close the console in windows refresh the html at your browser or open it in new window try fetch the console report again >>> "zap...> there is no more about fetch 404 error network.
2. for the file called js or script go download the origin file at the line of header of the file if you opened with notepad that written by http://example.com in tne name of js file instead after finish download replaced the bug js file with the origin file.

The bug: "THEY WATCH YOU CLICK AND HOVER MOUSE THEN TYPING ALSO WITH CAM IF INSTALLED AT YOUR COMPUTER ALL KIND OF IT IS WRITTEN AT CONSOLE AND THEIR CONSOLE TOO OR CAM"

Comment 16

[code]

Same error message when HTTPS-Only mode is enabled in Firefox 83.

Source map error: Error: NetworkError when attempting to fetch resource.
Resource URL: http://redmine41:3041/plugin_assets/redmine_apijs/stylesheets/apijs-redmine.min.css?1608396061
Source Map URL: styles.min.css.map

When disabled, no error and sourcemap works.

Comment 17

[flying sheep]

Yeah, that makes HTTPS-Only mode useless for web developers …

Comment 18

[Joseph C. Becker]

(In reply to [e-mail] from comment #0)

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:58.0) Gecko/20100101
Firefox/58.0
Build ID: 20180208175058

Steps to reproduce:

Open about:debugging.
Click debugger link for current extension.
Look at the Deugger source when I've locked the popup open.

Actual results:

The console shows a network error stating that the source map can't be
found. It's likely that I didn't configure something properly in the
manifest, but there is no documentation on this topic.

Expected results:

The source map should load.
Hi,its very beneficial with my new project https://www.atketo.com and now I am satisfied.

Comment 19

[johnmaclain789]

As same hapening with me. Although I have uninstalled and installed the browser twice. But still having issue in downloading an extension for https://thecourtdirect.com/amherst-town-court/ . Have you fixed this issue. Kindly also guide me so that I could fixed it. I tried different methods but nothing working for me.

Comment 20

[B.J. Herbison]

(In reply to johnmaclain789 from comment #19)

As same hapening with me. Although I have uninstalled and installed the browser twice. But still having issue in downloading an extension for https://thecourtdirect.com/amherst-town-court/ . Have you fixed this issue. Kindly also guide me so that I could fixed it. I tried different methods but nothing working for me.

This bug is about web developers, not user experiences. Also, I tried to install the Court Direct extension and had no problem. Installation won't work on Android as extensions are currently limited there. If you are using a desktop device please try to get help through https://support.mozilla.org/en-US/products/firefox or https://chat.mozilla.org/#/room/#fx-desktop-community:mozilla.org on the Matrix. (See https://wiki.mozilla.org/Matrix for more information on Matrix.)

Comment 21

[uiy12345]

(In reply to B.J. Herbison from comment #20)

(In reply to johnmaclain789 from comment #19)

As same hapening with me. Although I have uninstalled and installed the browser twice. But still having issue in downloading an extension for https://thecourtdirect.com/amherst-town-court/ . Have you fixed this issue. Kindly also guide me so that I could fixed it. I tried different methods but nothing working for me.

This bug is about web developers, not user experiences. Also, I tried to install the Court Direct extension and had no problem. Installation won't work on Android as extensions are currently limited there. If you are using a desktop device please try to get help through https://support.mozilla.org/en-US/products/firefox or https://chat.mozilla.org/#/room/#fx-desktop-community:mozilla.org on the Matrix. (See https://wiki.mozilla.org/Matrix for more information on Matrix.)

This is far more than an issue for web developers. It is also an issue for script creators.

Comment 22

[Christian Eichert]

I think that webextensions should not try to download map, scss or sass files that the creator has not explicitly linked in a public part of the site.
this is a very bad habit.