JIT builds for dev

gulpfile.js

@@ -65,6 +65,7 @@ gulp.task('dist', ['dist:firefox', 'dist:chrome', 'dist:opera', 'dist:edge', 'di
 gulp.task('dist:firefox', (cb) => {
     return dist('firefox', (manifest) => {
         delete manifest['-ms-preload'];
+        delete manifest.content_security_policy;
         return manifest;
     });
 });
@@ -73,6 +74,7 @@ gulp.task('dist:opera', (cb) => {
     return dist('opera', (manifest) => {
         delete manifest['-ms-preload'];
         delete manifest.applications;
+        delete manifest.content_security_policy;
         return manifest;
     });
 });
@@ -81,6 +83,7 @@ gulp.task('dist:chrome', (cb) => {
     return dist('chrome', (manifest) => {
         delete manifest['-ms-preload'];
         delete manifest.applications;
+        delete manifest.content_security_policy;
         delete manifest.sidebar_action;
         delete manifest.commands._execute_sidebar_action;
         return manifest;
@@ -116,6 +119,7 @@ function edgeCopyBuild(source, dest) {
                 delete manifest.applications;
                 delete manifest.sidebar_action;
                 delete manifest.commands._execute_sidebar_action;
+                delete manifest.content_security_policy;
                 return manifest;
             })))
             .pipe(gulp.dest(dest))

package-lock.json

@@ -655,6 +655,29 @@
       "integrity": "sha1-n4NQykghRaRNARp1W4+zYj1gVEw=",
       "dev": true
     },
+    "angular2-template-loader": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/angular2-template-loader/-/angular2-template-loader-0.6.2.tgz",
+      "integrity": "sha1-wNROkP/w+sleiyPwQ6zaf9HFHXw=",
+      "dev": true,
+      "requires": {
+        "loader-utils": "0.2.17"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "0.2.17",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
+          "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
+          "dev": true,
+          "requires": {
+            "big.js": "3.2.0",
+            "emojis-list": "2.1.0",
+            "json5": "0.5.1",
+            "object-assign": "4.1.1"
+          }
+        }
+      }
+    },
     "angular2-toaster": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/angular2-toaster/-/angular2-toaster-4.0.2.tgz",

package.json

@@ -35,6 +35,7 @@
     "@types/tldjs": "1.7.1",
     "@types/webcrypto": "^0.0.28",
     "angular": "1.6.9",
+    "angular2-template-loader": "^0.6.2",
     "angular-animate": "1.6.9",
     "angular-sweetalert": "1.1.2",
     "angular-toastr": "2.1.1",

src/manifest.json

@@ -78,6 +78,7 @@
     "webRequest",
     "webRequestBlocking"
   ],
