CRX: make disabling extension during run optional (#1604)

lighthouse-extension/app/popup.html

@@ -57,8 +57,17 @@ <h2 class="header-titles__url">...</h2>
   </aside>
 
   <aside class="options subpage">
-    <h2 class="options__title">Options</h2>
+    <h2 class="options__title">Settings</h2>
+    <div>
+      <label>
+        <input type="checkbox" class="setting-disable-extensions"
+               value="Disable other extensions while Lighthouse audits a page">Disable other extensions while Lighthouse audits a page.
+      </label>
+    </div>
+
+    <h2 class="options__title">Audit collections to include in report</h2>
     <ul class="options__list">
+      <!-- filled dynamically -->
     </ul>
 
     <button class="button button--ok" id="ok">OK</button>

lighthouse-extension/app/src/lighthouse-background.js

@@ -26,8 +26,10 @@ const log = require('../../../lighthouse-core/lib/log');
 const ReportGenerator = require('../../../lighthouse-core/report/report-generator');
 
 const STORAGE_KEY = 'lighthouse_audits';
+const SETTINGS_KEY = 'lighthouse_settings';
 
 let installedExtensions = [];
+let disableExtensionsDuringRun = false;
 let lighthouseIsRunning = false;
 let latestStatusLog = [];
 
@@ -41,6 +43,10 @@ const _flatten = arr => [].concat(...arr);
  * @param {!Promise}
  */
 function enableOtherChromeExtensions(enable) {
+  if (!disableExtensionsDuringRun) {
+    return Promise.resolve();
+  }
+
   const str = enable ? 'enabling' : 'disabling';
   log.log('Chrome', `${str} ${installedExtensions.length} extensions.`);
 
@@ -251,41 +257,54 @@ window.getDefaultAggregations = function() {
 
 /**
  * Save currently selected set of aggregation categories to local storage.
- * @param {!Array<{name: string, audits: !Array<string>}>} selectedAggregations
+ * @param {{selectedAggregations: !Array<string>, disableExtensions: boolean}} settings
  */
-window.saveSelectedAggregations = function(selectedAggregations) {
+window.saveSettings = function(settings) {
   const storage = {
-    [STORAGE_KEY]: {}
+    [STORAGE_KEY]: {},
+    [SETTINGS_KEY]: {}
   };
 
+  // Stash selected aggregations.
   window.getDefaultAggregations().forEach(audit => {
-    storage[STORAGE_KEY][audit.name] = selectedAggregations.includes(audit.name);
+    storage[STORAGE_KEY][audit.name] = settings.selectedAggregations.includes(audit.name);
   });
 
+  // Stash disable extensionS setting.
+  disableExtensionsDuringRun = settings.disableExtensions;
+  storage[SETTINGS_KEY].disableExtensions = disableExtensionsDuringRun;
+
+  // Save object to chrome local storage.
   chrome.storage.local.set(storage);
 };
 
 /**
  * Load selected aggregation categories from local storage.
- * @return {!Promise<!Object<boolean>>}
+ * @return {!Promise<{selectedAggregations: !Object<boolean>, disableExtensions: boolean}>}
  */
-window.loadSelectedAggregations = function() {
+window.loadSettings = function() {
   return new Promise(resolve => {
-    chrome.storage.local.get(STORAGE_KEY, result => {
+    chrome.storage.local.get([STORAGE_KEY, SETTINGS_KEY], result => {
       // Start with list of all default aggregations set to true so list is
       // always up to date.
       const defaultAggregations = {};
       window.getDefaultAggregations().forEach(aggregation => {
         defaultAggregations[aggregation.name] = true;
       });
 
-      // Load saved aggregation selections.
-      const savedSelections = result[STORAGE_KEY];
+      // Load saved aggregations and settings, overwriting defaults with any
+      // saved selections.
+      const savedAggregations = Object.assign(defaultAggregations, result[STORAGE_KEY]);
 
-      // Overwrite defaults with any saved aggregation selections.
-      resolve(
-        Object.assign(defaultAggregations, savedSelections)
-      );
+      const defaultSettings = {
+        disableExtensions: disableExtensionsDuringRun
+      };
+      const savedSettings = Object.assign(defaultSettings, result[SETTINGS_KEY]);
+
+      resolve({
+        selectedAggregations: savedAggregations,
+        disableExtensions: savedSettings.disableExtensions
+      });
     });
   });
 };

lighthouse-extension/app/src/popup.js

@@ -189,12 +189,14 @@ function initPopup() {
 
     background.listenForStatus(logStatus);
 
-    background.loadSelectedAggregations().then(selectedAggregations => {
-      generateOptionsList(background, selectedAggregations);
+    background.loadSettings().then(settings => {
+      generateOptionsList(background, settings.selectedAggregations);
+
+      document.querySelector('.setting-disable-extensions').checked = settings.disableExtensions;
 
       const generateReportButton = document.getElementById('generate-report');
       generateReportButton.addEventListener('click', () => {
-        onGenerateReportButtonClick(background, selectedAggregations);
+        onGenerateReportButtonClick(background, settings.selectedAggregations);
       });
     });
 
@@ -206,10 +208,12 @@ function initPopup() {
 
     const okButton = document.getElementById('ok');
     okButton.addEventListener('click', () => {
-      // Save selected aggregation categories on options page close.
-      const checkedAggregations = Array.from(optionsEl.querySelectorAll(':checked'))
+      // Save settings when options page is closed.
+      const selectedAggregations = Array.from(optionsEl.querySelectorAll(':checked'))
           .map(input => input.value);
-      background.saveSelectedAggregations(checkedAggregations);
+      const disableExtensions = document.querySelector('.setting-disable-extensions').checked;
+
+      background.saveSettings({selectedAggregations, disableExtensions});
 
       optionsEl.classList.remove(subpageVisibleClass);
     });

lighthouse-extension/app/styles/lighthouse.css

@@ -216,15 +216,14 @@ html, body {
 .options {
   overflow: auto; /* [1] */
   display: block;
+  text-align: left;
 }
 
 .options__title {
-  margin: 0 auto;
   font-weight: 300;
 }
 
 .options__list {
   padding: 0;
   list-style: none;
-  text-align: left;
 }