Refactor extension to webpack

This change is the biggest in the history of the project. The entire
project has been refactored so it is built with webpack.

This involves:
- Creating webpack and npm config files.
- Fixing some bugs in the code due to the fact that webpack uses strict
mode.
- Merging some pieces of code which were shared throughout the codebase
(not exhaustive, more work should be done in this direction).
- Splitting the console_inject.js file into separate files (it had 1000+
lines).
- Adapting all the build-related files (Makefile, bash scripts, etc.)
- Changing the docs to explain the new build process.
- Changing the Zuul playbook/roles to adapt to the new build process.

Change-Id: I16476d47825461c3a318b3f1a1eddb06b2df2e89
diff --git a/Makefile b/Makefile
index c630cf7..0123e00 100644
--- a/Makefile
+++ b/Makefile
@@ -1,18 +1,52 @@
-.PHONY: all chromium-stable chromium-beta chromium-mv3-beta gecko-stable clean
+.PHONY: node_deps clean_dist deps clean_deps serve_chromium serve_chromium_mv3 serve_gecko release release_chromium_stable release_chromium_beta release_gecko_stable build_test_extension clean_releases clean
 
-all: chromium-stable chromium-beta chromium-mv3-beta gecko-stable
+WEBPACK := ./node_modules/webpack-cli/bin/cli.js
+RELEASE_SCRIPT := bash tools/release.bash
 
-chromium-stable:
-	bash release.bash -c stable -b chromium
+node_deps:
+	npm ci --no-save
 
-chromium-beta:
-	bash release.bash -c beta -b chromium
+clean_dist:
+	rm -rf dist
 
-chromium-mv3-beta:
-	bash release.bash -c beta -b chromium_mv3
+deps: node_deps
+	mkdir -p dist
 
-gecko-stable:
-	bash release.bash -c stable -b gecko
+clean_deps:
+	rm -rf node_modules
 
-clean:
+serve_chromium: deps
+	$(WEBPACK) --mode development --env browser_target=chromium --watch
+
+serve_chromium_mv3: deps
+	$(WEBPACK) --mode development --env browser_target=chromium_mv3 --watch
+
+serve_gecko: deps
+	$(WEBPACK) --mode development --env browser_target=gecko --watch
+
+release: release_chromium_stable release_chromium_beta release_gecko_stable
+
+release_chromium_stable: deps
+	$(WEBPACK) --mode production --env browser_target=chromium
+	$(RELEASE_SCRIPT) -c stable -b chromium
+	rm -rf dist/chromium
+
+release_chromium_beta: deps
+	$(WEBPACK) --mode production --env browser_target=chromium
+	$(RELEASE_SCRIPT) -c beta -b chromium
+	rm -rf dist/chromium
+
+release_gecko_stable: deps
+	$(WEBPACK) --mode production --env browser_target=gecko
+	$(RELEASE_SCRIPT) -c stable -b gecko
+	rm -rf dist/gecko
+
+# Target to build the extension for webext lint in the Zuul Check Pipeline.
+build_test_extension: deps
+	$(WEBPACK) --mode production --env browser_target=gecko
+	$(RELEASE_SCRIPT) -c stable -b gecko
+
+clean_releases:
 	rm -rf out
+
+clean: clean_deps clean_dist clean_releases