Add fake chrome.* API for Electron

src/app/containers/App.js

@@ -22,23 +22,15 @@ let initialMonitor;
 let selectedTemplate;
 let testTemplates;
 
-// Electron: Not supported some chrome.* API
-if (chrome.storage.local) {
-  chrome.storage.local.get({
-    ['monitor' + monitorPosition]: 'InspectorMonitor',
-    'test-templates': null,
-    'test-templates-sel': null
-  }, options => {
-    initialMonitor = options['monitor' + monitorPosition];
-    selectedTemplate = options['test-templates-sel'];
-    testTemplates = options['test-templates'];
-  });
-} else {
-  initialMonitor = localStorage.getItem('monitor' + monitorPosition) || 'InspectorMonitor';
-  selectedTemplate = localStorage.getItem('test-templates-sel');
-  testTemplates = localStorage.getItem('test-templates');
-}
-
+chrome.storage.local.get({
+  ['monitor' + monitorPosition]: 'InspectorMonitor',
+  'test-templates': null,
+  'test-templates-sel': null
+}, options => {
+  initialMonitor = options['monitor' + monitorPosition];
+  selectedTemplate = options['test-templates-sel'];
+  testTemplates = options['test-templates'];
+});
 
 @enhance
 export default class App extends Component {
@@ -64,12 +56,7 @@ export default class App extends Component {
   handleSelectMonitor = (event, index, value) => {
     this.setState({ monitor: value });
 
-    // Electron: Not supported some chrome.* API
-    if (chrome.storage.local) {
-      chrome.storage.local.set({ ['monitor' + monitorPosition]: value });
-    } else {
-      localStorage.setItem('monitor' + monitorPosition, value);
-    }
+    chrome.storage.local.set({ ['monitor' + monitorPosition]: value });
   };
 
   handleSelectInstance = (event, index, value) => {
@@ -93,7 +80,6 @@ export default class App extends Component {
     const { store } = this.props;
     const instances = store.instances;
     const { instance, monitor } = this.state;
-    const onElectron = navigator.userAgent.indexOf('Electron') !== -1;
     return (
       <div style={styles.container}>
           <div style={styles.buttonBar}>
@@ -118,19 +104,19 @@ export default class App extends Component {
           />
         }
         <div style={styles.buttonBar}>
-          {!onElectron && monitorPosition !== 'left' &&
+          {!window.isElectron && monitorPosition !== 'left' &&
             <Button
               Icon={LeftIcon}
               onClick={() => { this.openWindow('left'); }}
             />
           }
-          {!onElectron && monitorPosition !== 'right' &&
+          {!window.isElectron && monitorPosition !== 'right' &&
             <Button
               Icon={RightIcon}
               onClick={() => { this.openWindow('right'); }}
             />
           }
-          {!onElectron && monitorPosition !== 'bottom' &&
+          {!window.isElectron && monitorPosition !== 'bottom' &&
             <Button
               Icon={BottomIcon}
               onClick={() => { this.openWindow('bottom'); }}
@@ -142,7 +128,7 @@ export default class App extends Component {
           <SliderButton isOpen={this.state.sliderIsOpen} onClick={this.toggleSlider} />
           <ImportButton importState={store.liftedStore.importState} />
           <ExportButton exportState={store.liftedStore.getState} />
-          {!onElectron &&
+          {!window.isElectron &&
             <Button
               Icon={RemoteIcon}
               onClick={() => { this.openWindow('remote'); }}

src/browser/extension/background/messaging.js

@@ -40,16 +40,13 @@ function messaging(request, sender, sendResponse) {
       return true;
     }
     if (request.type === 'ERROR') {
-      // Electron: Not supported some chrome.* API
-      if (chrome.notifications) {
-        chrome.notifications.create('app-error', {
-          type: 'basic',
-          title: 'An error occurred in the app',
-          message: request.message,
-          iconUrl: 'img/logo/48x48.png',
-          isClickable: false
-        });
-      }
+      chrome.notifications.create('app-error', {
+        type: 'basic',
+        title: 'An error occurred in the app',
+        message: request.message,
+        iconUrl: 'img/logo/48x48.png',
+        isClickable: false
+      });
       return true;
     }
 
@@ -155,22 +152,14 @@ function onConnect(port) {
 }
 
 chrome.runtime.onConnect.addListener(onConnect);
+chrome.runtime.onConnectExternal.addListener(onConnect);
 chrome.runtime.onMessage.addListener(messaging);
+chrome.runtime.onMessageExternal.addListener(messaging);
 
-// Electron: Not supported some chrome.* API
-if (chrome.runtime.onConnectExternal) {
-  chrome.runtime.onConnectExternal.addListener(onConnect);
-}
-if (chrome.runtime.onMessageExternal) {
-  chrome.runtime.onMessageExternal.addListener(messaging);
-}
-
-if (chrome.notifications) {
-  chrome.notifications.onClicked.addListener(id => {
-    chrome.notifications.clear(id);
-    if (id === 'redux-error') openDevToolsWindow('devtools-right');
-  });
-}
+chrome.notifications.onClicked.addListener(id => {
+  chrome.notifications.clear(id);
+  if (id === 'redux-error') openDevToolsWindow('devtools-right');
+});
 
 export function toContentScript(type, action, id, state) {
   const message = { type, action, state, id };

src/browser/extension/electronMock.js

@@ -0,0 +1,46 @@
+// Electron: Not supported some chrome.* API
+
+window.isElectron = window.navigator &&
+  window.navigator.userAgent.indexOf('Electron') !== -1;
+
+// Background page only
+if (
+  window.isElectron &&
+  location.pathname === '/_generated_background_page.html'
+) {
+  chrome.runtime.onConnectExternal = {
+    addListener() {}
+  };
+  chrome.runtime.onMessageExternal = {
+    addListener() {}
+  };
+  chrome.notifications = {
+    onClicked: {
+      addListener() {}
+    },
+    create() {},
+    clear() {}
+  };
+}
+
+if (window.isElectron) {
+  chrome.storage.local = {
+    set(obj, callback) {
+      Object.keys(obj).forEach(key => {
+        localStorage.setItem(key, obj[key]);
+      });
+      if (callback) {
+        callback();
+      }
+    },
+    get(obj, callback) {
+      const result = {};
+      Object.keys(obj).forEach(key => {
+        result[key] = localStorage.getItem(key) || obj[key];
+      });
+      if (callback) {
+        callback(result);
+      }
+    }
+  };
+}

webpack/base.config.js

@@ -2,14 +2,15 @@ import path from 'path';
 import webpack from 'webpack';
 
 const extpath = path.join(__dirname, '../src/browser/extension/');
+const electronMock = `${extpath}electronMock`;
 
 const baseConfig = (params) => ({
   entry: params.input || {
-    background: [ `${extpath}background/index` ],
+    background: [ electronMock, `${extpath}background/index` ],
     options: [ `${extpath}options/index` ],
     window: [ `${extpath}window/index` ],
     remote: [ `${extpath}window/remote` ],
-    devpanel: [ `${extpath}devpanel/index` ],
+    devpanel: [ electronMock, `${extpath}devpanel/index` ],
     devtools: [ `${extpath}devtools/index` ],
     content: [ `${extpath}inject/contentScript` ],
     pagewrap: [ `${extpath}inject/pageScriptWrap` ],