Included omni theme

README.md

@@ -8,33 +8,33 @@ The most beautiful and customizable JSON/JSONP highlighter that your eyes have e
 
 Notes:
 
-* This extension might crash with other JSON highlighters/formatters, you may need to disable them
-* To highlight local files and incognito tabs you have to manually enable these options on the extensions page
-* Sometimes when the plugin updates chrome leaves the old background process running and revokes some options, like the access to local files. When this happen just recheck the option that everything will work again
-* Works on local files (if you enable this in chrome://extensions)
+- This extension might crash with other JSON highlighters/formatters, you may need to disable them
+- To highlight local files and incognito tabs you have to manually enable these options on the extensions page
+- Sometimes when the plugin updates chrome leaves the old background process running and revokes some options, like the access to local files. When this happen just recheck the option that everything will work again
+- Works on local files (if you enable this in chrome://extensions)
 
 Features:
 
-* Syntax highlighting
-* 27 built-in themes
-* Collapsible nodes
-* Clickable URLs (optional)
-* URL does not matter (the content is analysed to determine if its a JSON or not)
-* Inspect your json typing "json" in the console
-* Hot word `json-viewer` into omnibox (type `json-viewer` + TAB and paste your JSON into omnibox, hit ENTER and it will be highlighted)
-* Toggle button to view the raw/highlighted version
-* Works with numbers bigger than Number.MAX_VALUE
-* Option to show line numbers
-* Option to customize your theme
-* Option to customize the tab size
-* Option to configure a max JSON size to highlight
-* Option to collapse nodes from second level + Button to unfold all collapsed nodes
-* Option to include a header with timestamp + url
-* Option to allow the edition of the loaded JSON
-* Option to sort json by keys
-* Option to disable auto highlight
-* Option for C-style braces and arrays
-* Scratch pad, a new area which you can type/paste JSON and format indefinitely using a button or key shortcut. To access type `json-viewer` + `TAB` + `scratch pad` ENTER
+- Syntax highlighting
+- 27 built-in themes
+- Collapsible nodes
+- Clickable URLs (optional)
+- URL does not matter (the content is analysed to determine if its a JSON or not)
+- Inspect your json typing "json" in the console
+- Hot word `json-viewer` into omnibox (type `json-viewer` + TAB and paste your JSON into omnibox, hit ENTER and it will be highlighted)
+- Toggle button to view the raw/highlighted version
+- Works with numbers bigger than Number.MAX_VALUE
+- Option to show line numbers
+- Option to customize your theme
+- Option to customize the tab size
+- Option to configure a max JSON size to highlight
+- Option to collapse nodes from second level + Button to unfold all collapsed nodes
+- Option to include a header with timestamp + url
+- Option to allow the edition of the loaded JSON
+- Option to sort json by keys
+- Option to disable auto highlight
+- Option for C-style braces and arrays
+- Scratch pad, a new area which you can type/paste JSON and format indefinitely using a button or key shortcut. To access type `json-viewer` + `TAB` + `scratch pad` ENTER
 
 ## Installation
 
@@ -44,36 +44,36 @@ Features:
 
 ### Or compile and load by yourself
 
-  1. It depends on node (version in `package.json` engines).
-  2. `npm install --global yarn`
-  2. `yarn install`
-  3. `yarn run build`
-  4. Open Chrome and go to: chrome://extensions/
-  5. Enable: "Developer mode"
-  6. Click: "Load unpacked extension"
-  7. Select: "build/json_viewer" directory.
+1. Use node `v12.22.12`
+2. `npm install --global yarn`
+3. `yarn install`
+4. `yarn run build`
+5. Open Chrome and go to: chrome://extensions/
+6. Enable: "Developer mode"
+7. Click: "Load unpacked extension"
+8. Select: "build/json_viewer" directory.
 
 ## Try it on
 
 ### JSON
 
-  [https://api.github.com/repos/tulios/json-viewer](https://api.github.com/repos/tulios/json-viewer)
+[https://api.github.com/repos/tulios/json-viewer](https://api.github.com/repos/tulios/json-viewer)
 
-  [http://graph.facebook.com/github](http://graph.facebook.com/github)
+[http://graph.facebook.com/github](http://graph.facebook.com/github)
 
-  [https//api.github.com](https://api.github.com)
+[https//api.github.com](https://api.github.com)
 
-  [https://api.github.com/gists/public](https://api.github.com/gists/public)
+[https://api.github.com/gists/public](https://api.github.com/gists/public)
 
-  Large files:
+Large files:
 
-  [https://raw.githubusercontent.com/ebrelsford/geojson-examples/master/596acres-02-18-2014.geojson](https://raw.githubusercontent.com/ebrelsford/geojson-examples/master/596acres-02-18-2014.geojson)
+[https://raw.githubusercontent.com/ebrelsford/geojson-examples/master/596acres-02-18-2014.geojson](https://raw.githubusercontent.com/ebrelsford/geojson-examples/master/596acres-02-18-2014.geojson)
 
-  [https://api.takealot.com/rest/v-1-4-2/productlines?available=1&cat=10371&instock=1&rows=10&sort=score%20desc&start=0](https://api.takealot.com/rest/v-1-4-2/productlines?available=1&cat=10371&instock=1&rows=10&sort=score%20desc&start=0)
+[https://api.takealot.com/rest/v-1-4-2/productlines?available=1&cat=10371&instock=1&rows=10&sort=score%20desc&start=0](https://api.takealot.com/rest/v-1-4-2/productlines?available=1&cat=10371&instock=1&rows=10&sort=score%20desc&start=0)
 
 ### JSONP
 
-  [http://freemusicarchive.org/api/get/curators.jsonp?api_key=60BLHNQCAOUFPIBZ&callback=test](http://freemusicarchive.org/api/get/curators.jsonp?api_key=60BLHNQCAOUFPIBZ&callback=test)
+[http://freemusicarchive.org/api/get/curators.jsonp?api_key=60BLHNQCAOUFPIBZ&callback=test](http://freemusicarchive.org/api/get/curators.jsonp?api_key=60BLHNQCAOUFPIBZ&callback=test)
 
 ## License
 

extension/themes/dark/catppuccin.js

@@ -0,0 +1,2 @@
+require('./catppuccin/catppuccin.theme.css');
+require('./catppuccin/catppuccin.scss');

extension/themes/dark/catppuccin/catppuccin.scss

@@ -0,0 +1,16 @@
+.theme-catppuccin-css-check:before {
+  content: "loaded";
+  display: none;
+}
+
+.extras {
+  .icon {
+    svg {
+      fill: #fff;
+    }
+
+    &:hover {
+      background-color: #666;
+    }
+  }
+}

extension/themes/dark/catppuccin/catppuccin.theme.css

@@ -0,0 +1,112 @@
+.cm-s-catppuccin.CodeMirror,
+.cm-s-catppuccin .CodeMirror-gutters {
+  background-color: #303446 !important;
+  color: #EF9F76 !important;
+  border: none;
+}
+
+.cm-s-catppuccin .CodeMirror-gutters {
+  color: #f2d5cf;
+}
+
+.cm-s-catppuccin .CodeMirror-cursor {
+  border-left: solid thin #EF9F76;
+}
+
+.cm-s-catppuccin .CodeMirror-linenumber {
+  color: #ca9ee6;
+}
+
+.cm-s-catppuccin.CodeMirror-focused div.CodeMirror-selected {
+  background: rgba(231, 130, 132, 0.10);
+}
+
+.cm-s-catppuccin .CodeMirror-line::selection,
+.cm-s-catppuccin .CodeMirror-line>span::selection,
+.cm-s-catppuccin .CodeMirror-line>span>span::selection {
+  background: rgba(231, 130, 132, 0.10);
+}
+
+.cm-s-catppuccin .CodeMirror-line::-moz-selection,
+.cm-s-catppuccin .CodeMirror-line>span::-moz-selection,
+.cm-s-catppuccin .CodeMirror-line>span>span::-moz-selection {
+  background: rgba(231, 130, 132, 0.10);
+}
+
+.cm-s-catppuccin span.cm-comment {
+  color: #eebebe;
+}
+
+.cm-s-catppuccin span.cm-string,
+.cm-s-catppuccin span.cm-string-2 {
+  color: #a6d189;
+}
+
+.cm-s-catppuccin span.cm-number {
+  color: #ca9ee6;
+}
+
+.cm-s-catppuccin span.cm-variable {
+  color: #a6d189;
+}
+
+.cm-s-catppuccin span.cm-variable-2 {
+  color: #c6d0f5;
+}
+
+.cm-s-catppuccin span.cm-def {
+  color: #ef9f76;
+}
+
+.cm-s-catppuccin span.cm-keyword {
+  color: #8caaee;
+}
+
+.cm-s-catppuccin span.cm-operator {
+  color: #8caaee;
+}
+
+.cm-s-catppuccin span.cm-keyword {
+  color: #8caaee;
+}
+
+.cm-s-catppuccin span.cm-atom {
+  color: #e78284;
+}
+
+.cm-s-catppuccin span.cm-meta {
+  color: #EF9F76;
+}
+
+.cm-s-catppuccin span.cm-tag {
+  color: #8caaee;
+}
+
+.cm-s-catppuccin span.cm-attribute {
+  color: #a6d189;
+}
+
+.cm-s-catppuccin span.cm-qualifier {
+  color: #a6d189;
+}
+
+.cm-s-catppuccin span.cm-property {
+  color: #babbf1;
+}
+
+.cm-s-catppuccin span.cm-builtin {
+  color: #a6d189;
+}
+
+.cm-s-catppuccin span.cm-variable-3 {
+  color: #a6d189;
+}
+
+.cm-s-catppuccin .CodeMirror-activeline-background {
+  background: rgba(231, 130, 132, 0.1);
+}
+
+.cm-s-catppuccin .CodeMirror-matchingbracket {
+  text-decoration: underline;
+  color: #c6d0f5 !important;
+}

extension/themes/dark/omni.js

@@ -0,0 +1,2 @@
+require('./omni/omni.theme.css');
+require('./omni/omni.scss');

extension/themes/dark/omni/omni.scss

@@ -0,0 +1,20 @@
+.theme-omni-css-check:before {
+  content: 'loaded';
+  display: none;
+}
+
+.cm-s-omni .CodeMirror-selected {
+  background: rgb(25,22,34);
+}
+
+.extras {
+  .icon {
+    svg {
+      fill: #E1E1E6;
+    }
+
+    &:hover {
+      background-color: #44475a;
+    }
+  }
+}

extension/themes/dark/omni/omni.theme.css

@@ -0,0 +1,31 @@
+.cm-s-omni.CodeMirror, .cm-s-omni .CodeMirror-gutters {
+  background-color: #191622 !important;
+  color: #f8f8f2 !important;
+  border: none;
+}
+.cm-s-omni .CodeMirror-gutters { color: #41414D; }
+.cm-s-omni .CodeMirror-cursor { border-left: solid thin #E1E1E6; }
+.cm-s-omni .CodeMirror-linenumber { color: #41414D; }
+.cm-s-omni.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }
+.cm-s-omni .CodeMirror-line::selection, .cm-s-omni .CodeMirror-line > span::selection, .cm-s-omni .CodeMirror-line > span > span::selection { background:  rgba(255, 255, 255, 0.10); }
+.cm-s-omni .CodeMirror-line::-moz-selection, .cm-s-omni .CodeMirror-line > span::-moz-selection, .cm-s-omni .CodeMirror-line > span > span::-moz-selection { background:  rgba(255, 255, 255, 0.10)	; }
+.cm-s-omni span.cm-comment { color: #483C67; }
+.cm-s-omni span.cm-string, .cm-s-omni span.cm-string-2 { color: #E7DE79; }
+.cm-s-omni span.cm-number { color: #988BC7; }
+.cm-s-omni span.cm-variable { color: #67E480; }
+.cm-s-omni span.cm-variable-2 { color: white; }
+.cm-s-omni span.cm-def { color: #E89E64; }
+.cm-s-omni span.cm-keyword { color: #FF79C6; }
+.cm-s-omni span.cm-operator { color: #FF79C6; }
+.cm-s-omni span.cm-keyword { color: #FF79C6; }
+.cm-s-omni span.cm-atom { color: #988BC7; }
+.cm-s-omni span.cm-meta { color: #f8f8f2; }
+.cm-s-omni span.cm-tag { color: #FF79C6; }
+.cm-s-omni span.cm-attribute { color: #67E480; }
+.cm-s-omni span.cm-qualifier { color: #67E480; }
+.cm-s-omni span.cm-property { color: #FF79C6; }
+.cm-s-omni span.cm-builtin { color: #67E480; }
+.cm-s-omni span.cm-variable-3 { color: #67E480; }
+
+.cm-s-omni .CodeMirror-activeline-background { background: rgba(255, 255, 255, 0.10); }
+.cm-s-omni .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }

manifest.json

@@ -0,0 +1,67 @@
+{
+  "author": "Tulio Ornelas \[email protected]>",
+  "background": {
+    "persistent": false,
+    "scripts": ["assets/backend.js", "assets/omnibox.js"]
+  },
+  "content_scripts": [
+    {
+      "js": ["assets/viewer.js"],
+      "matches": ["\u003Call_urls>"],
+      "run_at": "document_start"
+    }
+  ],
+  "description": "The most beautiful and customizable JSON/JSONP highlighter that your eyes have ever seen. Open source at https://goo.gl/fmphc7",
+  "homepage_url": "https://github.com/tulios/json-viewer",
+  "icons": {
+    "128": "icons/128.png",
+    "16": "icons/16.png",
+    "32": "icons/32.png"
+  },
+  "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCruFyb/8fP+PcCb2lBfX9kQrQXa0wE0PE+PTbfl6/ljgsJKpu2CTzEJWCci140a0okKgPJZihxX88iIJrFEZC8Gm0n+irynwuvVUCfKZ4odCfCSlWo/GS1tJREK36jc4vppVLzq0Cu9OEKKzN6vQimT/vPpjGxJqjces3t2RZLFwIDAQAB",
+  "manifest_version": 2,
+  "minimum_chrome_version": "21",
+  "name": "JSON Viewer",
+  "offline_enabled": true,
+  "omnibox": {
+    "keyword": "json-viewer"
+  },
+  "options_page": "pages/options.html",
+  "permissions": ["*://*/*", "\u003Call_urls>"],
+  "update_url": "https://clients2.google.com/service/update2/crx",
+  "version": "0.18.1",
+  "web_accessible_resources": [
+    "assets/viewer.css",
+    "assets/viewer-alert.css",
+    "pages/options.html",
+    "pages/omnibox.html",
+    "themes/light/base16-light.css",
+    "themes/light/coy.css",
+    "themes/light/funky.css",
+    "themes/light/mdn-like.css",
+    "themes/light/neo.css",
+    "themes/light/solarized_light.css",
+    "themes/light/yeti.css",
+    "themes/dark/3024-night.css",
+    "themes/dark/ambiance.css",
+    "themes/dark/base16-dark.css",
+    "themes/dark/cobalt.css",
+    "themes/dark/dark.css",
+    "themes/dark/dracula-custom.css",
+    "themes/dark/dracula.css",
+    "themes/dark/catppuccin.css",
+    "themes/dark/jellybeans.css",
+    "themes/dark/material.css",
+    "themes/dark/mbo.css",
+    "themes/dark/mehdi.css",
+    "themes/dark/midnight.css",
+    "themes/dark/monokai.css",
+    "themes/dark/omni.css",
+    "themes/dark/okaidia.css",
+    "themes/dark/panda-syntax.css",
+    "themes/dark/solarized_dark.css",
+    "themes/dark/tomorrow.css",
+    "themes/dark/twilight.css",
+    "themes/dark/zenburn.css"
+  ]
+}