FireFox compatibility using WebExtensions format.

.gitignore

@@ -56,4 +56,6 @@ key.pem
 # build output
 *.crx
 augury.zip
+augury.xpi
 download.html
+manifest.json

circle.yml

@@ -8,7 +8,7 @@ dependencies:
   pre:
     - rm -rf node_modules typings
   post:
-    - if [ ! $SENTRY_KEY ]; then export SENTRY_KEY=DUMMY_SENTRY_KEY; fi; npm run prod-build; ./crxmake.sh
+    - if [ ! $SENTRY_KEY ]; then export SENTRY_KEY=DUMMY_SENTRY_KEY; fi; npm run pack;
 
 test:
   pre:

crxmake.sh

@@ -16,33 +16,48 @@ crx="$name.crx"
 pub="$name.pub"
 sig="$name.sig"
 zip="$name.zip"
+xpi="$name.xpi"
 
-# Ensure environment variables exist
+# Ensure environment variables exist ($sentry_key isnt used anywhere)
 sentry_key=${SENTRY_KEY:?"The environment variable 'SENTRY_KEY' must be set and non-empty"}
 
 # assign build name to zip and crx file in circleci env
 if [ $CIRCLE_BUILD_NUM ] || [ $CIRCLE_ARTIFACTS ]; then
   crx="$name-$CIRCLE_BUILD_NUM.crx"
   zip="$name-$CIRCLE_BUILD_NUM.zip"
+  xpi="$name-$CIRCLE_BUILD_NUM.xpi"
 fi
 
 trap 'rm -f "$pub" "$sig"' EXIT
 
