upgrade auto json-format css style, add install more tools button

apps/background/background.js

@@ -437,6 +437,9 @@ let BgPageInstance = (function () {
                     case 'inject-content-css':
                         _injectContentCss(sender.tab.id,request.tool,!!request.devTool);
                         break;
+                    case 'open-options-page':
+                        chrome.runtime.openOptionsPage();
+                        break;
                 }
                 callback && callback(request.params);
             } else {

apps/json-format/content-script.css

@@ -290,7 +290,7 @@ html.fh-jf .x-toolbar {
     border-radius: 4px;
     -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
     box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
-    padding: 5px 15px;
+    padding: 10px 15px;
     position: sticky;
     top: 0;
     z-index: 10000;
@@ -563,6 +563,58 @@ html.fh-jf svg:not(:root) {
     right: 8px;
 }
 
+.fe-feedback>a.x-other-tools {
+    margin: 1px 0 0;
+    font-size: 12px;
+    cursor: pointer;
+    text-decoration: none;
+    -webkit-user-select: none;
+    user-select: none;
+    color: #333;
+    float: right;
+    background-color: #f5f8ff;
+    padding: 5px 10px;
+    border-radius: 15px;
+    border: 1px solid #d0d9ff;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    position: relative;
+    top: -8px;
+    right: -10px;
+}
+.fe-feedback>a.x-other-tools-us {
+    display: none;
+}
+
+.fe-feedback>a.x-other-tools .icon-plus-circle {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    background-size: contain;
+    font-size: 16px;
+    font-style: normal;
+    line-height: 14px;
+    margin-right: 0px;
+}
+
+.fe-feedback>a.x-other-tools .tool-market-badge {
+    display: inline-block;
+    background-color: #4d89fe;
+    color: white;
+    padding: 2px 6px;
+    border-radius: 10px;
+    margin-left: 5px;
+    font-size: 12px;
+    font-weight: bold;
+}
+.fe-feedback>a.x-other-tools:hover {
+    color: #333;
+    background-color: #e6edff;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
+    transform: translateY(-1px);
+}
+
 /*================ 皮肤：theme-default ===================*/
 html.fh-jf body.theme-default {
     background-color: #fff;

apps/json-format/content-script.js

@@ -89,6 +89,21 @@ window.JsonAutoFormat = (() => {
     };
 
     let _getHtmlFragment = () => {
+
+        // 判断当前地区是否在美国
+        const isInUSA = () => {
+            // 通过时区判断是否在美国
+            const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+            const isUSTimeZone = /^America\/(New_York|Chicago|Denver|Los_Angeles|Anchorage|Honolulu)/.test(timeZone);
+
+            // 通过语言判断
+            const language = navigator.language || navigator.userLanguage;
+            const isUSLanguage = language.toLowerCase().indexOf('en-us') > -1;
+
+            // 如果时区和语言都符合美国特征,则认为在美国
+            return (isUSTimeZone && isUSLanguage);
+        };
+
         return [
             '<div id="jfToolbar" class="x-toolbar" style="display:none">' +
             '    <a href="https://www.baidufe.com/fehelper/index.html" target="_blank" class="x-a-title">' +
@@ -107,6 +122,7 @@ window.JsonAutoFormat = (() => {
             '       <span class="x-settings"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 14 16" width="14">' +
             '           <path fill-rule="evenodd" d="M14 8.77v-1.6l-1.94-.64-.45-1.09.88-1.84-1.13-1.13-1.81.91-1.09-.45-.69-1.92h-1.6l-.63 1.94-1.11.45-1.84-.88-1.13 1.13.91 1.81-.45 1.09L0 7.23v1.59l1.94.64.45 1.09-.88 1.84 1.13 1.13 1.81-.91 1.09.45.69 1.92h1.59l.63-1.94 1.11-.45 1.84.88 1.13-1.13-.92-1.81.47-1.09L14 8.75v.02zM7 11c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"></path>' +
             '       </svg>高级定制</span>' +
+            '       <a class="x-other-tools' + (isInUSA() ? ' x-other-tools-us' : '') + '" style="cursor:pointer"><i class="icon-plus-circle">+</i>探索更多实用工具 <span class="tool-market-badge">工具市场</span></a>' +
             '       <a id="toggleBtn" title="展开或收起工具栏">隐藏&gt;&gt;</a>' +
             '    </span>' +
             '</div>',
@@ -219,6 +235,7 @@ window.JsonAutoFormat = (() => {
                     elBody.addClass('remove-quote');
                 }
             });
+
         } else if (sPanel[0].offsetHeight) {
             return sPanel.hide();
         } else {
@@ -312,6 +329,13 @@ window.JsonAutoFormat = (() => {
                 $('#jfToolbar input[name="alwaysShowToolbar"]').prop('checked', show);
             });
         });
+        
+        $('.fe-feedback .x-other-tools').on('click', function (e) {
+            chrome.runtime.sendMessage({
+                type: 'fh-dynamic-any-thing',
+                thing: 'open-options-page'
+            });
+        });
 
         $('.fe-feedback .x-settings').click(e => _createSettingPanel());
         $('#jsonGetCorrectCnt').click(e => _getCorrectContent());
@@ -639,23 +663,6 @@ window.JsonAutoFormat = (() => {
         let source = _getJsonText();
         if (source) {
             _formatTheSource(source);
-        }else{
-            // 原计划，是兜底走fetch的方式，再尝试做一次格式化，但是这里会有很多corner Case我没法回归，所以注释掉
-            // fetch(location.href)
-            // .then(response => response.text())
-            // .then(html => {
-            //     // 使用 DOMParser 解析 HTML
-            //     const parser = new DOMParser();
-            //     const doc = parser.parseFromString(html, "text/html");
-
-            //     // 移除不需要的标签
-            //     doc.querySelectorAll('style, script').forEach(el => el.remove());
-            //     const text = _getJsonContentFromDOM(doc.body);
-            //     if(text){
-            //         _formatTheSource(text);
-            //     }
-            // })
-            // .catch();
         }
     };
 
@@ -677,4 +684,4 @@ window.JsonAutoFormat = (() => {
 
 if(location.protocol !== 'chrome-extension:') {
     window.JsonAutoFormat.format();
-}
+}