在主要的工具中增加微信打赏入口

apps/background/background.js

@@ -102,6 +102,38 @@ let BgPageInstance = (function () {
         });
     };
 
+    /**
+     * 打开打赏弹窗
+     * @param {string} toolName - 工具名称
+     */
+    chrome.gotoDonateModal = function (toolName) {
+        chrome.tabs.query({currentWindow: true}, function (tabs) {
+
+            Settings.getOptions((opts) => {
+                let isOpened = false;
+                let tabId;
+                let reg = new RegExp("^chrome.*\\/options\\/index.html\\?donate_from=" + toolName + "$", "i");
+                for (let i = 0, len = tabs.length; i < len; i++) {
+                    if (reg.test(tabs[i].url)) {
+                        isOpened = true;
+                        tabId = tabs[i].id;
+                        break;
+                    }
+                }
+                if (!isOpened) {
+                    let url = `/options/index.html?donate_from=${toolName}`;
+                    chrome.tabs.create({ url,active: true });
+                } else {
+                    chrome.tabs.update(tabId, {highlighted: true}).then(tab => {
+                        chrome.tabs.reload(tabId);
+                    });
+                }
+
+            });
+
+        });
+    };
+
     /**
      * 动态运行工具
      * @param configs
@@ -440,6 +472,9 @@ let BgPageInstance = (function () {
                     case 'open-options-page':
                         chrome.runtime.openOptionsPage();
                         break;
+                    case 'open-donate-modal':
+                        chrome.gotoDonateModal(request.params.toolName);
+                        break;
                 }
                 callback && callback(request.params);
             } else {

apps/chart-maker/index.html

@@ -27,6 +27,8 @@
                 <span class="fehelper-text">FeHelper</span>
             </a>
             <span class="page-title-suffix">：图表生成器</span>
+            <a href="#" class="x-donate-link"><i class="nav-icon">❤&nbsp;</i>打赏鼓励</a>
+            <a class="x-other-tools"><i class="icon-plus-circle"></i> 探索更多实用工具 <span class="tool-market-badge">工具市场</span></a>
         </div>
     </div>
 

apps/chart-maker/main.js

@@ -8,10 +8,12 @@ document.addEventListener('DOMContentLoaded', function() {
     const exportPngBtn = document.getElementById('export-png-btn');
     const exportJpgBtn = document.getElementById('export-jpg-btn');
     const copyImgBtn = document.getElementById('copy-img-btn');
-    const chartTypeSelect = document.getElementById('chart-type');
     const manualFormatSelect = document.getElementById('manual-format');
     const fileUploadInput = document.getElementById('file-upload');
     const manualFormatContainer = document.getElementById('manual-format-container');
+    const donateLink = document.querySelector('.x-donate-link');
+    const otherToolsLink = document.querySelector('.x-other-tools');
+
     const manualInputContainers = [simpleDataContainer, seriesDataContainer, csvDataContainer];
     
     // 初始化显示状态
@@ -55,6 +57,22 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     });
 
+    // 监听打赏链接点击事件
+    donateLink.addEventListener('click', function(event) {
+        event.preventDefault();
+        chrome.runtime.sendMessage({
+            type: 'fh-dynamic-any-thing',
+            thing: 'open-donate-modal', 
+            params: { toolName: 'chart-maker' }
+        });
+    });
+
+    // 监听探索更多工具链接点击事件
+    otherToolsLink.addEventListener('click', function(event) {
+        event.preventDefault(); 
+        chrome.runtime.openOptionsPage();
+    });
+
     // 监听手动格式选择变化
     manualFormatSelect.addEventListener('change', function() {
         const format = this.value;

apps/chart-maker/style.css

@@ -14,8 +14,7 @@ body {
     background-image: linear-gradient(to right, rgba(245, 247, 250, 0.8) 1px, transparent 1px),
                       linear-gradient(to bottom, rgba(245, 247, 250, 0.8) 1px, transparent 1px);
     background-size: 20px 20px;
-    padding-top: 15px;
-    max-width: 1200px;
+    
     margin: 0 auto;
     font-size:100%;
 }
@@ -613,6 +612,7 @@ canvas#chart-canvas[data-chart-rendered] {
     display: flex;
     align-items: center;
     margin-bottom: 20px;
+    position: relative;
 }
 
 .page-header .header-link {
@@ -621,7 +621,7 @@ canvas#chart-canvas[data-chart-rendered] {
     text-decoration: none;
     color: #5a5c69;
     font-weight: 500;
-    font-size: 1.2rem;
+    font-size: 14px;
     transition: color 0.2s ease-in-out;
 }
 
@@ -641,6 +641,90 @@ canvas#chart-canvas[data-chart-rendered] {
 
 .page-header .page-title-suffix {
     margin-left: 8px;
-    font-size: 1.2rem;
-    color: #858796;
-} 
+    font-size: 14px;
+    font-weight: 500;
+} 
+/* Style for the "Explore More Tools" button */
+.page-header>a.x-other-tools {
+    margin: 0; /* Reset margin */
+    font-size: 12px; /* Slightly smaller */
+    cursor: pointer;
+    text-decoration: none;
+    -webkit-user-select: none;
+    user-select: none;
+    color: #495057; /* Grey text */
+    background-color: #f8f9fa; /* Light grey background */
+    padding: 6px 12px; /* Adjusted padding */
+    border-radius: 6px; /* Standard rounded corners */
+    border: 1px solid #dee2e6; /* Match border color */
+    transition: all 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+    position: absolute;
+    right: 10px;
+}
+
+.page-header>a.x-other-tools .icon-plus-circle {
+    display: inline-block;
+    width: 14px; /* Slightly smaller icon */
+    height: 14px;
+    background: url(../static/img/plus-circle.svg) no-repeat center center;
+    background-size: contain;
+    margin-right: 4px;
+}
+
+.page-header>a.x-other-tools .tool-market-badge {
+    display: inline-block;
+    background-color: #007bff; /* Match theme blue */
+    color: white;
+    padding: 2px 7px;
+    border-radius: 4px; /* Slightly less round */
+    margin-left: 6px;
+    font-size: 11px; /* Smaller badge text */
+    font-weight: 500;
+}
+
+.page-header>a.x-other-tools:hover {
+    color: #212529;
+    background-color: #e9ecef;
+    border-color: #ced4da;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+    transform: none; /* Remove translateY */
+}
+/* 保持原有的顶部导航样式 */
+.x-donate-link {
+    font-size: 14px;
+    font-weight: 500;
+    color: #2563eb;
+    cursor: pointer;
+    text-decoration: none;
+    border: none;
+    margin-left: 70px;
+    white-space: nowrap;
+    margin-right: auto;
+    padding: 5px 16px;
+    border-radius: 20px;
+    background-color: #eff6ff;
+    transition: all 0.2s ease;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.1);
+}
+
+.x-donate-link:hover {
+    background-color: #dbeafe;
+    color: #1d4ed8;
+    text-decoration: none;
+    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.15);
+    transform: translateY(-1px);
+}
+
+.x-donate-link {
+    margin: 0 10px;
+    font-size: 12px;
+    font-weight: normal;
+    position: absolute;
+    right: 220px;
+}

