增加新工具：简易Postman

README.md

@@ -53,6 +53,7 @@ https://addons.mozilla.org/zh-CN/firefox/addon/web%E5%89%8D%E7%AB%AF%E5%8A%A9%E6
 - 代码压缩工具（HTML/CSS/JS）
 - 二维码生成器（支持当前页面、图片、链接、选中的文字生成QrCode）
 - 二维码解码器（支持网页二维码`右键`解码）
+- 简易Postman（Api接口测试，模拟HEAD/GET/POST方式）
 - 网页滚动截屏（将当前整个网页转为图片并保存）
 - Markdown转换（支持Markdown与HTML的互转）
 - 页面取色工具（滑动鼠标随意取色）

apps/background/index.js

@@ -503,6 +503,9 @@ var BgPageInstance = (function () {
                     MENU_PAGE_MODIFIER: function (info, tab) {
                         _openFileAndRun(tab, MSG_TYPE.PAGE_MODIFIER);
                     },
+                    MENU_POST_MAN: function (info, tab) {
+                        _openFileAndRun(tab, MSG_TYPE.POST_MAN);
+                    },
                     MENU_GRID_RULER: function (info, tab) {
                         _doGridDetect(tab);
                     },

apps/code-beautify/vkbeautify.js

@@ -231,7 +231,8 @@ function split_sql(str, tab) {
 				.replace(/\)\s{0,}SELECT /ig,")~::~SELECT ")
 				
 				.replace(/ THEN /ig," THEN~::~"+tab+"")
-				.replace(/ UNION /ig,"~::~UNION~::~")
+				.replace(/ UNION\s*/ig,"~::~UNION~::~")
+        		.replace(/~::~UNION~::~ALL /ig,"~::~UNION ALL~::~")
 				.replace(/ USING /ig,"~::~USING ")
 				.replace(/ WHEN /ig,"~::~"+tab+"WHEN ")
 				.replace(/ WHERE /ig,"~::~WHERE ")

apps/json-format/format-lib.js

@@ -143,7 +143,7 @@ let JsonFormatEntrance = (function () {
             button.click(function (e) {
                 let aLink = $('#aLinkDownload');
                 if (!aLink[0]) {
-                    aLink$('<a id="aLinkDownload" target="_blank" title="保存到本地">下载JSON数据</a>').appendTo('body');
+                    aLink = $('<a id="aLinkDownload" target="_blank" title="保存到本地">下载JSON数据</a>').appendTo('body');
                     aLink.attr('download', 'FeHelper-' + dt + '.json');
                     aLink.attr('href', URL.createObjectURL(blob));
                 }

apps/manifest.json

@@ -1,9 +1,9 @@
 {
   "name": "WEB前端助手(FeHelper)-Dev",
-  "version": "2019.07.2517",
+  "version": "2019.08.1217",
   "manifest_version": 2,
   "default_locale": "zh_CN",
-  "description": "Awesome，All In One的一个工具，包含多个独立小应用，比如：Json工具、代码美化工具、代码压缩、二维码工具、markdown工具、网页油猴工具、便签笔记工具、信息加密与解密、随机密码生成、Crontab等等！",
+  "description": "Awesome，All In One的一个工具，包含多个独立小应用，比如：Json工具、代码美化、代码压缩、二维码、Postman、markdown、网页油猴、便签笔记、信息加密与解密、随机密码生成、Crontab等等！",
   "icons": {
     "16": "static/img/fe-16.png",
     "48": "static/img/fe-48.png",

apps/options/settings.js

@@ -37,7 +37,8 @@ module.exports = (() => {
         'GRID_RULER',
         'REMOVE_BG',
         'MULTI_TOOLKIT',
-        'PAGE_MODIFIER'
+        'PAGE_MODIFIER',
+        'POST_MAN'
     ];
 
     // 默认处理关闭状态的功能，除非用户手动打开
@@ -105,6 +106,10 @@ module.exports = (() => {
             icon: '▶',
             text: 'Ajax调试功能'
         },
+        MENU_POST_MAN: {
+            icon:'☯',
+            text: '简易Postman'
+        },
         MENU_PAGE_OPTIMI: {
             icon: '√',
             text: '页面性能检测'

apps/popup/index.css

@@ -163,6 +163,9 @@ ul.fe-function-list li.-x-multi-toolkit b {
 ul.fe-function-list li.-x-page-modifier b {
     background-position: -32px -95px;
 }
+ul.fe-function-list li.-x-post-man b {
+    background-position: -32px -112px;
+}
 
 ul.fe-function-list li i {
     color: #aaa;

apps/popup/index.html

@@ -41,6 +41,8 @@
                     <b></b>编码规范检测</li>
                 <li class="-x-loadtime" @click="runHelper('SHOW_PAGE_LOAD_TIME',0)" v-if="canMeShow.SHOW_PAGE_LOAD_TIME && !isFireFox">
                     <b></b>页面性能检测</li>
+                <li class="-x-post-man" @click="runHelper('POST_MAN',1)" v-if="canMeShow.POST_MAN">
+                    <b></b>简易Postman</li>
                 <li class="-x-grid-ruler" @click="runHelper('GRID_RULER',0)" v-if="canMeShow.GRID_RULER && !isFireFox">
                     <b></b>页面栅格标尺</li>
                 <li class="-x-page-modifier" @click="runHelper('PAGE_MODIFIER',1)" v-if="canMeShow.PAGE_MODIFIER">

apps/postman/index.css

@@ -0,0 +1,105 @@
+@import url("../static/css/bootstrap.min.css");
+@import url("../json-format/without-ui.css");
+
+html,body {
+    background: #fff;
+}
+.wrapper {
+    width:auto;
+}
+.f-url {
+    width: 600px;
+    display: inline-block;
+}
+.f-method {
+    display: inline-block;
+    width:200px;
+    margin-right: 30px;
+}
+.f-param {
+    display: inline-block;
+    width: 800px;
+}
+
+.ui-widget {
+    font-family: Arial,sans-serif;
+    font-size:14px;
+}
+.ui-widget-content {
+    border:none;
+}
+
+.ui-widget-header {
+    background: #fff;
+    border:none;
+    border-bottom: 1px solid #ccc;
+    border-radius: 0;
+    box-shadow: 0px 2px #f1f1f1;
+}
+
+.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
+    background: none;
+    border:0;
+}
+
+.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
+    background: none;
+    color: #48b;
+    border:0;
+}
+.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
+    color: #48b;
+}
+
+.ui-tabs {
+    padding-bottom: 5em;
+}
+.ui-tabs .ui-tabs-nav {
+    margin-top:30px;
+}
+.table {
+    font-size: 14px;
+}
+#tab-content {
+    white-space: pre-wrap;
+    word-break: break-all;
+    padding-bottom: 50px;
+}
+.mod-inputs {
+    padding: 20px;
+    background-color: #f5f5f5;
+    border-radius: 6px;
+    border: 1px solid #eee;
+}
+#jfContent_pre {
+    border:none;
+}
+.mod-tab {
+    position: relative;
+}
+#optionBar {
+    top:2px;
+}
+#formattedJson {
+    padding-top: 21px;
+}
+#jfContent_pre {
+    margin-top: 21px;
+    background:none;
+}
+.the-tabs {
+    position: sticky;
+    top: 0;
+    background: #fff;
+    z-index: 10000;
+}
+.x-xdemo,a.x-xdemo {
+    margin-left: 30px;
+    font-size: 12px;
+    color: blue;
+    cursor: pointer;
+    text-decoration: underline;
+}
+.x-xdemo:hover {
+    text-decoration: underline;
+}

apps/postman/index.js

@@ -0,0 +1,169 @@
+/**
+ * FeHelper 简易版Postman
+ */
+
+// json with bigint supported
+Tarp.require('../static/vendor/json-bigint/index');
+
+new Vue({
+    el: '#pageContainer',
+    data: {
+        urlContent: '',
+        methodContent: 'GET',
+        resultContent: '',
+        paramContent: '',
+        responseHeaders: [],
+        jfCallbackName_start: '',
+        jfCallbackName_end: '',
+        errorMsgForJson: ''
+    },
+
+    mounted: function () {
+        this.$refs.url.focus();
+    },
+    methods: {
+        postman: function () {
+            this.$nextTick(() => {
+                this.sendRequest(this.urlContent, this.methodContent, this.paramContent);
+            });
+        },
+
+        sendRequest: function (url, method, body) {
+            let xhr = new XMLHttpRequest();
+            xhr.addEventListener("readystatechange", (resp) => {
+                let result = 'Loading...';
+                switch (resp.target.readyState) {
+                    case resp.target.OPENED:
+                        result = 'Senting...';
+                        break;
+                    case resp.target.HEADERS_RECEIVED:
+                        result = 'Headers received';
+                        this.responseHeaders = resp.target.getAllResponseHeaders().trim().split('\n').map(item => {
+                            return item.split(': ').map(x => x.trim())
+                        });
+                        break;
+                    case resp.target.LOADING:
+                        result = 'Loading...';
+                        break;
+                    case resp.target.DONE:
+                        try {
+                            result = JSON.stringify(JSON.parse(resp.target.responseText), null, 4);
+
+                        } catch (e) {
+                            result = resp.target.responseText;
+                        }
+
+                        this.jsonFormat(result);
+                        this.renderTab();
+                        break;
+                }
+                this.resultContent = result || '无数据';
+            });
+            xhr.open(method, url);
+            if(method.toLowerCase() === 'post') {
+                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
+                xhr.send(body);
+            }else{
+                xhr.send();
+            }
+        },
+
+        renderTab: function () {
+            jQuery('#tabs').tabs({
+                show: (event, ui) => {
+                }
+            });
+            this.$refs.resultContainer.classList.remove('hide');
+        },
+
+
+        jsonFormat: function (source) {
+            this.errorMsgForJson = '';
+            this.jfCallbackName_start = '';
+            this.jfCallbackName_end = '';
+
+            if (!source) {
+                return false;
+            }
+
+            // JSONP形式下的callback name
+            let funcName = null;
+            // json对象
+            let jsonObj = null;
+
+            // 下面校验给定字符串是否为一个合法的json
+            try {
+                // 再看看是不是jsonp的格式
+                let reg = /^([\w\.]+)\(\s*([\s\S]*)\s*\)$/igm;
+                let matches = reg.exec(source);
+                if (matches != null) {
+                    funcName = matches[1];
+                    source = matches[2];
+                }
+                // 这里可能会throw exception
+                jsonObj = JSON.parse(source);
+            } catch (ex) {
+                // new Function的方式，能自动给key补全双引号，但是不支持bigint，所以是下下策，放在try-catch里搞
+                try {
+                    jsonObj = new Function("return " + source)();
+                } catch (exx) {
+                    try {
+                        // 再给你一次机会，是不是下面这种情况：  "{\"ret\":\"0\", \"msg\":\"ok\"}"
+                        jsonObj = new Function("return '" + source + "'")();
+                        if (typeof jsonObj === 'string') {
+                            // 最后给你一次机会，是个字符串，老夫给你再转一次
+                            jsonObj = new Function("return " + jsonObj)();
+                        }
+                    } catch (exxx) {
+                        this.errorMsgForJson = exxx.message;
+                    }
+                }
+            }
+
+            // 是json格式，可以进行JSON自动格式化
+            if (jsonObj != null && typeof jsonObj === "object" && !this.errorMsgForJson.length) {
+                try {
+                    // 要尽量保证格式化的东西一定是一个json，所以需要把内容进行JSON.stringify处理
+                    source = JSON.stringify(jsonObj);
+                } catch (ex) {
+                    // 通过JSON反解不出来的，一定有问题
+                    this.errorMsgForJson = ex.message;
+                }
+
+                if (!this.errorMsgForJson.length) {
+                    // 格式化
+                    Tarp.require('../json-format/format-lib').format(source);
+
+                    // 如果是JSONP格式的，需要把方法名也显示出来
+                    if (funcName != null) {
+                        this.jfCallbackName_start = funcName + '(';
+                        this.jfCallbackName_end = ')';
+                    } else {
+                        this.jfCallbackName_start = '';
+                        this.jfCallbackName_end = '';
+                    }
+                }
+            }
+
+            // 不是json，都格式化不了，一定会出错
+            if (this.errorMsgForJson) {
+                let el = document.querySelector('#optionBar');
+                el && (el.style.display = 'none');
+            }
+
+        },
+
+        setDemo: function (type) {
+            if (type === 1) {
+                this.urlContent = 'https://www.sojson.com/api/qqmusic/8446666/json';
+                this.methodContent = 'GET';
+            } else {
+                this.urlContent = 'https://www.baidufe.com/test-post.php';
+                this.methodContent = 'POST';
+                this.paramContent = 'username=postman&password=123456'
+            }
+
+        }
+
+    }
+});

apps/static/css/bootstrap.min.css

@@ -71,3 +71,6 @@ textarea{
 a.x-a-high, a.x-a-high:visited {
     color:blue;
 }
+.btn:focus, .btn:active:focus, .btn.active:focus {
+    outline: none !important;
+}

apps/static/js/msg_type.js

@@ -111,6 +111,9 @@ const MSG_TYPE = {
     // 屏幕栅格标尺
     GRID_RULER: 'grid-ruler',
 
+    // POST Man
+    POST_MAN:'postman',
+
     // 多维小工具
     MULTI_TOOLKIT: 'toolkit',