add json path status bar on hover

README.md

@@ -3,7 +3,7 @@
 DJSON Viewer and Formatter
 ==============
 
-Chrome extension for printing and formatting JSON and JSONP nicely when you visit it 'directly' in a browser tab.
+Chrome extension for printing and formatting JSON and JSONP nicely directly in a browser tab.
 Initial base of the formatter from: [callumlocke json-formatter](https://github.com/callumlocke/json-formatter)
 
 Features
@@ -21,6 +21,7 @@ Features
 * Works on local files too (if you enable this in `chrome://extensions`)
 * You can inspect the JSON by typing `djson` in the console
 * Counts items and properties in a collection
+* Show JSON path of the elements on hover
 
 A background worker is used to prevent the UI freezing when processing very long JSON pages.
 
@@ -32,7 +33,7 @@ Installation
 [![https://chrome.google.com/webstore/detail/djson-viewer/chaeijjekipecdajnijdldjjipaegdjc](https://github.com/dardesantis/DJSON-Viewer/raw/master/chromestore.png)](https://chrome.google.com/webstore/detail/djson-viewer/chaeijjekipecdajnijdldjjipaegdjc)
 
 **Option 2** – install it using the packed version:
-* clone/download this repo or just download the file djson-viewer.crx,
+* clone/download this repo or just [download](https://github.com/dardesantis/DJSON-Viewer/raw/master/djson-viewer.crx) the file `djson-viewer.crx`,
 * open Chrome and go to `chrome://chrome/extensions/`,
 * drag the `djson-viewer.crx` into Chrome
 * accept to install the extension

extension/js/background.js

@@ -26,6 +26,8 @@
 
     "use strict";
 
+    var path, copyPathMenuEntryId;
+
     // Constants
     var
         TYPE_STRING = 1,
@@ -128,9 +130,6 @@
         return idx;
     }
 
-    // Record current version (in case future update wants to know)
-    localStorage.djsonVersion = '0.3.0';
-
     // Template elements
     var baseSpan = document.createElement('span');
 
@@ -374,6 +373,20 @@
         return returnHTML;
     }
 
+    function copy(value) {
+        var selElement, selRange, selection;
+        selElement = document.createElement("span");
+        selRange = document.createRange();
+        selElement.innerText = value;
+        document.body.appendChild(selElement);
+        selRange.selectNodeContents(selElement);
+        selection = window.getSelection();
+        selection.removeAllRanges();
+        selection.addRange(selRange);
+        document.execCommand("Copy");
+        document.body.removeChild(selElement);
+    }
+
     // Listen for requests from content pages wanting to set up a port
     chrome.extension.onConnect.addListener(function (port) {
 
@@ -478,16 +491,47 @@
                 }
 
                 // And send it the message to confirm that we're now formatting (so it can show a spinner)
-                port.postMessage(['FORMATTING' /*, JSON.stringify(localStorage)*/]);
+                port.postMessage(['FORMATTING', JSON.stringify(localStorage)]);
 
                 // Do formatting
                 var html = jsonObjToHTML(obj, jsonpFunctionName);
 
                 // Post the HTML string to the content script
                 port.postMessage(['FORMATTED', html, validJsonText]);
+            }
 
-                // Disconnect
-                port.disconnect();
+            else if (msg.type === 'SAVE THEME') {
+                localStorage.setItem("theme", msg.theme);
+            }
+
+            else if (msg.type === 'COPY PATH') {
+                chrome.permissions.contains({permissions: ['contextMenus']}, function(result) {
+                    function updateContextMenu() {
+                        path = msg.path;
+                        if (typeof copyPathMenuEntryId === "undefined" || copyPathMenuEntryId == null) {
+                            copyPathMenuEntryId = chrome.contextMenus.create({
+                                                                                 title : "Copy JSON Path",
+                                                                                 contexts : [ "page", "selection", "link" ],
+                                                                                 onclick : function(info, tab) {
+                                                                                     copy(path);
+                                                                                 }
+                                                                             });
+                        } else if (copyPathMenuEntryId && path.length == 0) {
+                            chrome.contextMenus.remove(copyPathMenuEntryId);
+                            copyPathMenuEntryId = null;
+                        }
+                    }
+                    if (result) {
+                        updateContextMenu();
+                    } else {
+                        chrome.permissions.request({permissions: ['contextMenus']}, function(granted) {
+                            // The callback argument will be true if the user granted the permissions.
+                            if (granted) {
+                                updateContextMenu();
+                            }
+                        });
+                    }
+                });
             }
         });
     });

