format buttons, fixes

Author: MUlt1mate

README.md

@@ -1,8 +1,11 @@
 # Google chrome extension that improves RabbitMQ web console UI
 
+[Web Store link](https://chrome.google.com/webstore/detail/rabbitmq-ui/aojjjccnchdgfojkplokcaikfoighecb)
+
 ### Features
 * Saves last message for each queue and restores it when you open queue page
 * JSON parsing for messages in queue payload
+* Buttons to beautify and minify JSON in payload
 
 ### Requirements
 
@@ -11,6 +14,6 @@
 
 ## Screenshots
 
-![Interface](screenshot.png)
+![Interface](img/screenshot.png)
 
 JSON Formatter by [mohsen1/json-formatter-js](https://github.com/mohsen1/json-formatter-js)

content.js

@@ -1,16 +1,37 @@
+let formatter = new Formatter();
+
 function Formatter() {
+    this.payload = document.getElementsByTagName('textarea')[0];
+
     this.parseError = document.createElement("div");
     this.parseError.id = 'parseError';
+
     this.formattedDiv = document.createElement("div");
     this.formattedDiv.id = 'formattedPayload';
-    this.payload = document.getElementsByTagName('textarea')[0];
+
+    this.beautifyLink = document.createElement('a');
+    this.beautifyLink.id = 'beautifyPayload';
+    this.beautifyLink.className = 'payloadBtn';
+    this.beautifyLink.innerText = 'Beautify';
+    this.beautifyLink.onclick = function () {
+        formatter.beautify();
+    };
+
+    this.minifyLink = document.createElement('a');
+    this.minifyLink.id = 'minifyPayload';
+    this.minifyLink.className = 'payloadBtn';
+    this.minifyLink.innerText = 'Minify';
+    this.minifyLink.onclick = function () {
+        formatter.minify();
+    };
+
+    // parses new text from payload
     this.update = function () {
-        console.log('updated!!');
         this.formattedDiv.innerHTML = '';
         this.hideError();
         let raw = this.payload.value;
         if ('' === raw) {
-            return;
+            return false;
         }
 
         let jsonObj;
@@ -19,69 +40,92 @@ function Formatter() {
         }
         catch (e) {
             this.showError(e.toString());
-            return;
+            return false;
         }
 
-        // this.payload.value = JSON.stringify(jsonObj, undefined, 2);
-
-        savePayload(this.payload.value);
-
         let formatter = new JSONFormatter(jsonObj, Infinity, {
             hoverPreviewEnabled: false,
             hoverPreviewArrayCount: 20,
             hoverPreviewFieldCount: 20,
-            theme: 'dark',
             animateOpen: true,
             animateClose: true,
             useToJSON: true
         });
         this.formattedDiv.appendChild(formatter.render());
+        return true;
     };
+
     this.showError = function (error) {
         this.parseError.innerText = error;
     };
 
     this.hideError = function () {
         this.parseError.innerText = '';
     };
+
+    this.beautify = function () {
+        let jsonObj;
+        try {
+            jsonObj = JSON.parse(this.payload.value);
+        }
+        catch (e) {
+            this.showError(e.toString());
+            return;
+        }
+        this.payload.value = JSON.stringify(jsonObj, undefined, 2);
+    };
+
+    this.minify = function () {
+        let jsonObj;
+        try {
+            jsonObj = JSON.parse(this.payload.value);
+        }
+        catch (e) {
+            this.showError(e.toString());
+            return;
+        }
+        this.payload.value = JSON.stringify(jsonObj);
+    }
 }
 
 let hash = document.location.hash;
-setInterval(updateHash, 500);
+setInterval(checkPageChange, 500);
 
-function updateHash() {
+function checkPageChange() {
     let newHash = document.location.hash;
-    console.log(newHash);
     if (hash !== newHash) {
         init();
         hash = newHash;
     }
 }
 
-init();
+// we wait a bit for payload element to init
+setTimeout(init, 300);
 
-function init() {
-    let formatter = new Formatter();
+async function init() {
+    formatter = new Formatter();
     if (formatter.payload === undefined || formatter.payload === undefined) {
         return;
     }
 
     formatter.payload.parentElement.append(formatter.parseError);
     formatter.payload.closest('div').append(formatter.formattedDiv);
+    let btnPlace = formatter.payload.closest('tr').children[0];
+    btnPlace.append(formatter.beautifyLink);
+    btnPlace.append(document.createElement('br'));
+    btnPlace.append(formatter.minifyLink);
     formatter.update();
     let wait = null;
     formatter.payload.onkeyup = function () {
         window.clearTimeout(wait);
         wait = setTimeout(function () {
-            formatter.update();
+            if (formatter.update()) {
+                savePayload(formatter.payload.value);
+            }
         }, 700);
     };
     getSavedPayload(function (result) {
-        let key = getKey();
-        if (!key) {
-            return;
-        }
-        let value = result[key];
+        let value = result[getKey()];
         if (!value) {
             return;
         }
@@ -90,7 +134,7 @@ function init() {
     })
 }
 
-
+// generate key for current queue and host
 function getKey() {
     const queueExp = /\/queues\/%2F\/(.*)/;
 

icon.png

@@ -1,11 +1,16 @@
 {
   "manifest_version": 2,
   "name": "RabbitMQ UI",
+  "short_name": "RabbitMQ UI",
   "description": "RabbitMQ web console improvements",
-  "version": "1",
+  "version": "0.2.0",
+  "icons": {
+    "48": "img/icon48.png",
+    "128": "img/icon128.png"
+  },
   "author": "MUlt1mate",
   "browser_action": {
-    "default_icon": "icon.png",
+    "default_icon": "img/icon128.png",
     "default_title": "RabbitMQ UI"
   },
   "permissions": [

img/icon128.png

@@ -11,6 +11,12 @@
     display: inline-block;
 }
 
-#parseError{
+#parseError {
     color: crimson;
+}
+
+.payloadBtn {
+    cursor: pointer;
+    border-bottom: 1px dotted;
+    line-height: 30px;
 }