-# copy all the files we need
-rm -rf $dir
-mkdir $dir
-cp -R $files $dir/
-rm $dir/build/*.map
+function build_for_browser {
+  npm run build:prod:${BROWSER_LOWERCASE}
+}
+
+function grab_files_and_zip {
+  # copy all the files we need
+  rm -rf $dir
+  mkdir $dir
+  cp -R $files $dir/
+  rm $dir/build/*.map
+
+  # zip up the crx dir
+  cwd=$(pwd -P)
+  (cd "$dir" && zip -qr -9 -X "$cwd/$zip" .)
+}
 
 # generate private key key.pem if it doesn't exist already
 if [ ! -f $key ]; then
   echo "$key doesn't exist."
   openssl genrsa -out key.pem 1024
 fi
 
-# zip up the crx dir
-cwd=$(pwd -P)
-(cd "$dir" && zip -qr -9 -X "$cwd/$zip" .)
+# ---------------------------------------------------------
+# build for chrome (.crx) ---------------------------------
+
+BROWSER_LOWERCASE=chrome
+build_for_browser
+grab_files_and_zip
 
 # signature
 openssl sha1 -sha1 -binary -sign "$key" < "$zip" > "$sig"
@@ -65,17 +80,30 @@ sig_len_hex=$(byte_swap $(printf '%08x\n' $(ls -l "$sig" | awk '{print $5}')))
 ) > "$crx"
 
 echo "Wrote $crx"
+echo "<script>window.location.href = 'https://s3.amazonaws.com/batarangle.io/$crx';</script>" > download.html
+echo "Wrote file"
 
-# move crx to artifacts folder in circleci
+# ---------------------------------------------------------
+# build for firefox (.xpi) --------------------------------
+# TODO: add digital signatures. (firefox requires add-on verification)
+
+BROWSER_LOWERCASE=firefox
+build_for_browser
+grab_files_and_zip
+
+cp $zip $xpi
+
+# ---------------------------------------------------------
+# done. output artifacts and clean up ---------------------
+
+# move files to artifacts folder in circleci
 if [ $CIRCLE_ARTIFACTS ]; then
   mv $crx $CIRCLE_ARTIFACTS
-  mv $zip $CIRCLE_ARTIFACTS
+  mv $xpi $CIRCLE_ARTIFACTS
 fi
 
-
-echo "<script>window.location.href = 'https://s3.amazonaws.com/batarangle.io/$crx';</script>" > download.html
-echo "Wrote file"
-
 # clean up
+rm 'manifest.json' # this file is generated by build process (browser specific)
+rm $zip
 rm -rf $dir
 echo "Fin."

manifest.json → manifest/base.manifest.json

@@ -3,7 +3,6 @@
   "short_name": "Augury",
   "version": "1.15.0",
   "description": "Extends the Developer Tools, adding tools for debugging and profiling Angular applications.",
-  "update_url": "https://augury.angular.io/",
   "permissions": [
     "storage"
   ],
@@ -15,8 +14,7 @@
   "background": {
     "scripts": [
       "build/background.js"
-    ],
-    "persistent": false
+    ]
   },
   "content_scripts": [{
     "matches": [

manifest/chrome.manifest.json

@@ -0,0 +1,6 @@
+{
+  "update_url": "https://augury.angular.io/",
+  "background": {
+    "persistent": false
+  }
+}

manifest/firefox.manifest.json

@@ -0,0 +1,7 @@
+{
+  "applications": {
+    "gecko": {
+      "id": "[email protected]"
+    }
+  }
+}

package.json

@@ -21,16 +21,26 @@
   },
   "homepage": "https://github.com/rangle/augury",
   "scripts": {
-    "prod-build": "webpack --optimize-dedupe",
+    "pack": "./crxmake.sh",
+    "watch": "webpack --colors --display-error-details --display-cached --watch",
+    "watch:chrome": "cross-env BROWSER=chrome npm run watch",
+    "watch:firefox": "cross-env BROWSER=firefox npm run watch",
+    "watch:dev": "cross-env NODE_ENV=development npm run watch",
+    "watch:dev:chrome": "cross-env BROWSER=chrome npm run watch:dev",
+    "watch:dev:firefox": "cross-env BROWSER=firefox npm run watch:dev",
     "build": "webpack --colors --display-error-details --display-cached",
-    "dev": "webpack --colors --display-error-details --display-cached --watch",
-    "dev-build": "cross-env NODE_ENV=development npm run build",
+    "build:chrome": "cross-env BROWSER=chrome npm run build",
+    "build:firefox": "cross-env BROWSER=firefox npm run build",
+    "build:prod": "webpack --optimize-dedupe",
+    "build:prod:chrome": "cross-env BROWSER=chrome npm run build:prod",
+    "build:prod:firefox": "cross-env BROWSER=firefox npm run build:prod",
+    "build:dev": "cross-env NODE_ENV=development npm run build",
+    "build:dev:chrome": "cross-env BROWSER=chrome npm run build:dev",
+    "build:dev:firefox": "cross-env BROWSER=firefox npm run build:dev",
     "webpack": "webpack",
     "clean": "rimraf build",
     "start": "rimraf build && cross-env NODE_ENV=development webpack --watch",
     "test": "npm run lint && webpack --config webpack.test.config.js && cat build/test.js | tape-run | tap-spec",
-    "prepack": "npm run clean && npm run build",
-    "pack": "./crxmake.sh",
     "lint": "tslint 'src/**/*.ts'"
   },
   "dependencies": {
@@ -73,13 +83,15 @@
     "autoprefixer": "6.3.6",
     "basscss-layout": "3.1.0",
     "clone": "2.1.0",
+    "copy-webpack-plugin": "^4.3.1",
     "css-loader": "0.26.1",
     "d3-hierarchy": "1.1.1",
     "d3-selection": "1.0.3",
     "d3-shape": "1.0.4",
     "es6-promise": "4.0.5",
     "es6-shim": "0.35.0",
     "file-loader": "0.10.0",
+    "merge-jsons-webpack-plugin": "^1.0.12",
     "msgpack-lite": "0.1.20",
     "object-assign": "4.1.1",
     "postcss-cssnext": "2.5.2",

popup.html

@@ -22,7 +22,6 @@
 
     .modal_cta {
       border-top: 0.5px solid #dadada;
-      height: 50px;
       width: 100%;
     }
     /* Header Section */

webpack.config.js

@@ -22,6 +22,43 @@ var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
 var DedupePlugin = webpack.optimize.DedupePlugin;
 var DefinePlugin = webpack.DefinePlugin;
 var BannerPlugin = webpack.BannerPlugin;
+var MergeJsonWebpackPlugin = require("merge-jsons-webpack-plugin");
+
+/**
+ * CROSS-BROWSER COMPATIBILITY
+ * We use different build configurations depending on browser.
+ * For example, browsers have different support for properties on manifest.json
+ */
+
+// browsers we support
+const BROWSER = {
+  FIREFOX: 'FIREFOX',
+  CHROME: 'CHROME'
+}
+
+// browser-specific manifest file created during build.
+// `merge-jsons-webpack-plugin` needs relative paths from the build folder.
+const MANIFEST_OUTPUT = `../manifest.json`
+
+// manifest.json properties shared by all browsers
+const BASE_MANIFEST = `manifest/base.manifest.json`
+
+// target browser parameter is case insensitive (default chrome)
+const interpretTargetBrowser = (requested = '') => {
+  return Object.keys(BROWSER)
+    .find(browser => browser == requested.toUpperCase())
+    || BROWSER.CHROME
+}
+
+// each browser can extend the base manifest with a file of this form
+const getManifestExtension = (targetBrowser) =>
+  `manifest/${targetBrowser.toLowerCase()}.manifest.json`
+
+// grab target browser parameter (passed as command arg)
+const targetBrowser = interpretTargetBrowser(process.env.BROWSER)
+
+// grab manifest extension
+const manifestExtension = getManifestExtension(targetBrowser)
 
 /*
  * Config
@@ -121,8 +158,21 @@ module.exports = {
       'SENTRY_KEY': JSON.stringify(process.env.SENTRY_KEY),
     }),
     new OccurenceOrderPlugin(),
-    new DedupePlugin()
-  ],
+    new DedupePlugin(),
+    new MergeJsonWebpackPlugin({
+        "files": [
+            BASE_MANIFEST,
+            manifestExtension,
+        ],
+        "output": {
+            "fileName": MANIFEST_OUTPUT
+        }
+    }),
+  ].concat((NODE_ENV == 'production') ?  [
+    new UglifyJsPlugin()
+  ] : [
+    // ... dev-only plugins
+  ]),
 
   /*
    * When using `templateUrl` and `styleUrls` please use `__filename`