Use the 'glean' command in the JS web-extension sample

Author: Dexterp37

.gitignore

@@ -121,3 +121,6 @@ web-ext-artifacts/
 
 # This is the name of the folder we will add the glean generated files in for our samples.
 generated/
+
+# This is the name of the Glean virtual environment
+.venv

samples/web-extension/javascript/README.md

@@ -10,36 +10,28 @@ Whenever this web extensions popup is opened it will trigger Glean.js events.
 
 ## How to run this sample
 
-1. Generate metrics and pings files.
-
-```bash
-npm run glean_parser
-```
-
-> This command requires that you have [`glean_parser`](https://pypi.org/project/glean-parser/) available.
-> glean_parser is a Python package. To install it run `pip install glean_parser`.
-> Javascript support was added to glean_parser on version 2.1.0, make sure your version is up to date.
-
-2. Link the `@mozilla/glean` package. On the glean/ folder run:
+1. Link the `@mozilla/glean` package. On the glean/ folder run:
 
 ```bash
 npm link
 ```
 
-3. Link the `@mozilla/glean` package to this sample web extension. On this `web-extension` folder run:
+2. Link the `@mozilla/glean` package to this sample web extension. On this `web-extension` folder run:
 
 ```bash
+npm install
 npm link @mozilla/glean
 ```
 
-4. Build this sample. On this `web-extension` folder run:
+3. Build this sample. On this `web-extension` folder run:
 
 ```bash
-npm install
 npm run build
 ```
 
-5. Load the web extension on your browser of choice.
+> **Note** This operation will take some time on the first run, because it will create a virtual environment for running the glean-parser.
+
+4. Load the web extension on your browser of choice.
 
   - **Firefox**
     1. Go to [about:debugging#/runtime/this-firefox](about:debugging#/runtime/this-firefox);

samples/web-extension/javascript/package.json

@@ -4,9 +4,9 @@
   "description": "A sample web extension using Glean.js",
   "main": "dist/bundle.js",
   "scripts": {
-    "glean_parser": "glean_parser translate src/metrics.yaml src/pings.yaml -f javascript -o src/generated",
-    "build": "webpack --watch --config webpack.config.js --mode production",
-    "dev": "webpack --watch --config webpack.config.js --mode development"
+    "glean": "glean translate src/metrics.yaml src/pings.yaml -f javascript -o src/generated",
+    "build": "npm run glean && webpack --watch --config webpack.config.js --mode production",
+    "dev": "npm run glean && webpack --watch --config webpack.config.js --mode development"
   },
   "author": "The Glean Team <[email protected]>",
   "license": "MPL-2.0",