extension/manifest.json

@@ -1,15 +1,16 @@
 {
   "name": "DJSON Viewer and Formatter. JSON",
   "short_name": "DJSON Viewer",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "manifest_version": 2,
   "description": "Extension to format and view JSON, from Web, Input or File.",
   "homepage_url": "https://github.com/dardesantis/DJSON-Viewer",
   "minimum_chrome_version": "21",
   "offline_enabled": true,
   "icons": {
-       "128": "icons/128.png",
-       "32": "icons/32.png"
+    "16": "icons/16.png",
+    "32": "icons/32.png",
+    "128": "icons/128.png"
   },
   "browser_action": {
     "default_icon": {
@@ -25,8 +26,5 @@
   "content_scripts": [
     { "matches": ["<all_urls>"], "js": ["js/content.js"], "run_at": "document_start" }
   ],
-  "permissions":["<all_urls>", "clipboardWrite", "tabs"],
-  "web_accessible_resources": [
-    "images/paint.png"
-  ]
+  "permissions":["<all_urls>", "clipboardWrite", "tabs"]
 }

sass/_theme-darkorange.scss

@@ -36,4 +36,10 @@ body[data-theme="darkorange"], #themeChooserPreview[data-theme="darkorange"] {
   .bl, .nl, .n {
     color: $darkorange-color-null;
   }
+
+  #status {
+    border-color: $darkorange-color-text-dark;
+    background-color: $darkorange-color-text;
+    color: $darkorange-color-background;
+  }
 }

sass/_theme-default.scss

@@ -36,4 +36,10 @@ body[data-theme="default"], #themeChooserPreview[data-theme="default"] {
   .bl, .nl, .n {
     color: $default-color-null;
   }
+
+  #status {
+    border-color: $default-color-text-dark;
+    background-color: $default-color-text;
+    color: $default-color-background;
+  }
 }

sass/_theme-halewa.scss

@@ -36,4 +36,10 @@ body[data-theme="halewa"], #themeChooserPreview[data-theme="halewa"] {
   .bl, .nl, .n {
     color: $halewa-color-null;
   }
+
+  #status {
+    border-color: $halewa-color-text-dark;
+    background-color: $halewa-color-text;
+    color: $halewa-color-background;
+  }
 }

sass/_theme-monokai.scss

@@ -36,4 +36,10 @@ body[data-theme="monokai"], #themeChooserPreview[data-theme="monokai"] {
   .bl, .nl, .n {
     color: $monokai-color-null;
   }
+
+  #status {
+    border-color: $monokai-color-text-dark;
+    background-color: $monokai-color-text;
+    color: $monokai-color-background;
+  }
 }

sass/_theme-solarized.scss

@@ -36,4 +36,10 @@ body[data-theme="solarized"], #themeChooserPreview[data-theme="solarized"] {
   .bl, .nl, .n {
     color: $solarized-color-null;
   }
+
+  #status {
+    border-color: $solarized-color-text-dark;
+    background-color: $solarized-color-text;
+    color: $solarized-color-background;
+  }
 }

sass/_theme-xcode.scss

@@ -36,4 +36,10 @@ body[data-theme="xcode"], #themeChooserPreview[data-theme="xcode"] {
   .bl, .nl, .n {
     color: $xcode-color-null;
   }
+
+  #status {
+    border-color: $xcode-color-text-dark;
+    background-color: $xcode-color-text;
+    color: $xcode-color-background;
+  }
 }

sass/content.scss

@@ -308,6 +308,31 @@ a:hover, a:active {
   }
 }
 
+#status {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  min-width: 628px;
+  border: 1px solid $color-text-dark;
+  border-bottom-width: 0;
+  border-left-width: 0;
+  border-top-right-radius: 4px;
+  height: 16px;
+  padding: 2px 7px 2px 4px;
+  font-size: 15px;
+  opacity: 0;
+  background-color: $color-text;
+  color: $color-background;
+  transition: opacity .2s ease-out;
+  -webkit-transition: opacity .2s ease-out;
+  user-select: none;
+  -webkit-user-select: none;
+
+  &:not(:empty) {
+    opacity: 1;
+  }
+}
+
 /* Misc */
 [hidden] {
   display: none !important;