Add initial steps towards Chrome support

Build using `yarn run build` and then
`eval (yarn bin)/webpack --browser chrome`. Load into
chrome://extensions by toggling Developer Mode and then
'Load unpacked' the build/ directory.

What works:

- the options page

- simple commands on the options page

What doesn't work:

- our iframe is loaded into other pages but we don't capture
keyevents

- new tab page

- most ex-commands on the options page (we often hit errors
due to using Firefox features that aren't in Chrome)

- styling on the command line

We clearly need a wrapper for the `browser` API that fails more
gracefully where something isn't available.

package.json

@@ -46,7 +46,8 @@
     "web-ext": "^3.2.0",
     "web-ext-types": "^3.2.1",
     "webpack": "^4.41.2",
-    "webpack-cli": "^3.3.9"
+    "webpack-cli": "^3.3.9",
+    "webextension-polyfill-for-webpack": "^0.0.1"
   },
   "scripts": {
     "build": "sh scripts/build.sh",

webpack.config.js

@@ -1,43 +1,10 @@
-const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin")
+const { TsConfigPathsPlugin } = require("awesome-typescript-loader")
 const CopyWebPackPlugin = require("copy-webpack-plugin")
+const webpack = require("webpack")
 // const WebpackShellPlugin = require('webpack-shell-plugin')
 
-const fileExtensions = [".ts", ".tsx", ".js", ".json"]
-
-module.exports = {
-    mode: "development",
-    entry: {
-        background: "./src/background.ts",
-        content: "./src/content.ts",
-        commandline_frame: "./src/commandline_frame.ts",
-        help: "./src/help.ts",
-        newtab: "./src/newtab.ts",
-    },
-    output: {
-        filename: "[name].js",
-        path: __dirname + "/build",
-    },
-
-    // Enable sourcemaps for debugging webpack's output.
-    devtool: "inline-source-map",
-
-    resolve: {
-        // Add '.ts' and '.tsx' as resolvable extensions.
-        extensions: fileExtensions,
-        plugins: [new TsconfigPathsPlugin({extensions: fileExtensions})]
-    },
-
-    module: {
-        rules: [
-            // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
-            { test: /\.tsx?$/, loader: "ts-loader" },
-
-            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
-            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
-        ],
-    },
-
-    plugins: [
+module.exports = (env, argv) => {
+    let plugins = [
         // new UglifyJSPlugin({
         //     uglifyOptions: {
         //         ecma: 8
@@ -59,10 +26,51 @@ module.exports = {
             { from: "generated/static", to: "static" },
             { from: "issue_template.md" },
         ]),
-    ],
-    // Fix css
-    // https://github.com/webpack-contrib/css-loader/issues/447#issuecomment-285598881
-    node: {
-        fs: "empty",
-    },
+    ]
+    if (argv.browser === 'chrome') {
+        plugins.push(
+            new webpack.ProvidePlugin({
+                browser: 'webextension-polyfill-for-webpack',
+            }),
+        )
+    }
+    return {
+        mode: "development",
+        entry: {
+            background: "./src/background.ts",
+            content: "./src/content.ts",
+            commandline_frame: "./src/commandline_frame.ts",
+            help: "./src/help.ts",
+            newtab: "./src/newtab.ts",
+        },
+        output: {
+            filename: "[name].js",
+            path: __dirname + "/build",
+        },
+
+        // Enable sourcemaps for debugging webpack's output.
+        devtool: "inline-source-map",
+
+        resolve: {
+            // Add '.ts' and '.tsx' as resolvable extensions.
+            extensions: [".ts", ".tsx", ".js", ".json"],
+            plugins: [new TsConfigPathsPlugin()],
+        },
+
+        module: {
+            rules: [
+                // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
+                { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
+
+                // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
+                { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
+            ],
+        },
+        plugins,
+        // Fix css
+        // https://github.com/webpack-contrib/css-loader/issues/447#issuecomment-285598881
+        node: {
+            fs: "empty",
+        },
+    }
 }

yarn.lock

@@ -8228,6 +8228,11 @@ web-ext@^3.2.0:
     yargs "13.3.0"
     zip-dir "1.0.2"
 
+webextension-polyfill-for-webpack@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/webextension-polyfill-for-webpack/-/webextension-polyfill-for-webpack-0.0.1.tgz#c40c51a3a2e7b82d8312cb3c0e7eb0108c4f2aa3"
+  integrity sha512-T7oYLXNHvBeXqJPer6/jN8XxnUGezCxZfh01Crx+AXGRDlBdO0EDBUoZHo+BPMTia+twWO79cYlLVeb9B8N7WQ==
+
 webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"