+  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
   "commands": {
     "autofill_login": {
       "suggested_key": {

webpack.config.js

@@ -24,6 +24,137 @@ const extractCss = new ExtractTextPlugin({
     allChunks: true,
 });
 
+const moduleRules = [
+    {
+        test: /\.ts$/,
+        enforce: 'pre',
+        loader: 'tslint-loader',
+    },
+    {
+        test: /\.(html)$/,
+        loader: 'html-loader',
+    },
+    {
+        test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
+        exclude: /loading.svg/,
+        use: [{
+            loader: 'file-loader',
+            options: {
+                name: '[name].[ext]',
+                outputPath: 'popup/fonts/',
+                publicPath: './fonts/',
+            },
+        }],
+    },
+    {
+        test: /\.(jpe?g|png|gif|svg)$/i,
+        exclude: /.*(fontawesome-webfont|glyphicons-halflings-regular)\.svg/,
+        use: [{
+            loader: 'file-loader',
+            options: {
+                name: '[name].[ext]',
+                outputPath: 'popup/images/',
+                publicPath: './images/',
+            },
+        }],
+    },
+    {
+        test: /\.scss$/,
+        use: extractCss.extract({
+            use: [
+                {
+                    loader: 'css-loader',
+                },
+                {
+                    loader: 'sass-loader',
+                },
+            ],
+            publicPath: '../',
+        }),
+    },
+];
+
+const plugins = [
+    new CleanWebpackPlugin([
+        path.resolve(__dirname, 'build/*'),
+    ]),
+    // ref: https://github.com/angular/angular/issues/20357
+    new webpack.ContextReplacementPlugin(/\@angular(\\|\/)core(\\|\/)esm5/,
+        path.resolve(__dirname, './src')),
+    new webpack.optimize.CommonsChunkPlugin({
+        name: 'popup/vendor',
+        chunks: ['popup/main'],
+        minChunks: isVendorModule,
+    }),
+    new webpack.optimize.CommonsChunkPlugin({
+        name: 'vendor',
+        chunks: ['background'],
+        minChunks: isVendorModule,
+    }),
+    new HtmlWebpackPlugin({
+        template: './src/popup/index.html',
+        filename: 'popup/index.html',
+        chunks: ['popup/vendor', 'popup/main'],
+    }),
+    new HtmlWebpackPlugin({
+        template: './src/background.html',
+        filename: 'background.html',
+        chunks: ['vendor', 'background'],
+    }),
+    new HtmlWebpackPlugin({
+        template: './src/notification/bar.html',
+        filename: 'notification/bar.html',
+        chunks: ['notification/bar']
+    }),
+    new HtmlWebpackPlugin({
+        template: './src/downloader/index.html',
+        filename: 'downloader/index.html',
+        chunks: ['downloader/downloader'],
+    }),
+    new HtmlWebpackPlugin({
+        template: './src/2fa/index.html',
+        filename: '2fa/index.html',
+        chunks: ['2fa/2fa'],
+    }),
+    new CopyWebpackPlugin([
+        './src/manifest.json',
+        { from: './src/_locales', to: '_locales' },
+        { from: './src/edge', to: 'edge' },
+        { from: './src/safari', to: 'safari' },
+        { from: './src/images', to: 'images' },
+        { from: './src/popup/images', to: 'popup/images' },
+        { from: './src/content/autofill.css', to: 'content' },
+    ]),
+    new webpack.SourceMapDevToolPlugin({
+        filename: '[name].js.map',
+        include: ['popup/main.js', 'background.js'],
+    }),
+    extractCss,
+    new webpack.DefinePlugin({
+        'process.env': {
+            'ENV': JSON.stringify(ENV)
+        }
+    }),
+];
+
+if (ENV === 'production') {
+    moduleRules.push({
+        test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
+        loader: '@ngtools/webpack',
+    });
+    plugins.push(new AngularCompilerPlugin({
+        tsConfigPath: 'tsconfig.json',
+        entryModule: 'src/popup/app.module#AppModule',
+        sourceMap: true,
+    }));
+} else {
+    moduleRules.push({
+        test: /\.ts$/,
+        loaders: ['ts-loader', 'angular2-template-loader'],
+        exclude: path.resolve(__dirname, 'node_modules'),
+    });
+}
+
 const config = {
     entry: {
         'popup/main': './src/popup/main.ts',
@@ -37,7 +168,7 @@ const config = {
         '2fa/2fa': './src/2fa/2fa.ts',
     },
     resolve: {
-        extensions: ['.tsx', '.ts', '.js'],
+        extensions: ['.ts', '.js'],
         alias: {
             jslib: path.join(__dirname, 'jslib/src'),
         },
@@ -48,128 +179,8 @@ const config = {
         filename: '[name].js',
         path: path.resolve(__dirname, 'build'),
     },
-    module: {
+    module: { rules: moduleRules },
-        rules: [
+    plugins: plugins,
-            {
-                test: /\.ts$/,
-                enforce: 'pre',
-                loader: 'tslint-loader',
-            },
-            {
-                test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
-                loader: '@ngtools/webpack',
-            },
-            {
-                test: /\.(html)$/,
-                loader: 'html-loader',
-            },
-            {
-                test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
-                exclude: /loading.svg/,
-                use: [{
-                    loader: 'file-loader',
-                    options: {
-                        name: '[name].[ext]',
-                        outputPath: 'popup/fonts/',
-                        publicPath: './fonts/',
-                    },
-                }],
-            },
-            {
-                test: /\.(jpe?g|png|gif|svg)$/i,
-                exclude: /.*(fontawesome-webfont|glyphicons-halflings-regular)\.svg/,
-                use: [{
-                    loader: 'file-loader',
-                    options: {
-                        name: '[name].[ext]',
-                        outputPath: 'popup/images/',
-                        publicPath: './images/',
-                    },
-                }],
-            },
-            {
-                test: /\.scss$/,
-                use: extractCss.extract({
-                    use: [
-                        {
-                            loader: 'css-loader',
-                        },
-                        {
-                            loader: 'sass-loader',
-                        },
-                    ],
-                    publicPath: '../',
-                }),
-            },
-        ],
-    },
-    plugins: [
-        new CleanWebpackPlugin([
-            path.resolve(__dirname, 'build/*'),
-        ]),
-        new AngularCompilerPlugin({
-            tsConfigPath: 'tsconfig.json',
-            entryModule: 'src/popup/app.module#AppModule',
-            sourceMap: true,
-        }),
-        // ref: https://github.com/angular/angular/issues/20357
-        new webpack.ContextReplacementPlugin(/\@angular(\\|\/)core(\\|\/)esm5/,
-            path.resolve(__dirname, './src')),
-        new webpack.optimize.CommonsChunkPlugin({
-            name: 'popup/vendor',
-            chunks: ['popup/main'],
-            minChunks: isVendorModule,
-        }),
-        new webpack.optimize.CommonsChunkPlugin({
-            name: 'vendor',
-            chunks: ['background'],
-            minChunks: isVendorModule,
-        }),
-        new HtmlWebpackPlugin({
-            template: './src/popup/index.html',
-            filename: 'popup/index.html',
-            chunks: ['popup/vendor', 'popup/main'],
-        }),
-        new HtmlWebpackPlugin({
-            template: './src/background.html',
-            filename: 'background.html',
-            chunks: ['vendor', 'background'],
-        }),
-        new HtmlWebpackPlugin({
-            template: './src/notification/bar.html',
-            filename: 'notification/bar.html',
-            chunks: ['notification/bar']
-        }),
-        new HtmlWebpackPlugin({
-            template: './src/downloader/index.html',
-            filename: 'downloader/index.html',
-            chunks: ['downloader/downloader'],
-        }),
-        new HtmlWebpackPlugin({
-            template: './src/2fa/index.html',
-            filename: '2fa/index.html',
-            chunks: ['2fa/2fa'],
-        }),
-        new CopyWebpackPlugin([
-            './src/manifest.json',
-            { from: './src/_locales', to: '_locales' },
-            { from: './src/edge', to: 'edge' },
-            { from: './src/safari', to: 'safari' },
-            { from: './src/images', to: 'images' },
-            { from: './src/popup/images', to: 'popup/images' },
-            { from: './src/content/autofill.css', to: 'content' },
-        ]),
-        new webpack.SourceMapDevToolPlugin({
-            filename: '[name].js.map',
-            include: ['popup/main.js', 'background.js'],
-        }),
-        extractCss,
-        new webpack.DefinePlugin({
-            'process.env': {
-                'ENV': JSON.stringify(ENV)
-            }
-        }),
-    ],
 };
 
 module.exports = config;