I am trying to understand how source maps work. I created a simple web server with one page using nodejs. Installed jQuery which comes with a minified version and source maps. I then put a script tag on my web page including the minified version of jQuery. I can now browse through the unminified code in chrome developer tools thanks to source maps. But how?
I analyze the stuff sent from the server and the source maps are not transferred. They are not shown in the network tab of chrome developer tools and they are not included in the downloaded content of the minified jquery file. The only thing is //# sourceMappingURL=jquery.min.map at the end of the minified jQuery file. How can the browser access them?
I am partly wondering because in my work I am creating an application and it would be nice to have the ability to trace errors with source maps in production. But now it seems that if I want to allow that, it also means that anyone visiting the site can get the unminified code. Is that correct or can I control how source maps are transferred to the client from the server?
Edit:
Thanks for the answers. I also did a bit more research myself logging each request the server received. If debugger tools are used, the source maps are requests at the url specified in the end of the minified file. The fact that chrome hides this makes stuff very confusing. If I block the source map from being transferred, source mapping will not work but chrome will also cache the source map. I.e. if I allow the source map, view it, then block it and view again source mapping may still work.
Source maps are indeed transferred, but in current versions of Chrome they are not shown in the Network tab. According to this answer, source maps used to be visible on the Network tab, but at some point they decided to change it so that the requests are no longer visible.
As for keeping your source maps private, one of the solutions mentioned in this answer is to create an .htaccess file that restricts source map access to clients from your local network. Another way to do it would be to set up authentication, so you have to log in to the site to be able to view the source maps or else you get a 403.
In that case the browser is requesting the jquery.min.map file relative to the src URL of the <script> element (the "source origin"). (And the source map likely embeds all of the sources in sourcesContent.) I'm not sure why it doesn't show up in the network tab (I've never checked before). In other cases the source map can be entirely embedded in the script. You could conceivably put the source files behind a URL that isn't publicly accessible, but is to you, and set the sourceRoot property of the source map accordingly. In that case you'd want to make sure your source map doesn't include sourcesContent
Related
Manifest v3 hardened down on what is doable with code execution and remotely hosted code: https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#code-execution
Following scenario: I want to create an extension that allows the user to add additional functionality into the extension by explicitly specifying javascript files on disk and giving permission to those files (for example through HTML5 FileSystem API, file picker, file:// urls, or maybe just a config file). They are not distributed with the main extension.
These files may also contain some UI code written in a UI library like React or Vue, which should get rendered into the main application window somehow. The main window would also pass information about the extension context into those components.
I understand that there is the sandbox that can be used to execute code - https://developer.chrome.com/docs/extensions/mv3/manifest/sandbox/
I know how to do these things in normal applications but is what I want to do somehow feasible with v3 and the new restrictions on code execution and external code loading or am I hitting a brick wall here?
HTML :
<html> <script scr="http://someurl.com/jscript.js"></script></html>
I'm trying to extract source code of jscript.js in chrome extension.
But there is no attribute of DOM Object holding source of js.
Is there a way to extract the source code of JavaScript which is loaded on page?
(By using DOM object or some internal object, except re-downloading the script)
Because.. Some web-server returns different source code depends on the request-packet (Usually.. BAD servers do that). So If I tried to download it with different request, I can't get the same one that was loaded on the browser.
According to Is external JavaScript source available to scripting context inside HTML page?, it's not normally possible without redownloading since it's not exposed to the DOM.
An extension, however, can hook into information available to the browser.
The simplest would be to create a DevTools extension. It would only work when the DevTools are open on the page, but then you can easily access the source with chrome.devtools.inspectedWindow.getResources().
Somewhat harder, but one can use chrome.debugger API to achieve the same while DevTools are closed. It's a low-level API, but it allows doing everything DevTools can do. I don't have a ready example, but Debugger Protocol docs will help.
Neither is possible from a content script.
You can also go directly to the extension on your file system:
Where to find extensions installed folder for Google Chrome on Mac?
for example on my mac book computer:
pwd
output: ~/Library/Application\ Support/Google/Chrome/Default/Extensions/hkbhjllliedcceblibllaodamehmbfgm/1.7.1_0
I attempted to get my current location and display in google-maps.
for this:
I activated the Javascript API(in google.developers site).
got the key to access the api.
copied the code in the link below to a html file( inserting my key when "calling" the api, of course).
https://developers.google.com/maps/documentation/javascript/examples/map-geolocation
When I ran the html file in the browser, I received an alert giving the error InvalidKeyOrUnauthorizedURL, but it seems that I did everything right, and actually it seems I really did, because when I ran the exact code in the W3Schools tutorials ("Try it your self") the result showed me my location.
So after this context, I would like to know why I can't run this code directly on the browser, I mean, It's kind of OK using the w3schools but it's not the properly way and it's questioning why it's invalid.
observations:
note that the file is not being hosted, it is my own computer.
I tried to run in Opera and Chrome browser- and they both failed.
I ran codes of google maps api successfully directly on the browser but they didn't need any key.
Thanks
It's because you are not hosting it on the local server.
Your browser won't allow location request to go through even if you allow all sites to track your location.
Set up a server on the localhost interface and then try running it. It should work just fine.
PS. Your browser will tell you when any location requests are blocked. In Chrome there will be a small icon on the right hand side of the URL bar after a request for location has been made.
Is Local file mapping dev tools alternative to Charles proxy in firefox? I am trying to map a remote server resource to a local file, but it doesn't seem to be working. The console statements and changes in the JS file doesn't seem to be applied when I reload the page.
I can see the local folder and file listed in the sources folder. Also, see that the sources doesn't show the original JS file. But I see this message in the sources tab for the local file.
Workspace mapping mismatch
Rest of the warning states that the file in local folder is different from the remote loaded file. Why is that a problem, wouldn't that be always the case, since you want to edit the file locally?
What am I missing? Any pointers to fixing this? Is my assumption wrong that this feature in chrome dev tools can allow loading a resource locally, as if it was loaded from the original location?
I tested this again with a simple html page with a single js file having a simple console log statement - "loading remote file ...". This file is mapped to a local js with a different log statement "loading local file.." However, I still see the log message from the remote file.
Added snapshot from dev tools sources tab for more context. Sources tab shows the local folder and file correctly, but shows the mapping warning. Also notice that sources doesn't have the remote.js file anymore.
Is my assumption wrong that this feature in chrome dev tools can allow loading a resource locally, as if it was loaded from the original location?
I don't think this is accurate. When you map a file on a server to your local workingspace, Chrome acts as a sort of editor for your local files. You can edit the files through Chrome and Command+S to save your local files. But nothing has changed on the server. It doesn't update the files on the server, and it doesn't tell Chrome to "Use my local files instead of what's on the server".
What many people do is automate the deployment process so that when a local file is updated (either through Chrome + Workspace Mapping or just simply by editing in your editor), your working copy gets deployed. That way, next time you reload the browser, you'll see your edits.
Edit: From the workspace documentation:
And you can map resources served from a local web server to files on disk, so when you change and save those files, you can view them as if they were being served.
I think the key here is local web server. I did a bit more digging and found this dev tools docs issues, with a comment effectively saying that what you're trying to do isn't supported:
The DevTools currently does not do resource substitution. It can simply map the remote files to your local copy so if things are kept in sync (like using a local server on-system) then when refreshing your modifications can persist.
Looks like you'll need a way to deploy after making changes or have your devtools workspace point to the server docroot.
The Charles Proxy "map local" feature was requested of the Chromium team in this issue and the team declined to pursue it.
This is an example that shows what's my problem.
I'm writing a chrome extension that should replace google's logo in google main page (google.com). So I create a content-script that uses this javascript+jQuery code to do it (Please forgo google doodles!):
$("#hplogo").attr("src","the_address");
This content-script matches with https://*.google.com/ which contains google's main page.
Okay. If I put in the_address an image address which is uploaded on the internet, the extension works properly and gives me ideal result.
But since I don't want my extension to make loading time long for slow connections, I'm going to set the image's src to a file from hard disk.
So I put the image file to extension's folder then I tried the file name (eg : image1.gif) as the_address, but this time, the chrome doesn't load the image.
What have I to do? Thanks, gúys.
For obvious reasons the image won't load, I assume it is still using the webpage's domain. You may need to use chrome.extension.getURL, which allows you to link resources from an extension directory.