apps/en-decode/index.css

@@ -271,4 +271,41 @@ td.td-label {
     background-color: #e6edff;
     box-shadow: 0 2px 5px rgba(0,0,0,0.15);
     transform: translateY(-1px);
+}
+
+/* 保持原有的顶部导航样式 */
+.x-donate-link {
+    font-size: 14px;
+    font-weight: 500;
+    color: #2563eb;
+    cursor: pointer;
+    text-decoration: none;
+    border: none;
+    white-space: nowrap;
+    margin-right: auto;
+    border-radius: 20px;
+    background-color: #eff6ff;
+    transition: all 0.2s ease;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.1);
+    position: absolute;
+    right: 230px;
+    top: 8px;
+    padding: 6px 12px;
+}
+
+.x-donate-link:hover {
+    background-color: #dbeafe;
+    color: #1d4ed8;
+    text-decoration: none;
+    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.15);
+    transform: translateY(-1px);
+}
+
+.x-donate-link {
+    margin: 0 10px;
+    font-size: 12px;
+    font-weight: normal;
 }

apps/en-decode/index.html

@@ -16,7 +16,7 @@
                 <h3 class="panel-title">
                     <a href="https://www.baidufe.com/fehelper/index/index.html" target="_blank" class="x-a-high">
                         <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>：信息编解码工具
