I'm developing a webextension for Chrome. The code is written in typescript and then bundled with parcel.
The generated output looks correct to me, but chrome is unable to load the sourcemaps for a contentscript written in typescript. To let you reproduce the issue, I have set up this minimal sample:
https://github.com/lhk/chrome_ts_sourcemaps
git clone https://github.com/lhk/chrome_ts_sourcemaps
cd chrome_ts_sourcemaps
npm install
parcel build src/manifest.json
This creates a dist/ folder which can be loaded as an extension into chrome.
As you can see, the generated code contains sourcemaps:
console.log("I'm the contentscript");
},{}]},{},["rrAT"], null)
//# sourceMappingURL=/index.map
My example contains two scripts: A contentscript and a script included in the popup.html of a browseraction. They both print something to the console, which makes it easy to find them in chrome:
The console.log from the popup is already recognized as popup.ts:1. Chrome knows that this was a typescript file.
But the contentscript is not mapped to its original source. How can I make chrome use the sourcemap ?
The problem are the sourcemap paths. The leading / is incorrect for files within folders. These files need either their full path, including the parent folder, or just their name, without a slash.
For someone also using parcel, the correct behaviour can be switched on with an additional option:
--public-url ./
The related issue is:
https://github.com/parcel-bundler/parcel/issues/2209
Related
I tried so but I have a 'require is not defined' error. I can't find information about that, can someone enlighten the noob in me please?
It's possible, but you have to be careful. Trying to require() a package means that node will try to locate its files in your file system. A chrome extension only has access to the files you declare in the manifest, not your filesystem.
To get around this, use a module bundler like Webpack, which will generate a single javascript file containing all code for all packages included through require(). You will have to generate a separate module for each component of your chrome extension (e.g. one for the background page, one for content scripts, one for the popup) and declare each generated module in your manifest.
To avoid trying to setup your build system to make using require() possible, I suggest starting with a boilerplate project. You can check out my extension to see how I do it.
An updated answer for 2022
Short answer: yes, you can require/import packages. Rather than going through the tedious work of setting up & configuring a bundler like Webpack on your own (especially if you have no experience with them), there are now build tools you can use to create the boilerplate "scaffolding" for a Chrome extension:
Extension CLI -- this one is well-documented and you can also reference the source code of some Chrome extensions that have used this tool (READ: learn how others have set up their code).
Chrome Extension CLI
Benefits of using them:
New projects are initiated with a default project file structure. Super helpful.
They support modern Javascript (ES6, ES2021), so modules work fine.
They already have bundlers integrated and pre-configured (Webpack in both above cases I think). You therefore don't need to install and configure any on your own.
You can use npm as normal to install any packages/dependencies you need.
Then of course, let the official documentation for Chrome Extensions guide you through the rest.
It's not possible to require node modules directly within a chrome extension. However, it is possible to bundle node applications and packages into the browser for use with your extensions. See here for more: Is it possible to develop Google Chrome extensions using node.js?
Yes, It is possible with esm npm packages.
require is commonjs module loader.
Browser doesn't support commonjs modules system
so that this error showed.
Method 1:
Run npm init -y and add "type" :"module" in your package.json.
create path.js file
add this line in path.js
const fullPath = await import.meta.resolve("npm-pkg-name");
const path = fullPath?.match(/(/node_modules.*)/)[0];
console.log(path);
add this line inside package.json
"path": "node --experimental-import-meta-resolve path.js",
Copy console output text. Replace package name with this copied path.
Method 2:
Install other npm package to find and replace
npm packages' virtual path to real path so that chrome browser will find it.
Install Path-fixxer
Add this line in path.js
import setAllPkgPath from "path-fixxer";
setAllPkgPath();
then run command : npm run path.
Now open browser to test it.
I'm getting this error on browsers console, and js file are not loaded:
VM305:5551 crbug/1173575, non-JS module files deprecated.
But if I use a private windows, there is no error and the webpage works.
I deleted the launch.json file, it worked for me
I had this problem twice in React.js. Both while using libraries for pdf to image preview. One was Mozilla's PDF.js library. The npm package is known as 'pdfjs-dist'. When I removed this package, the error was gone and the server ran perfectly normal.
These libraries might be using old cr.js or module technologies.
Personnaly, I suddenly encountered this problem today while I never encountered it before. Deleting the launch.json didn't fixed the problem. I opened that file and saw that the url tag was followed by "http://localhost:8080" instead of my HTML file's path. So I replaced "http://localhost:8080" with the path of my HTML file, then it was working again.
if you don't want to delete anything then just type in the terminal of your project :
npm i
to reinstall/ recheck dependencies.
how do I debug on webpack with vs code on chrome browser? I am new to programming and the way i used to debug in browser doesn't work because webpack minifies it all to one line.
everything I found online seems irrelevant
The sourcemaps generation should be enabled, e.g. on Angular you can enable them on angular.json, setting sourceMap = true
When it is running on chrome, you can found them on top -> webpack:// -> . (yes the last folder is a point/dot).
On the next link is an image with the folder structure of the sources tab in dev tools.
Where to find the code with sourcemaps from webpack
I am trying to run JavaScript code in Atom with Script package. It can run Python successfully, but with JS files it gives the following error message:
The system cannot find the file specified.
I had the same problem while analyzing some JavaScript code of an extension for Chrome.
Using: Windows 7 64Bit Atom:1.24.0 x64
Since I my coding Folder is somewhere else I copied the files in that folder. Let’s say:
C:\Users\USER\CodingStuff\
then it started working. I have also tried adding the extension file the Sources via:
1 - CTRL+SHIFT+I
2- Right click -> add folder to workspace
But that did not work.
Side note: node.js has to be installed on the system.
Hope it helps.
I know I am late, but if any other faces the same issue, my answer will be helpful.
Assumed that you want to run your javascript outside browser and you installed node.js.
There is a bug in "script" package of Atom. Check ur path of the script if there are spaces then this leads to the aforementioned error. Work around is remove spaces.
for ex:
E:\Java script\trial.js
change to:
E:\Javascript\trial.js
Recently I have seen files with the .js.map extension shipped with some JavaScript libraries (like Angular), and that just raised a few questions in my head:
What is it for? Why do the guys at Angular care to deliver a .js.map file?
How can I (as a JavaScript developer) use the angular.min.js.map file?
Should I care about creating .js.map files for my JavaScript applications?
How does it get created? I took a look at angular.min.js.map and it was filled with strange-formatted strings, so I assume it's not created manually.
The .map files are for JavaScript and CSS (and now TypeScript too) files that have been minified. They are called source maps. When you minify a file, like the angular.js file, it takes thousands of lines of pretty code and turns it into only a few lines of ugly code. Hopefully, when you are shipping your code to production, you are using the minified code instead of the full, unminified version. When your app is in production, and has an error, the source map will help take your ugly file, and will allow you to see the original version of the code. If you didn't have the source map, then any error would seem cryptic at best.
Same for CSS files. Once you take a Sass or Less file and compile it to CSS, it looks nothing like its original form. If you enable sourcemaps, then you can see the original state of the file, instead of the modified state.
So, to answer you questions in order:
What is it for? To de-reference uglified code
How can a developer use it? You use it for debugging a production app. In development mode you can use the full version of Angular. In production, you would use the minified version.
Should I care about creating a js.map file? If you care about being able to debug production code easier, then yes, you should do it.
How does it get created? It is created at build time. There are build tools that can build your .map file for you as it does other files. Sourcemaps fail if the output file is not located in the project root directory #71
I hope this makes sense.
How can a developer use it?
Don't link your js.map file in your index.html file (no need for that)
Minification tools (good ones) add a comment to your .min.js file:
//# sourceMappingURL=yourFileName.min.js.map
which will connect your .map file.
When the min.js and js.map files are ready...
Chrome: Open dev-tools, navigate to Sources tab. You will see the sources folder, where un-minified applications files are kept.
I just wanted to focus on the last part of the question; How are source map files created? by listing the build tools I know that can create source maps.
Grunt: using plugin grunt-contrib-uglify
Gulp: using plugin gulp-uglify
Google closure: using parameter --create_source_map
The map file maps the unminified file to the minified file. If you make changes in the unminified file, the changes will be automatically reflected to the minified version of the file.
Just to add to how to use map files: I use Google Chrome for Ubuntu and if I go to sources and click on a file, if there is a map file a message comes up telling me that I can view the original file and how to do it.
For the Angular files that I worked with today I click Ctrl + P and a list of original files comes up in a small window.
I can then browse through the list to view the file that I would like to inspect and check where the issue might be.