Develop Reference

Error when trying to run JS in VScode for the first time (newbie)

So i just installed VScode on my Windows 10. I keep getting the following error:
"Can't find Node.js binary "node": path does not exist. Make sure Node.js is installed and in your PATH, or set the "runtimeExecutable" in your launch.json"
I've tried reinstalling VS and rebooting, tried installing from different folders (both on C drive and the second time i added it to my programs folder)
I tried installing a node.js extension which fails every time and then prompts me to try it manually...which then leads to a file downloading automatically, but when i add it to my VS folder through my file explorer, nothing happens still.
I tried installed a different node.js debugger
I tried changing my debugger to chrome too but all it does is take me to localhost:8080 and an empty page of course.
When i go through file explorer and look through the path of my .vscode folder, the nightly extension (node.js) is there....
I'm new to VScode and have just been using Scrimba's terminal to do my code but decided to try something more professional

I think you're putting node.js in the same folder/path as .vscode, this isn't correct. What you need to do is set node.js in your PATH which is different. See this answer for more information on how to set PATH/environment variables. Also install it from the official website nodejs.org. After changing your PATH remember to reboot.
I wouldn't recommend downloading "node.js extensions" as those likely are not legitimate, and as you've said yourself they don't work. Only download from the official website.

You have to install nodes from this website https://nodejs.org/

Importing npm modules into Google Chrome Extension content script [duplicate]

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.

Firefox 53 extension, how can I write the proper extension structure and content [duplicate]

I put a lot of stuff in searching an easy way to develop a Firefox extension, but I am unable to create an extension. Kindly tell me the file structure of Firefox extensions and an easy way to install the extension.

