Inject the script before getting options

Fix #22.

Author: zalmoxisus

src/browser/extension/inject/contentScript.js

@@ -3,65 +3,60 @@ import { getOptionsFromBg, isAllowed } from '../options/syncOptions';
 let payload;
 let sendMessage;
 
-getOptionsFromBg(options => {
-  if (!isAllowed()) return;
-
-  // Relay background script massages to the page script
-  onMessage((message) => {
-    if (message.action) {
-      window.postMessage({
-        type: 'ACTION',
-        payload: message.action,
-        source: 'redux-cs'
-      }, '*');
-    }
-  });
-
-  if (window.devToolsExtensionID) { // Send external messages
-    sendMessage = function(message) {
-      chrome.runtime.sendMessage(window.devToolsExtensionID, message);
-    };
-  } else {
-    sendMessage = sendToBg;
-
-    let s = document.createElement('script');
-    s.type = 'text/javascript';
-    s.appendChild(document.createTextNode('window.devToolsOptions=' + JSON.stringify(options)));
-    (document.head || document.documentElement).appendChild(s);
-
-    s = document.createElement('script');
-    s.src = chrome.extension.getURL('js/page.bundle.js');
-    s.onload = function() {
-      this.parentNode.removeChild(this);
-    };
-    (document.head || document.documentElement).appendChild(s);
+getOptionsFromBg();
+
+// Relay background script massages to the page script
+onMessage((message) => {
+  if (message.action) {
+    window.postMessage({
+      type: 'ACTION',
+      payload: message.action,
+      source: 'redux-cs'
+    }, '*');
   }
+});
 
-  // Resend messages from the page to the background script
-  window.addEventListener('message', function(event) {
-    if (!event || event.source !== window || typeof event.data !== 'object') return;
-    const message = event.data;
-    if (message.source !== 'redux-page') return;
-    if (message.payload) payload = message.payload;
-    sendMessage(message);
-  }, false);
-
-  if (typeof window.onbeforeunload !== 'undefined') {
-    // Prevent adding beforeunload listener for Chrome apps
-    window.onbeforeunload = function() {
-      sendMessage({ type: 'PAGE_UNLOADED' });
-    };
+if (window.devToolsExtensionID) { // Send external messages
+  sendMessage = function(message) {
+    chrome.runtime.sendMessage(window.devToolsExtensionID, message);
+  };
+} else {
+  sendMessage = sendToBg;
+
+  let s = document.createElement('script');
+  s.src = chrome.extension.getURL('js/page.bundle.js');
+  s.onload = function() {
+    this.parentNode.removeChild(this);
+  };
+  (document.head || document.documentElement).appendChild(s);
+}
+
+// Resend messages from the page to the background script
+window.addEventListener('message', function(event) {
+  if (!isAllowed()) return;
+  if (!event || event.source !== window || typeof event.data !== 'object') return;
+  const message = event.data;
+  if (message.source !== 'redux-page') return;
+  if (message.payload) payload = message.payload;
+  sendMessage(message);
+}, false);
+
+if (typeof window.onbeforeunload !== 'undefined') {
+  // Prevent adding beforeunload listener for Chrome apps
+  window.onbeforeunload = function() {
+    if (!isAllowed()) return;
+    sendMessage({ type: 'PAGE_UNLOADED' });
+  };
+}
+
+// Detect when the tab is reactivated
+document.addEventListener('visibilitychange', function() {
+  if (!isAllowed()) return;
+  if (document.visibilityState === 'visible' && payload) {
+    sendMessage({
+      payload: payload,
+      source: 'redux-page',
+      init: true
+    });
   }
-
-  // Detect when the tab is reactivated
-  document.addEventListener('visibilitychange', function() {
-    if (document.visibilityState === 'visible' && payload) {
-      sendMessage({
-        payload: payload,
-        source: 'redux-page',
-        init: true
-      });
-    }
-  }, false);
-
-});
+}, false);

src/browser/extension/inject/pageScript.js

@@ -1,9 +1,11 @@
 import stringify from 'json-stringify-safe';
 import configureStore from '../../../app/store/configureStore';
 import { ACTION, UPDATE, OPTIONS, COMMIT } from '../../../app/constants/ActionTypes';
+import { isAllowed } from '../options/syncOptions';
+
 
 window.devToolsInit = function(store) {
-  const options = window.devToolsOptions;
+  const options = window.devToolsOptions || {};
   let timeout = { id: null, last: 0};
 
   function doChange(init) {
@@ -13,7 +15,7 @@ window.devToolsInit = function(store) {
       return;
     }
     window.postMessage({
-      payload: options.serialize ? stringify(state) : state,
+      payload: typeof options.serialize === 'undefined' || options.serialize ? stringify(state) : state,
       source: 'redux-page',
       init: init || false
     }, '*');
@@ -72,6 +74,8 @@ window.devToolsExtension = function(next) {
   }
   return (next) => {
     return (reducer, initialState) => {
+      if (!isAllowed(window.devToolsOptions)) return next(reducer, initialState);
+
       const store = configureStore(next)(reducer, initialState);
       devToolsInit(store);
       return store;

src/browser/extension/options/syncOptions.js

@@ -28,15 +28,26 @@ const get = callback => {
   }
 };
 
+const injectOptions = () => {
+  let s = document.createElement('script');
+  s.type = 'text/javascript';
+  s.appendChild(document.createTextNode('window.devToolsOptions=' + JSON.stringify(options)));
+  s.onload = function() {
+    this.parentNode.removeChild(this);
+  };
+  (document.head || document.documentElement).appendChild(s);
+};
+
 export const getOptionsFromBg = callback => {
   chrome.runtime.sendMessage({ type: 'GET_OPTIONS' }, response => {
     options = response.options;
-    callback(response.options);
+    if (callback) callback(response.options);
+    else injectOptions();
   });
 };
 
-export const isAllowed = () => (
-  !options || !options.inject && location.href.match(options.urls.split('\n').join('|'))
+export const isAllowed = (localOptions = options) => (
+  !localOptions || !localOptions.inject && location.href.match(localOptions.urls.split('\n').join('|'))
 );
 
 export default {