-
+                    <a href="#" class="x-donate-link" @click="openDonateModal($event)"><i class="nav-icon">❤&nbsp;</i>打赏鼓励</a>
                     <a class="x-other-tools" @click="openOptionsPage()"><i class="icon-plus-circle"></i> 探索更多实用工具 <span class="tool-market-badge">工具市场</span></a>
                 </h3>
             </div>

apps/en-decode/index.js

@@ -123,6 +123,15 @@ new Vue({
 
         openOptionsPage: function() {
             chrome.runtime.openOptionsPage();
+        },
+
+        openDonateModal: function(event ){
+            event.preventDefault();
+            chrome.runtime.sendMessage({
+                type: 'fh-dynamic-any-thing',
+                thing: 'open-donate-modal',
+                params: { toolName: 'en-decode' }
+            });
         }
     }
 });

apps/json-format/content-script.css

@@ -591,6 +591,15 @@ html.fh-jf svg:not(:root) {
 .fe-feedback>a.x-other-tools-us {
     display: none;
 }
+.x-toolbar>.x-donate-link {
+    margin-left: 20px;
+}
+.x-toolbar>.x-donate-link-us {
+    display: none;
+}
+.x-toolbar>.x-donate-link a:hover {
+    color: #f00;
+}
 
 .fe-feedback>a.x-other-tools .icon-plus-circle {
     display: inline-block;

apps/json-format/content-script.js

@@ -118,6 +118,7 @@ window.JsonAutoFormat = (() => {
             '    </span>' +
             '    <span class="x-fix-encoding"><span class="x-split">|</span><button class="xjf-btn" id="jsonGetCorrectCnt">乱码修正</button></span>' +
             '    <span id="optionBar"></span>' +
+            '    <span class="x-donate-link' + (isInUSA() ? ' x-donate-link-us' : '') + '"><a href="#" id="donateLink"><i class="nav-icon">❤</i>打赏鼓励</a></span>' +
             '    <span class="fe-feedback">' +
             '       <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>' +
@@ -339,6 +340,15 @@ window.JsonAutoFormat = (() => {
 
         $('.fe-feedback .x-settings').click(e => _createSettingPanel());
         $('#jsonGetCorrectCnt').click(e => _getCorrectContent());
+
+        $('.x-toolbar .x-donate-link').on('click', function (e) {
+            chrome.runtime.sendMessage({
+                type: 'fh-dynamic-any-thing',
+                thing: 'open-donate-modal',
+                params: { toolName: 'json-format' }
+            });
+        });
+        
     };
 
     let _didFormat = function () {

apps/json-format/index.css

@@ -33,15 +33,16 @@ html,body {
     opacity: 0.3;
     margin: 5px 0 0 -8px;
 }
-.x-xdemo,a.x-xdemo {
+.x-xdemo,a.x-xdemo,.x-donate-link>a {
     margin-left: 30px;
     font-size: 12px;
     color: blue;
     cursor: pointer;
     text-decoration: underline;
 }
-.x-xdemo:hover {
+.x-xdemo:hover, .x-donate-link>a:hover {
     text-decoration: underline;
+    color: #f00;
 }
 
 #errorTips {

apps/json-format/index.html

@@ -20,8 +20,8 @@
                         <span id="layoutBar">
                             <button id="btnLeftRight" ref="btnLeftRight" class="selected" @click="changeLayout('left-right')">左右布局</button><button id="btnUpDown" ref="btnUpDown" @click="changeLayout('up-down')">上下布局</button>
                         </span>
-
-                        <a class="x-other-tools" @click="openOptionsPage()"><i class="icon-plus-circle"></i> 探索更多实用工具 <span class="tool-market-badge">工具市场</span></a>
+                        <span class="x-donate-link" v-if="!isInUSAFlag" @click="openDonateModal()"><a href="#" id="donateLink"><i class="nav-icon">❤</i>打赏鼓励</a></span>
+                        <a class="x-other-tools" v-if="!isInUSAFlag" @click="openOptionsPage()"><i class="icon-plus-circle"></i> 探索更多实用工具 <span class="tool-market-badge">工具市场</span></a>
                     </h3>
                 </div>
             </div>

apps/json-format/index.js

@@ -23,7 +23,8 @@ new Vue({
         jsonLintSwitch: true,
         autoDecode: false,
         fireChange: true,
-        overrideJson: false
+        overrideJson: false,
+        isInUSAFlag: false
     },
     mounted: function () {
         // 自动开关灯控制
@@ -34,6 +35,8 @@ new Vue({
         this.autoDecode = localStorage.getItem(AUTO_DECODE);
         this.autoDecode = this.autoDecode === 'true';
 
+        this.isInUSAFlag = this.isInUSA();
+
         this.jsonLintSwitch = (localStorage.getItem(JSON_LINT) !== 'false');
         this.overrideJson = (localStorage.getItem(EDIT_ON_CLICK) === 'true');
         this.changeLayout(localStorage.getItem(LOCAL_KEY_OF_LAYOUT));
@@ -77,6 +80,19 @@ new Vue({
         }
     },
     methods: {
+        isInUSA: function () {
+            // 通过时区判断是否在美国
+            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);
+        },
+
         format: function () {
             this.errorMsg = '';
             this.placeHolder = this.defaultResultTpl;
@@ -286,6 +302,14 @@ new Vue({
             chrome.runtime.openOptionsPage();
         },
 
+        openDonateModal: function(){
+            chrome.runtime.sendMessage({
+                type: 'fh-dynamic-any-thing',
+                thing: 'open-donate-modal',
+                params: { toolName: 'json-format' }
+            });
+        },
+
         setDemo: function () {
             let demo = '{"BigIntSupported":995815895020119788889,"date":"20180322","message":"Success !","status":200,"city":"北京","count":632,"data":{"shidu":"34%","pm25":73,"pm10":91,"quality":"良","wendu":"5","ganmao":"极少数敏感人群应减少户外活动","yesterday":{"date":"21日星期三","sunrise":"06:19","high":"高温 11.0℃","low":"低温 1.0℃","sunset":"18:26","aqi":85,"fx":"南风","fl":"<3级","type":"多云","notice":"阴晴之间，谨防紫外线侵扰"},"forecast":[{"date":"22日星期四","sunrise":"06:17","high":"高温 17.0℃","low":"低温 1.0℃","sunset":"18:27","aqi":98,"fx":"西南风","fl":"<3级","type":"晴","notice":"愿你拥有比阳光明媚的心情"},{"date":"23日星期五","sunrise":"06:16","high":"高温 18.0℃","low":"低温 5.0℃","sunset":"18:28","aqi":118,"fx":"无持续风向","fl":"<3级","type":"多云","notice":"阴晴之间，谨防紫外线侵扰"},{"date":"24日星期六","sunrise":"06:14","high":"高温 21.0℃","low":"低温 7.0℃","sunset":"18:29","aqi":52,"fx":"西南风","fl":"<3级","type":"晴","notice":"愿你拥有比阳光明媚的心情"},{"date":"25日星期日","sunrise":"06:13","high":"高温 22.0℃","low":"低温 7.0℃","sunset":"18:30","aqi":71,"fx":"西南风","fl":"<3级","type":"晴","notice":"愿你拥有比阳光明媚的心情"},{"date":"26日星期一","sunrise":"06:11","high":"高温 21.0℃","low":"低温 8.0℃","sunset":"18:31","aqi":97,"fx":"西南风","fl":"<3级","type":"多云","notice":"阴晴之间，谨防紫外线侵扰"}]}}';
             editor.setValue(demo);

apps/poster-maker/css/main.css

@@ -677,6 +677,14 @@ body {
 .navbar-brand {
   display: flex;
   align-items: center;
+  position: relative;
+}
+.mod-head-actions{
+  position: absolute;
+  right: 0;
+} 
+.mod-head-actions a:hover{
+  color: #f00;
 }
 
 .brand-link {

apps/poster-maker/index.html

@@ -17,6 +17,12 @@
         <span class="brand-text">FeHelper</span>
         <span class="brand-subtitle">海报快速生成</span>
       </a>
+      <div class="mod-head-actions">
+          <a href="#" id="donateLink" class="nav-item donate-link">
+              <i class="nav-icon">❤</i>
+              <span>打赏鼓励</span>
+          </a>
+      </div>
     </div>
   </div>
 

apps/poster-maker/js/index.js

@@ -90,3 +90,15 @@ function setupPreviewZoom() {
   // 初始化时自动触发重置缩放
   resetZoomBtn.click();
 }
+
+/**
+ * 打赏鼓励
+ */
+document.getElementById('donateLink').addEventListener('click', (event  ) => {
+  event.preventDefault();
+  chrome.runtime.sendMessage({
+    type: 'fh-dynamic-any-thing',
+    thing: 'open-donate-modal',
+    params: { toolName: 'poster-maker' }
+  });
+});

apps/qr-code/index.css

@@ -244,7 +244,7 @@ td .x-panel .x-tips {
 }
 
 /* 保持原有的顶部导航样式 */
-.x-switch {
+.x-switch,.x-donate-link {
     font-size: 14px;
     font-weight: 500;
     color: #2563eb;
@@ -276,7 +276,7 @@ td .x-panel .x-tips {
     transition: transform 0.3s ease;
 }
 
-.x-switch:hover {
+.x-switch:hover,.x-donate-link:hover {
     background-color: #dbeafe;
     color: #1d4ed8;
     text-decoration: none;
@@ -288,6 +288,11 @@ td .x-panel .x-tips {
     transform: rotate(180deg);
     opacity: 1;
 }
+.x-donate-link {
+    margin: 0 10px;
+    font-size: 12px;
+    font-weight: normal;
+}
 
 form {
     display: none;

apps/qr-code/index.html

@@ -19,6 +19,7 @@
                             <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a><span class="title-text-wrapper-text">| 二维码{{qrEncodeMode? '生成':'解码'}}器</span>
                     </span>
                     <span class="x-switch" ref="btnSwitch" @click="trans">切换为{{!qrEncodeMode? ' 二维码生成器 ' : ' 解码/扫码 '}}模式&gt;&gt;</span>
+                    <a href="#" class="x-donate-link" @click="openDonateModal($event)"><i class="nav-icon">❤&nbsp;</i>打赏鼓励</a>
                     <a class="x-other-tools" @click="openOptionsPage()"><i class="icon-plus-circle"></i> 探索更多实用工具 <span class="tool-market-badge">工具市场</span></a>
                 </h3>
             </div>

apps/qr-code/index.js

@@ -298,6 +298,15 @@ new Vue({
                  // Optionally, provide a fallback link or message
                  // window.open('options.html'); // Example fallback
             }
+        },
+
+        openDonateModal: function(event ){
+            event.preventDefault();
+            chrome.runtime.sendMessage({
+                type: 'fh-dynamic-any-thing',
+                thing: 'open-donate-modal',
+                params: { toolName: 'qr-code' }
+            });
         }
     }
 });

apps/svg-converter/index.js

@@ -1256,6 +1256,19 @@ new Vue({
                     dimensions: '解析出错'
                 };
             }
+        },
+
+        /**
+         * 打开打赏弹窗
+         */
+        openDonateModal: function () {
+            chrome.runtime.sendMessage({
+                type: 'fh-dynamic-any-thing',
+                thing: 'open-donate-modal',
+                params: {
+                    toolName: 'svg-converter'
+                }
+            });
         }
     }
 });