#3 Automatic injection is working

cubbles · May 23, 2019 · c4b1370 · c4b1370
1 parent 90e8374
commit c4b1370
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 16 deletions.
diff --git a/cubx_injector_sidebar.html b/cubx_injector_sidebar.html
@@ -15,6 +15,14 @@
   <body>
     <div id="mainContainer">
       <h5>Load/Save config</h5>
+      <div class="form-check form-check-inline">
+        <input
+          class="form-check-input"
+          type="checkbox"
+          id="loadAfterLoadCB"
+        />
+        <label class="form-check-label" for="loadAfterLoadCB">Automatic injection</label>
+      </div>
       <div>
         <label>Use a external file:</label>
         <div class="btn-group btn-group-sm">

diff --git a/lib/cubx_injector_devtools.js b/lib/cubx_injector_devtools.js
@@ -9,6 +9,7 @@
     tabUpdated: 'tab-updated'
   }
   let injectionPending = false;
+  let currentUrl = '';
 
   /**
    * Post a message to the background script
@@ -65,17 +66,18 @@
   /**
    * Create the cubbles web inspector tab, and the Cubbles sidebar within the elements tab
    */
-  function createSabebarPage() {
+  function createSibebarPage() {
     chrome.devtools.panels.elements.createSidebarPane('Cubbles Injector', function(sidebar) {
       cubblesSidepanel = sidebar;
       sidebar.setPage('cubx_injector_sidebar.html');
 
-      sidebar.onShown.addListener(function(window) {
+      sidebar.onShown.addListener(function(sideBarWindow) {
         if (firstTimeCubblesSidebar) {
-          cubblesSidepanel.window = window;
-          window.postMessageToBackgroundScript = function(name, content) {
+          cubblesSidepanel.window = sideBarWindow;
+          sideBarWindow.postMessageToBackgroundScript = function(name, content) {
             postMessageToBackgroundScript(name, content);
           };
+          sideBarWindow.performAutoInjection();
           firstTimeCubblesSidebar = false;
         }
         cubblesSidebarIsVisible = true;
@@ -87,7 +89,14 @@
     });
   }
 
-  createSabebarPage();
+  chrome.devtools.network.onNavigated.addListener(function(url){
+    if (url !== currentUrl) {
+      cubblesSidepanel.window.performAutoInjection();
+      currentUrl = url;
+    }
+  });
+
+  createSibebarPage();
   initBackgroundConnection();
   postExecuteContentScript();
 })();
diff --git a/lib/cubx_injector_sidebar.js b/lib/cubx_injector_sidebar.js
@@ -21,7 +21,8 @@
     resetBtn: 'resetBtn',
     useInspectedElementBtn: 'useInspectedElementBtn',
     htmlSnippetName: 'htmlSnippetName',
-    positionGroupName: 'whereToInsertRB'
+    positionGroupName: 'whereToInsertRB',
+    loadAfterLoadCB: 'loadAfterLoadCB',
   };
   const ELEMENTS_CLASSES = {
     urlInput: 'url-input',
@@ -58,7 +59,10 @@
     addSnippet: 'addSnippet',
   };
   const RTE_START_EVENT = 'cubblesInjectionReady';
-  const LOCAL_STORAGE_KEY = 'cubbles-injector-config';
+  const LOCAL_STORAGE_KEYS = {
+    config: 'cubbles-injector-config',
+    autoInjectFlag: 'automatic-injection'
+  };
   const TYPES = {
     script: 'script',
     snippet: 'snippet'
@@ -87,6 +91,17 @@
     }, 1000);
   };
 
+  window.performAutoInjection = function () {
+    if (shouldAutoInject()) {
+      loadLocalStorageConfig();
+    }
+  }
+
+  function startInjection() {
+    window.postMessageToBackgroundScript(MESSAGES_IDS.injectionPending);
+    chrome.devtools.inspectedWindow.reload();
+  }
+
   function initEditor() {
     editor = CodeMirror.fromTextArea(document.getElementById(ELEMENTS_IDS.editorId), {
       lineNumbers: true,
@@ -165,13 +180,13 @@
   }
 
   function saveConfig() {
-    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(extractCurrentConfig()));
+    localStorage.setItem(LOCAL_STORAGE_KEYS.config, JSON.stringify(extractCurrentConfig()));
   }
 
   function saveConfigToFile() {
     let content = JSON.stringify(extractCurrentConfig(), null, ' ');
     let blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
-    saveAs(blob, `${LOCAL_STORAGE_KEY}.json`);
+    saveAs(blob, `${LOCAL_STORAGE_KEYS.config}.json`);
   }
 
   function importConfig(file) {
@@ -185,7 +200,7 @@
   }
 
   function loadLocalStorageConfig() {
-    loadConfig(JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)));
+    loadConfig(JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEYS.config)));
   }
 
   function loadConfig(config) {
@@ -204,6 +219,9 @@
         });
       }
     });
+    if (shouldAutoInject()) {
+      startInjection();
+    }
   }
 
   function readSingleFile(file) {
@@ -514,7 +532,19 @@
     });
   }
 
-  function addListeners() {
+  function saveAutoInjectionFlag (isAutomatic) {
+    localStorage.setItem(LOCAL_STORAGE_KEYS.autoInjectFlag, isAutomatic);
+  }
+
+  function shouldAutoInject () {
+    return JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEYS.autoInjectFlag));
+  }
+
+  function loadAutoFlagValue () {
+    document.getElementById(ELEMENTS_IDS.loadAfterLoadCB).checked = shouldAutoInject();
+  }
+
+  function addListeners () {
     document.getElementById(ELEMENTS_IDS.addScriptBtn).addEventListener('click', addNewScript);
 
     document
@@ -530,8 +560,7 @@
       .addEventListener('click', closeCodeEditor);
 
     document.getElementById(ELEMENTS_IDS.finishBtn).addEventListener('click', function() {
-      window.postMessageToBackgroundScript(MESSAGES_IDS.injectionPending);
-      chrome.devtools.inspectedWindow.reload();
+      startInjection();
     });
 
     document.getElementById(ELEMENTS_IDS.saveConfigBtn).addEventListener('click', saveConfig);
@@ -557,9 +586,21 @@
     document.getElementById(ELEMENTS_IDS.importConfigBtn).addEventListener('click', function(e) {
       document.getElementById(ELEMENTS_IDS.importConfigHiddenBtn).click();
     });
+
+    document.getElementById(ELEMENTS_IDS.loadAfterLoadCB).addEventListener('change', function () {
+      saveAutoInjectionFlag(this.checked);
+      if (this.checked) {
+        saveConfig();
+      }
+    });
+  }
+
+  function init () {  
+    initEditor();
+    addListeners();
+    addDefaultScripts();
+    loadAutoFlagValue();
   }
 
-  initEditor();
-  addListeners();
-  addDefaultScripts();
+  init();
 })();