Merge pull request #237 from jhen0409/patch-7

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

Author: zalmoxisus

docs/FAQ.md

@@ -49,7 +49,7 @@ Just add `?debug_session=<session_name>` to the url.
 #### How to include it in chrome apps and extensions
 Unlike web apps, Chrome extension doesn't inject anything in other chrome extensions or apps, so you have to do it by yourself to allow debugging. Just add:
 ```
-<script src="chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/js/inject.bundle.js"></script>
+<script src="chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/js/redux-devtools-extension.js"></script>
 ```
 To include it in a chrome extension's content script follow [the example](https://github.com/zalmoxisus/browser-redux/commit/df2db9ee11f2d197c4329b2c8a6e197da1edffd4). 
 #### How to open DevTools programmatically

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: {