Deprecated inject.bundle.js, use redux-devtools-extension.js instead

Author: jhen0409

gulpfile.babel.js

@@ -65,16 +65,27 @@ gulp.task('copy:dev', () => {
  */
 
 gulp.task('webpack:build:extension', (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();
-    });
+  function webpackProcess(config) {
+    return new Promise((resolve, reject) =>
+      webpack(config, (err, stats) => {
+        if (err) {
+          reject(new gutil.PluginError('webpack:build', err));
+        }
+        gutil.log('[webpack:build]', stats.toString({ colors: true }));
+        resolve();
+      })
+    );
   }
-  webpackProcess(wrapConfig, () => { webpackProcess(prodConfig, callback); });
+  webpackProcess(wrapConfig)
+    .then(() => webpackProcess(prodConfig))
+    .then(() => {
+      const dest = './build/extension';
+      fs.rename(
+        `${dest}/js/redux-devtools-extension.bundle.js`,
+        `${dest}/js/redux-devtools-extension.js`,
+        callback
+      );
+    });
 });
 
 gulp.task('views:build:extension', () => {

src/browser/extension/inject/deprecatedWarn.js

@@ -0,0 +1,6 @@
+// Deprecated warning for inject.bundle.js
+const prefix = `chrome-extension://${window.devToolsExtensionID}/js/`;
+console.warn(
+  `Using '${prefix}inject.bundle.js' is deprecated. ` +
+  `Please use '${prefix}redux-devtools-extension.js' instead.`
+);

src/browser/extension/inject/index.js

@@ -1,5 +1,5 @@
 // Include this script in Chrome apps and extensions for remote debugging
-// <script src="chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/js/inject.bundle.js"></script>
+// <script src="chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/js/redux-devtools-extension.js"></script>
 
 window.devToolsExtensionID = 'lmhkpmbekcpmknklioeibfkpmmfibljd';
 require('./contentScript');

src/browser/extension/manifest.json

@@ -52,7 +52,11 @@
     }
   ],
   "devtools_page": "devtools.html",
-  "web_accessible_resources": ["js/page.bundle.js", "js/inject.bundle.js"],
+  "web_accessible_resources": [
+    "js/page.bundle.js",
+    "js/inject.bundle.js",
+    "js/redux-devtools-extension.js"
+  ],
   "externally_connectable": {
     "ids": ["*"]
   },

src/browser/firefox/manifest.json

@@ -60,7 +60,11 @@
       "all_frames": true
     }
   ],
-  "web_accessible_resources": ["js/page.bundle.js", "js/inject.bundle.js"],
+  "web_accessible_resources": [
+    "js/page.bundle.js",
+    "js/inject.bundle.js",
+    "js/redux-devtools-extension.js"
+  ],
   "permissions": ["notifications", "contextMenus", "tabs", "storage", "<all_urls>"],
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'; style-src * 'unsafe-inline'; img-src 'self' data:;"
 }

webpack/base.config.js

@@ -14,7 +14,8 @@ const baseConfig = (params) => ({
     devtools: [ `${extpath}devtools/index` ],
     content: [ mock, `${extpath}inject/contentScript` ],
     pagewrap: [ `${extpath}inject/pageScriptWrap` ],
-    inject: [ `${extpath}inject/index` ],
+    'redux-devtools-extension': [ `${extpath}inject/index` ],
+    inject: [ `${extpath}inject/index`, `${extpath}inject/deprecatedWarn` ],
     ...params.inputExtra
   },
   output: {