fix: don't use localStorage when browser blocks access (#287)

Author: marcosvega91

devtools/src/devtools/lib/settings.js

@@ -1,6 +1,9 @@
 import Bridge from 'crx-bridge';
 
-const localSettings = JSON.parse(localStorage.getItem('playground_settings'));
+const localSettings = navigator.cookieEnabled
+  ? JSON.parse(localStorage.getItem('playground_settings'))
+  : {};
+
 let _settings = Object.assign(
   {
     testIdAttribute: 'data-testid',
@@ -17,5 +20,7 @@ export function getSettings() {
 export function setSettings(settings) {
   Object.assign(_settings, settings);
   Bridge.sendMessage('SET_SETTINGS', _settings, 'content-script');
-  localStorage.setItem('playground_settings', JSON.stringify(_settings));
+  if (navigator.cookieEnabled) {
+    localStorage.setItem('playground_settings', JSON.stringify(_settings));
+  }
 }

src/components/Settings.js

@@ -22,9 +22,18 @@ function Settings({ settings, dispatch }) {
 
   const showBehavior = typeof settings.autoRun !== 'undefined';
   const showTestingLibrary = typeof settings.testIdAttribute !== 'undefined';
+  const isCookieEanbled = navigator.cookieEnabled;
 
   return (
-    <div className="settings text-sm pb-2">
+    <div className="settings text-sm pb-2 ">
+      {!isCookieEanbled && (
+        <p
+          className="text-sm font-bold text-orange-600 border border-orange-600 px-3 py-1"
+          role="alert"
+        >
+          Cookie are not enabled, settings will not be saved.
+        </p>
+      )}
       <form onChange={handleChange} onSubmit={(e) => e.preventDefault()}>
         {showBehavior && (
           <div>

src/hooks/usePlayground.js

@@ -207,7 +207,12 @@ const effectMap = {
   },
 
   SAVE_SETTINGS: (state) => {
-    localStorage.setItem('playground_settings', JSON.stringify(state.settings));
+    if (navigator.cookieEnabled) {
+      localStorage.setItem(
+        'playground_settings',
+        JSON.stringify(state.settings),
+      );
+    }
   },
 
   APPLY_SETTINGS: (state, effect, dispatch) => {
@@ -259,7 +264,9 @@ const effectMap = {
 };
 
 function getInitialState(props) {
-  const localSettings = JSON.parse(localStorage.getItem('playground_settings'));
+  const localSettings = navigator.cookieEnabled
+    ? JSON.parse(localStorage.getItem('playground_settings'))
+    : {};
 
   const state = {
     ...props,

src/lib/logger.js

@@ -71,7 +71,8 @@ function renderDiff(diff) {
 // when debug is `undefined` and can be enabled by setting it to either `true`
 // or `diff`. On develop, it's enabled when `undefined`, and can be disabled
 // by setting it to `false`.
-const debug = localStorage.getItem('debug');
+const debug = navigator.cookieEnabled ? localStorage.getItem('debug') : 'false';
+
 const logLevel = debug === 'false' ? false : debug === 'true' ? true : debug;
 const isLoggingEnabled =
   process.env.NODE_ENV === 'development' ? logLevel !== false : !!logLevel;