json auto format增加配置项

README.md

@@ -48,4 +48,5 @@ https://www.baidufe.com/fehelper/feedback.html
 
 ### 五、作者
 - Mail：[email protected]
-- Wechat：www-baidufe-com
+- Wechat：398824681
+![微信](https://static.baidufe.com/blog/static/img/wx-private-qrcode.png?v=175e2ee6fb)

apps/background/index.js

@@ -554,7 +554,8 @@ var BgPageInstance = (function () {
         Settings.getOptsFromBgPage(opts => {
             opts.JSON_PAGE_FORMAT && chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
                 chrome.tabs.sendMessage(tabs[0].id, {
-                    type: MSG_TYPE.JSON_PAGE_FORMAT
+                    type: MSG_TYPE.JSON_PAGE_FORMAT,
+                    options: {MAX_JSON_KEYS_NUMBER: opts.MAX_JSON_KEYS_NUMBER}
                 });
             });
         });
@@ -617,7 +618,7 @@ var BgPageInstance = (function () {
                 //管理右键菜单
                 _createOrRemoveContextMenu();
                 notifyText({
-                    message: '恭喜，FeHelper配置修改成功!',
+                    message: '配置已生效，请继续使用!',
                     autoClose: 2000
                 });
             }

apps/content-script/index.js

@@ -38,7 +38,7 @@ chrome.runtime.onMessage.addListener(function (request, sender, callback) {
     switch (request.type) {
         // JSON页面自动格式化
         case MSG_TYPE.JSON_PAGE_FORMAT:
-            Tarp.require('../json-format/automatic').format();
+            Tarp.require('../json-format/automatic').format(request.options);
             break;
 
         // js、css页面自动检测，提示格式化

apps/json-format/automatic.js

@@ -27,6 +27,30 @@ module.exports = (() => {
         $('<link id="_fehelper_fcp_css_" href="' + cssUrl + '" rel="stylesheet" type="text/css" />').appendTo('head');
     };
 
+    /**
+     * 自动消失的Alert弹窗
+     * @param content
+     */
+    window.alert = function (content) {
+        window.clearTimeout(window.feHelperAlertMsgTid);
+        let elAlertMsg = document.querySelector("#fehelper_alertmsg");
+        if (!elAlertMsg) {
+            let elWrapper = document.createElement('div');
+            elWrapper.innerHTML = '<div id="fehelper_alertmsg" style="position:fixed;top:5px;right:5px;z-index:1000000">' +
+                '<p style="background:#000;display:inline-block;color:#fff;text-align:center;' +
+                'padding:10px 10px;margin:0 auto;font-size:14px;border-radius:4px;">' + content + '</p></div>';
+            elAlertMsg = elWrapper.childNodes[0];
+            document.body.appendChild(elAlertMsg);
+        } else {
+            elAlertMsg.querySelector('p').innerHTML = content;
+            elAlertMsg.style.display = 'block';
+        }
+
+        window.feHelperAlertMsgTid = window.setTimeout(function () {
+            elAlertMsg.style.display = 'none';
+        }, 3000);
+    };
+
     /**
      * 从页面提取JSON文本
      * @returns {string}
@@ -91,11 +115,34 @@ module.exports = (() => {
         return text;
     };
 
+    /**
+     * 获取一个JSON的所有Key数量
+     * @param json
+     * @returns {number}
+     * @private
+     */
+    let _getAllKeysCount = function (json) {
+        let count = 0;
+
+        if (typeof json === 'object') {
+            let keys = Object.keys(json);
+            count += keys.length;
+
+            keys.forEach(key => {
+                if (json[key] && typeof json[key] === 'object') {
+                    count += _getAllKeysCount(json[key]);
+                }
+            });
+        }
+
+        return count;
+    };
+
     /**
      * 执行format操作
      * @private
      */
-    let _format = function () {
+    let _format = function (options) {
 
         let source = _getJsonText();
         if (!source) {
@@ -178,6 +225,15 @@ module.exports = (() => {
                 return;
             }
 
+            // JSON的所有key不能超过预设的值，比如 10000 个，要不然自动格式化会比较卡
+            if (options && options['MAX_JSON_KEYS_NUMBER']) {
+                let keysCount = _getAllKeysCount(jsonObj);
+                if (keysCount > options['MAX_JSON_KEYS_NUMBER']) {
+                    let msg = '当前JSON共 <b style="color:red">' + keysCount + '</b> 个Key，大于预设值' + options['MAX_JSON_KEYS_NUMBER'] + '，已取消自动格式化；可到FeHelper设置页调整此配置！';
+                    return alert(msg);
+                }
+            }
+
             _loadCss();
             $('body').html(_htmlFragment);
 

apps/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "WEB前端助手(FeHelper)",
-  "version": "2018.07.1315",
+  "version": "2018.07.1714",
   "manifest_version": 2,
   "default_locale": "zh_CN",
   "description": "FE助手：包括JSON格式化、二维码生成与解码、信息编解码、代码压缩、美化、页面取色、Markdown与HTML互转、网页滚动截屏、正则表达式、时间转换工具、编码规范检测、页面性能检测、Ajax接口调试、密码生成器、JSON比对工具",

apps/options/index.css

@@ -41,4 +41,14 @@ h5,h4 {
     border-bottom : 1px solid #eee;
     padding-bottom: 5px;
     width: 60%;
+}
+
+#MAX_JSON_KEYS_NUMBER {
+    width: 80px;
+    height: auto;
+    display: inline-block;
+    padding: 4px 10px;
+}
+.box-inner.x-disabled {
+    opacity: 0.2;
 }

apps/options/index.js

@@ -8,13 +8,17 @@ new Vue({
     el: '#pageContainer',
     data: {
         selectedOpts: [],
+        maxJsonKeysNumber: 0,
         manifest: {}
     },
 
     created: function () {
 
         Settings.getOptions((opts) => {
-            this.selectedOpts = Object.keys(opts);
+            this.selectedOpts = Object.keys(opts).filter(k => {
+                return typeof(opts[k]) === 'string' && k !== 'MAX_JSON_KEYS_NUMBER'
+            });
+            this.maxJsonKeysNumber = opts['MAX_JSON_KEYS_NUMBER'];
         });
         this.manifest = chrome.runtime.getManifest();
     },
@@ -33,7 +37,7 @@ new Vue({
 
         save: function () {
 
-            Settings.setOptions(this.selectedOpts);
+            Settings.setOptions(this.selectedOpts.concat({MAX_JSON_KEYS_NUMBER: parseInt(this.maxJsonKeysNumber, 10)}));
 
             setTimeout(() => {
                 this.close();

apps/options/settings.js

@@ -6,6 +6,9 @@ module.exports = (() => {
     // 页面json格式化强制开启
     let MSG_TYPE = Tarp.require('../static/js/msg_type');
 
+    // 默认值：JSON格式化支持的最大key数量
+    let maxJsonKeysNumber = 10000;
+
     // 所有配置项
     let optionItems = [
         'opt_item_contextMenus',
@@ -27,7 +30,8 @@ module.exports = (() => {
         'HTML_TO_MARKDOWN',
         'PAGE_CAPTURE',
         'RANDOM_PASSWORD',
-        'FORBID_OPEN_IN_NEW_TAB'
+        'FORBID_OPEN_IN_NEW_TAB',
+        'MAX_JSON_KEYS_NUMBER'
     ];
 
     /**
@@ -68,7 +72,11 @@ module.exports = (() => {
             let rst = {};
             optionItems.forEach((item) => {
                 let opt = localStorage.getItem(item);
-                if (opt !== 'false') {
+                if (item === 'MAX_JSON_KEYS_NUMBER') {
+                    rst[item] = opt || maxJsonKeysNumber;
+                } else if (typeof(opt) === 'number') {
+                    rst[item] = opt;
+                } else if (opt !== 'false') {
                     rst[item] = 'true';
                 }
             });
@@ -81,8 +89,22 @@ module.exports = (() => {
      * @param {Object} items
      */
     let _setOptsFromBgPage = function (items) {
+
         optionItems.forEach((opt) => {
-            localStorage.setItem(opt, items.indexOf(opt) > -1 ? 'true' : 'false');
+            let found = items.some(it => {
+                if (typeof(it) === 'string' && it === opt) {
+                    localStorage.setItem(opt, 'true');
+                    return true;
+                }
+                else if (typeof(it) === 'object' && it.hasOwnProperty(opt)) {
+                    localStorage.setItem(opt, it[opt]);
+                    return true;
+                }
+                return false;
+            });
+            if (!found) {
+                localStorage.setItem(opt, 'false');
+            }
         });
     };