Added New Theme Options

.gitignore

@@ -5,4 +5,4 @@ build/*
 .vscode
 dist
 dist/*
-.DS_Store
+.DS_Store

app/Containers/AppContainer.tsx

@@ -6,7 +6,7 @@ const AppContainer = () => {
   const [jsonPath, setJsonPath] = React.useState('');
   const path = useDebounce(jsonPath, 500);
 
-  const handleJSONPathInput = e => {
+  const handleJSONPathInput = (e) => {
     setJsonPath(e.target.value);
   };
 

app/index.tsx

@@ -25,16 +25,28 @@ window.onload = () => {
     document.body.appendChild(snackbar);
 
     if (chrome.runtime) {
-      const stylesURL = chrome.runtime.getURL('/styles.css');
+      const stylesURL = chrome.runtime.getURL('styles.css');
+
       const style = document.createElement('link');
       style.setAttribute('rel', 'stylesheet');
       style.setAttribute('href', stylesURL);
       document.head.append(style);
+
+      chrome.storage.sync.get(['pallet'], ({ pallet: theme }) => {
+        if (!theme || !theme.pallet) {
+          return;
+        }
+
+        Object.keys(theme.pallet).forEach((name) => {
+          const color = theme.pallet[name];
+          document.documentElement.style.setProperty(`--${name}`, color);
+        });
+      });
     }
 
     ReactDOM.render(<AppContainer />, document.getElementById('root'));
     // tslint:disable-next-line: no-empty
   } catch (_) {
-    console.log(_);
+    // console.log(_);
   }
 };

manifest.json

@@ -2,7 +2,7 @@
   "name": "Seven JSON Viewer",
   "description": "Minimal JSON Viewer with JSON Path",
   "short_name": "JSON Viewer",
-  "version": "2.1",
+  "version": "3.0",
   "offline_enabled": true,
   "manifest_version": 2,
   "content_scripts": [
@@ -14,12 +14,21 @@
     }
   ],
   "content_security_policy": "sandbox allow-scripts; script-src 'self'; object-src 'none';",
-  "permissions": ["tabs", "activeTab"],
+  "permissions": ["tabs", "activeTab", "storage"],
   "web_accessible_resources": ["styles.css", "app.js"],
   "icons": {
     "16": "assets/icon-16.png",
     "48": "assets/icon-48.png",
     "128": "assets/icon-128.png",
     "512": "assets/icon-512.png"
+  },
+  "browser_action": {
+    "default_popup": "index.html",
+    "default_icon": {
+      "16": "assets/icon-16.png",
+      "48": "assets/icon-48.png",
+      "128": "assets/icon-128.png",
+      "512": "assets/icon-512.png"
+    }
   }
 }