.xpi file format (Extension Packaging)
The .xpi files that are used as containers for Mozilla (Firefox, Thunderbird, etc.) extensions are merely zip archives that have had the file extension changed to .xpi with the files added to the archive using either "deflate" compression, or uncompressed. If you use any other type of compression, other than "deflate", or "store" (uncompressed), you will get an error like:
This add-on cannot be installed because it appears to be corrupted
The files start in the root directory of the zip compressed archive (i.e. there is not an empty first level directory which then contains the files).
The contents of the archive could be only a few files to any number of files. The files that must be included depend on the type of add-on which you are packaging. If you are planning on using the Add-on SDK, then you probably don't need to know the format for these files, as much of it is abstracted by using the jpm tool. If you have no idea what I am talking about, you may want to read up on the different types of add-ons for Firefox (WebExtensions, Add-on SDK, Bootstrap/Restartless, and Overlay/Legacy/XUL).
WebExtensions:
At a minimum, you will have a manifest.json file which describes the extension. You will, almost certainly, have additional files. The chrome.manifest, install.rdf, and package.json files used in other types of add-ons are not used in WebExtension add-ons. You should not have those files.
Add-on SDK:
The .xpi file for a Firefox Add-on SDK extension should be created by executing jpm xpi. Add-on SDK extensions are described in a package.json file. When you run jpm xpi your add-on is translated to being a Bootstrap/Restartless add-on. This is done by translating the package.json file into a install.rdf, creating a chrome.manifest file and adding some wrappers to the JavaScript. You should not try to perform this process yourself, unless doing so is necessary for your add-on to function (which would be quite rare).
Bootstrap/Restartless and Overlay/legacy:
At a minimum, you have install.rdf, and chrome.manifest files. Bootstrap/Restartless add-ons will also have a bootstrap.js file. There will almost always be additional files. These types of add-ons do not use a package.json, nor a manifest.json.
My very simple Bootstrap/Restartless extension, Print Button is Print (changes the print button to print instead of print preview), has the following structure:
Archive contains:
bootstrap.js
chrome/
chrome/content/
chrome/content/options.xul
chrome/skin/
chrome/skin/printer-typeC128.png
chrome/skin/printer-typeC32.png
chrome/skin/printer-typeC48.png
chrome/skin/printer-typeC64.png
chrome.manifest
install.rdf
license.txt
Total 12 entries (42360 bytes)
There are the required install.rdf and chrome.manifest files.
The file bootstrap.js is required for Bootstrap/Restartless extensions. It contains the code that is run when the extension is installed, removed, enabled, disabled, or upon Firefox startup or shutdown. This extension is simple enough such that all the JavaScript code is contained in bootstrap.js.
There is a file chrome/content/options.xul which is a XUL definition of the options dialog.
The license.txt just explains that the extension was relased under the Mozilla Public License, v2.0.
The .png files are the icon for this extension at various resolutions.
Creating the .xpi file
You can use whatever method you desire to create the .zip file, which is renamed to .xpi. Keep in mind the requirement that the only compression method that is supported is "deflate", but files can also be added to the archive uncompressed. Your top level files (e.g. which ever you have of manifest.json (WebExtensions), or everything else: chrome.manifest, and install.rdf) should be in the root directory of the archive, not in a subdirectory.
To create the .xpi file I use a batch file, which uses a combination of DOS and Unix/Linux (actually Cygwin) commands:
mkxpi.bat:
rm -f PrintButtonIsPrint#makyen.foo.xpi
zip -1 -r PrintButtonIsPrint#makyen.foo.xpi * -x#xpi.ignore
pause
This removes any old version of the .xpi file. It then creates a new .xpi file using, -1, minimal compression (speed of access is more important than saving space), which forces only storing uncompressed or using "deflate". The new .xpi will contain all files and subdirectories *, but ignoring all the files in the xpi.ignore text file (-x#xpi.ignore). Ignoring files is used because I have other things in the directory (e.g. .git directory, .bak files auto-created from editor, etc.). Once the .xpi file is created the script executes pause so I can verify which files were included, that there were no errors, etc., instead of just having the window disappear and assuming that everything is fine.
My xpi.ignore file is a bit long, as it accumulates cruft from various projects and is rarely cleaned out:
*.com
*.class
*.dll
*.exe
*.o
*.so
*.7z
*.dmg
*.gz
*.iso
*.jar
*.rar
*.tar
*.zip
*.log
*.sql
*.sqlite
*.svg
*/.DS_Store
*/.DS_Store?
*/._*
._*
*/.Spotlight-V100
.Spotlight-V100
*/.Trashes
.Trashes
*/ehthumbs.db
*/Thumbs.db
*.ORIG
*.bak
*OLD*
OLD/*
*/OLD/*
*.OLD
*.OLD[0-9]
*/OLD/*
*/OLD[0-9]/*
*.unknown
*.unknown[0-9]
*.updated
*.updated[0-9]
*/Copy *
*/OLD
*/OLD*
*/OLD[0-9]
*/OLD[0-9][0-9]
*/test/*
*/not in xpi/*
*/tmp
*.tmp
*/foo
*.foo
*checkpoint
.git
*/.git
.gitignore
*/.gitignore
xpi.ignore
mkclean.bat
mkclean.bat.DONTRUN
mkxpi.bat
*.xpi
*/devtools-toolbox-window.ico
*/devtools-webconsole.ico
*/JSConsoleWindow.ico
*/main-window.ico
*/places.ico
*/viewSource.ico
Installing extensions
As normal extensions:
In order to install an extension as a normal add-on into a branded Release or Beta version of Firefox it must be signed by Mozilla. This is done by submitting it to AMO. You can install unsigned extensions as normal add-ons into other versions of Firefox (e.g. Firefox Developer Edition, Firefox Nightly, Unbranded Beta, or Unbranded Release) by setting xpinstall.signatures.required to false in about:config.
If you choose, in a particular installation of Firefox, you can completely disable the add-on signing requirement. For more information, you can see my answer: How can I disable signature checking for Firefox add-ons?
Installing an extension (i.e. the .xpi file) can be a simple matter of dragging and dropping it onto a Firefox window running the profile in which you desire it installed. For development/testing, you can have the extension be in a directory on your local drive by using a Firefox extension proxy file (create a file named as the extension's <em:id> (in install.rdf for Bootstrap/Restartless and Overlay/Legacy) in the profile's extensions directory containing one line with the complete path to the directory containing the extension's files). Depending on what your goal is (one profile, all profiles, all users, which OS, etc.), there are other options as to how to install extensions.
As temporary add-ons:
The only type of extension which can not be installed as a temporary add-on is Overlay/Legacy. Such extensions require the browser to be restarted after the install prior to being functional. As such, they can not be temporary.
To install an extension as a temporary, navigate to about:debugging. From that page, click on Load Temporary Add-on, then navigate popup to the appropriate folder and select either an .xpi file, or any file in the directory. If you select a file other than an .xpi file, it is assumed that the directory contains unpacked add-on files which will be automatically identified.

Generate a signed .xpi
Install web-ext with NPM, maybe you will need root privileges: npm install --global web-ext
Go to https://addons.mozilla.org/es/developers/addon/api/key/ and generate a new API KEY.
Go to your extension folder, open a terminal and execute: web-ext sign --api-key=$AMO_JWT_ISSUER --api-secret=$AMO_JWT_SECRET where $AMO_JWT_IUSSER and $AMO_JWT_SECRET are the keys you generated in the previous step.

Load local files on Chrome-os

I am trying to create a JavaScript pacman game, but whenever I try and load my script files or images, I get the error:
The browser I'm using is chrome, and the files are stored in the same directory. I am running CHROME OS, so I can't just go into files and edit an existing flag.
Same for the images, except the file name is different.
Does anyone know why I am getting an error Access Denied, or how I could test the files?
The files are loaded using this format
<script src="Scripts/gamescript.js"></script>
<body>
<div class="game" id="game">
<img src="/Images/ghosts/red.png" />
</div>
</body>
Per request, here is my file tree
/Javascript_Pacman_Game/
index.html
/Styles/
stylesheet.css
/Scripts/
gamescript.js
myCustomLibrary.js
setInterval.js
/Images/
/Ghosts/
red.png
blue.png
pink.png
orange.png
scared.png
/GameElements/
board.jpg
bloop.png
superBloop.png
The problem isn't spelling or file permissions, and I can't run a local host because of Chrome-OS.

Try installing Web server for Chrome, telling it to serve files from your /Javascript_Pacman_Game folder, and testing your app at http://127.0.0.1:8887/

If you have to handle this from chromium OS (specially with dual boot cloud ready), follow the steps
Step 1:
Go to the shell prompt Ctrl + Alt + T on shell open the chrome_dev.conf
$ sudo vi /etc/chrome_dev.conf
The sudo default password would be 'chrome', The file may be write protected follow these steps incase if you stuck in step 1
$ sudo cp /etc/chrome_dev.conf /usr/local
$ sudo mount --bind /usr/local/chrome_dev.conf /etc/chrome_dev.conf
$ sudo vi /etc/chrome_dev.conf
Step 2:
Once you open up the file write --allow-file-access-from-files on top of the file
Step 3:
Restart the UI (if you are using windows dual boot press CTRL + ALT + F2) from dev shell
$ sudo restart ui
Once its restart the changes will get affect in chromium OS chrome, to check type chrome://gpu on your chrome browser
Under command line Argument you can find argument options.

You really should be running a local server. Apache, IIS, etc. Than you can run off localhost and have no issues.
BUT if you really want to run off the file system, you need to start up chrome to allow it.
You need to set --allow-file-access-from-files
http://www.chrome-allow-file-access-from-file.com/

It sounds like your permissions have been edited (or defaulted) to restrict your current user from accessing those files.
I managed to reproduce this error by creating the same file structure you have and then
right clicking red.png > properties > security > edit...
then denying access to this file from my current user. It seems that if you deny access via the directory you get a File not found error instead since the browser isn't even able to navigate to the directory in the first place.
Try checking your individual file permissions. If this is a default file permissions issue you may want to ask about how to fix that on a different forum.

The error is from your spelling, the first one you said
gamescript.js
and you called it as
script src="Scripts/gamscript.js"></script>
Check your spelling, you did not include "e"

Use Chrome Dev Editor as your IDE, then you can just hit the run button in the top left.
You could also use this Server.

javascript doesn't have access to the filesystem of a computer for security reasons do
<script src="Scripts/gamescript.js"></script>

Install Google Chrome extension from script

I have created my Google-chrome extension (crx file) but I don't want to upload it on Chrome web store.
Now how can I install this crx file in Google chrome programmatically (using JavaScript or chrome API) ?
I have searched all over the place and the only solution was to upload extension on chrome web store and the use chrome inline_installation.
Is there any other way ?
(and I don't want pre-installed-extensions I want to install when user visits my site and click on install button)

Here and here are instructions to hosting an installable .crx file on your own server.
Basically:
Google Chrome considers a file to be installable if either of the following is true:
The file has the content type application/x-chrome-extension
The file suffix is .crx and both of the following are true:
The file is not served with the HTTP header X-Content-Type-Options: nosniff
The file is served with one of the following content types:
empty string
"text/plain"
"application/octet-stream"
"unknown/unknown"
"application/unknown"
"*/*"
UPDATE
Chrome no longer allows extensions to be automatically installed from outside the app store. The user must download the .crx file drag the extension to the chrome://extensions page.
Source

There is a simple way to install locally-hosted Chrome extensions for personal use. I use this method for my own authoring, testing, and use on my machine.
If it is just an extension, you can put all of your files (background, manifest, etc) into a directory on your computer. Then, open Chrome and do the following:
Navigate to chrome:extensions in the omnibar.
Make sure the Developer Mode box is checked
Click on "Load unpacked extension
In the file browser, navigate to your directory and click Open
Chrome will install the extension to your machine. No need for the .crx file. To distribute this to colleagues, you could host the file for download in Dropbox or your Drive account. They would need to follow the same process to install the extension on their machine.
Do note that if you make updates to the extension for stability or other compatibility upgrades, each person with the extension will need to download the updated directory and then update the extension manually.