优化代码美化工具

apps/code-beautify/automatic.css

@@ -1,5 +1,7 @@
 @import url("../static/vendor/prism/prism.css");
-
+body {
+    font-size: 14px;
+}
 #fehelper_tips {
     position: fixed;
     top: 0;
@@ -81,8 +83,12 @@
 #fehelper_tips .close:active span {
     opacity: 1;
 }
+#fehelper_tips .ask {
+    color: #f00;
+}
 
-#fehelper_tips .forbid {
+#fehelper_tips .forbid,
+#fehelper_tips .encoding{
     float: right;
     font-size: 12px;
     color: #666;
@@ -90,9 +96,14 @@
     margin-right:20px;
     cursor: pointer;
 }
-#fehelper_tips .forbid:hover {
+#fehelper_tips .forbid:hover,
+#fehelper_tips .encoding:hover{
     color:red;
 }
+#fehelper_tips .encoding {
+    float: none;
+    margin-left: 10px;
+}
 
 body.show-tipsbar > *,
 body.show-beautified > *{
@@ -110,15 +121,9 @@ body #fehelper_tips {
 body.show-tipsbar .copy{
     display: none;
 }
-body.show-beautified {
-    font-size: 14px;
-}
 body.show-beautified .copy {
     display: inline-block;
 }
-body.show-beautified .doing {
-    display: none;
-}
 
 body.processing > :not(#fehelper_tips) {
     opacity: .5;

apps/code-beautify/automatic.js

@@ -16,9 +16,9 @@ module.exports = (() => {
 
             Tarp.require('../static/vendor/prism/prism.js', true).then(Prism => {
                 Prism.highlightAll();
+                callback && callback();
             });
 
-            callback && callback();
         };
 
         switch (fileType) {
@@ -66,6 +66,7 @@ module.exports = (() => {
 
         let tipsBar = $('<div id="fehelper_tips">' +
             '<span class="desc">FeHelper检测到这可能是<i>' + fileType + '</i>代码，<span class="ask">是否进行美化处理？</span></span>' +
+            '<a class="encoding">有乱码？点击修正！</a>' +
             '<button class="yes">代码美化</button>' +
             '<button class="no">放弃！</button>' +
             '<button class="copy hide">复制美化过的代码</button>' +
@@ -75,9 +76,9 @@ module.exports = (() => {
 
         tipsBar.find('button.yes').click((evt) => {
             tipsBar.find('button.yes,button.no').hide();
-            $('<span class="doing">正在努力，请稍后...</span>').insertBefore(tipsBar.find('button.yes'));
+            let elAsk = tipsBar.find('span.ask').text('正在努力美化，请稍后...');
             format(fileType, source, () => {
-                tipsBar.find('span.ask').text('已为您美化完毕！');
+                elAsk.text('已为您美化完毕！');
                 $(document.body).removeClass('show-tipsbar').addClass('show-beautified');
             });
         });
@@ -97,6 +98,18 @@ module.exports = (() => {
         tipsBar.find('button.copy').click((evt) => {
             _copyToClipboard(formattedCodes);
         });
+
+        tipsBar.find('a.encoding').click((evt) => {
+            evt.preventDefault();
+            fetch(location.href).then(res => res.text()).then(text => {
+                source = text;
+                if ($(document.body).hasClass('show-beautified')) {
+                    tipsBar.find('button.yes').trigger('click');
+                } else {
+                    $('#fehelper_tips+pre').text(text);
+                }
+            });
+        });
     };
 
 

apps/code-beautify/index.css

@@ -3,4 +3,7 @@
 
 #codeSource {
     height: 150px;
+}
+#btnFormat {
+    outline: none;
 }

apps/code-beautify/index.js

@@ -28,6 +28,9 @@ new Vue({
 
     methods: {
         format: function () {
+            if(!this.sourceContent.trim()) {
+                return alert('内容为空，不需要美化处理！');
+            }
 
             let beauty = (result) => {
                 result = result.replace(/>/g, '&gt;').replace(/</g, '&lt;');
@@ -37,11 +40,11 @@ new Vue({
                 // 代码高亮
                 this.$nextTick(() => {
                     Prism.highlightAll();
-                })
+                });
             };
 
             switch (this.selectedType) {
-                case 'javascript':
+                case 'Javascript':
                     let opts = {
                         brace_style: "collapse",
                         break_chained_methods: false,
@@ -57,14 +60,14 @@ new Vue({
                     };
                     Tarp.require('./beautify.js').js_beautify(this.sourceContent, opts, result => beauty(result));
                     break;
-                case 'css':
+                case 'CSS':
                     Tarp.require('./beautify-css.js').css_beautify(this.sourceContent, {}, result => beauty(result));
                     break;
-                case 'html':
+                case 'HTML':
                     Tarp.require('./beautify-html.js');
                     beauty(html_beautify(this.sourceContent));
                     break;
-                case 'sql':
+                case 'SQL':
                     Tarp.require('./vkbeautify.js');
                     beauty(vkbeautify.sql(this.sourceContent, 4));
                     break;

apps/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "WEB前端助手(FeHelper)",
-  "version": "2018.06.2015",
+  "version": "2018.06.2114",
   "manifest_version": 2,
   "default_locale": "zh_CN",
   "description": "FE助手：包括JSON格式化、二维码生成与解码、信息编解码、代码压缩、美化、页面取色、Markdown与HTML互转、网页滚动截屏、正则表达式、时间转换工具、编码规范检测、页面性能检测、Ajax接口调试",
@@ -32,7 +32,11 @@
     "activeTab",
     "<all_urls>"
   ],
-  "optional_permissions": ["downloads"],
+  "optional_permissions": [
+    "downloads",
+    "webRequest",
+    "webRequestBlocking"
+  ],
   "commands": {
     "_execute_browser_action": {
       "suggested_key": {