Inject script as a string in order to avoid delay in loading

Author: zalmoxisus

gulpfile.babel.js

@@ -7,6 +7,7 @@ import zip from 'gulp-zip';
 import webpack from 'webpack';
 import devConfig from './webpack/dev.config';
 import prodConfig from './webpack/prod.config';
+import wrapConfig from './webpack/wrap.config';
 
 /*
  * common tasks
@@ -56,13 +57,16 @@ gulp.task('copy:dev', () => {
  */
 
 gulp.task('webpack:build:extension', (callback) => {
-  webpack(prodConfig, (err, stats) => {
-    if (err) {
-      throw new gutil.PluginError('webpack:build', err);
-    }
-    gutil.log('[webpack:build]', stats.toString({ colors: true }));
-    callback();
-  });
+  function webpackProcess(config, next) {
+    webpack(config, (err, stats) => {
+      if (err) {
+        throw new gutil.PluginError('webpack:build', err);
+      }
+      gutil.log('[webpack:build]', stats.toString({ colors: true }));
+      next();
+    });
+  }
+  webpackProcess(wrapConfig, () => { webpackProcess(prodConfig, callback); });
 });
 
 gulp.task('views:build:extension', () => {

src/browser/extension/inject/pageScriptWrap.js

@@ -1,5 +1,13 @@
 let s = document.createElement('script');
-s.src = chrome.extension.getURL('js/page.bundle.js');
+
+if (process.env.NODE_ENV === 'production') {
+  const script = require('raw!tmp/page.bundle.js');
+  s.appendChild(document.createTextNode(script));
+} else {
+  s.src = chrome.extension.getURL('js/page.bundle.js');
+}
+
+s.type = 'text/javascript';
 s.onload = function() {
   this.parentNode.removeChild(this);
 };

webpack/base.config.js

@@ -11,7 +11,6 @@ const baseConfig = (params) => ({
     devpanel: [ `${extpath}devpanel/index` ],
     devtools: [ `${extpath}devtools/index` ],
     content: [ `${extpath}inject/contentScript` ],
-    page: [ `${extpath}inject/pageScript` ],
     pagewrap: [ `${extpath}inject/pageScriptWrap` ],
     inject: [ `${extpath}inject/index` ],
     ...params.inputExtra

webpack/dev.config.js

@@ -3,6 +3,7 @@ import webpack from 'webpack';
 import baseConfig from './base.config';
 
 let config = baseConfig({
+  inputExtra: { page: [ path.join(__dirname, '../src/browser/extension/inject/pageScript') ] },
   output: { path: path.join(__dirname, '../dev/js') },
   globals: {
     'process.env': {

webpack/wrap.config.js

@@ -0,0 +1,13 @@
+import path from 'path';
+import webpack from 'webpack';
+import baseConfig from './base.config';
+
+export default baseConfig({
+  input: { page: [ path.join(__dirname, '../src/browser/extension/inject/pageScript') ] },
+  output: { path: path.join(__dirname, '../build/tmp') },
+  globals: {
+    'process.env': {
+      NODE_ENV: '"production"'
+    }
+  }
+});