更新官网

apps/chrome.json

@@ -64,9 +64,7 @@
             "background/tools.js",
 
             "code-beautify/beautify.js",
-            "code-beautify/beautify-css.js",
-
-            "page-timing/timing.js"
+            "code-beautify/beautify-css.js"
         ],
         "matches": ["<all_urls>"]
       }

apps/json-format/content-script.js

@@ -417,21 +417,22 @@ window.JsonAutoFormat = (() => {
 
                 // 格式化
                 try {
-                    Formatter.format(source, theme);
+                    await Formatter.format(source, theme);
                 } catch (e) {
-                    Formatter.formatSync(source, theme)
+                    await Formatter.formatSync(source, theme)
                 }
-                $('#jfToolbar').fadeIn(500);
+                $('#jfToolbar').show();
             })();
         } else {
-            // 格式化
-            try {
-                Formatter.format(source, theme);
-            } catch (e) {
-                Formatter.formatSync(source, theme)
-            }
-
-            $('#jfToolbar').fadeIn(500);
+            (async () => {
+                // 格式化
+                try {
+                    await Formatter.format(source, theme);
+                } catch (e) {
+                    await Formatter.formatSync(source, theme)
+                }
+                $('#jfToolbar').show();
+            })();
         }
 
 
@@ -753,6 +754,8 @@ window.JsonAutoFormat = (() => {
 
 
 if(location.protocol !== 'chrome-extension:') {
-    window.JsonAutoFormat.format();
+    (async () => {
+        await window.JsonAutoFormat.format();
+    })();
 }
 

apps/json-format/format-lib.js

@@ -478,23 +478,31 @@ window.Formatter = (function () {
     };
     
     /**
-     * 初始化或获取Worker实例
-     * 使用单例模式确保只创建一个Worker
+     * 初始化或获取Worker实例（异步，兼容Chrome/Edge/Firefox）
+     * @returns {Promise<Worker|null>}
      */
-    let _getWorkerInstance = function() {
+    let _getWorkerInstance = async function() {
         if (workerInstance) {
             return workerInstance;
         }
-        
+        let workerUrl = chrome.runtime.getURL('json-format/json-worker.js');
+        // 判断是否为Firefox
+        const isFirefox = typeof InstallTrigger !== 'undefined' || navigator.userAgent.includes('Firefox');
         try {
-            // 统一使用扩展内的脚本文件创建Worker
-            let workerUrl = chrome.runtime.getURL('json-format/json-worker.js');
-            workerInstance = new Worker(workerUrl);
-            
-            return workerInstance;
+            if (isFirefox) {
+                workerInstance = new Worker(workerUrl);
+                return workerInstance;
+            } else {
+                // Chrome/Edge用fetch+Blob方式
+                const resp = await fetch(workerUrl);
+                const workerScript = await resp.text();
+                const blob = new Blob([workerScript], { type: 'application/javascript' });
+                const blobUrl = URL.createObjectURL(blob);
+                workerInstance = new Worker(blobUrl);
+                return workerInstance;
+            }
         } catch (e) {
             console.error('创建Worker失败:', e);
-            // 出现任何错误，返回null
             workerInstance = null;
             return null;
         }
@@ -502,17 +510,17 @@ window.Formatter = (function () {
 
     /**
      * 执行代码格式化
+     * 支持异步worker
      */
-    let format = function (jsonStr, skin) {
+    let format = async function (jsonStr, skin) {
         cachedJsonString = JSON.stringify(JSON.parse(jsonStr), null, 4);
 
         _initElements();
         jfPre.html(htmlspecialchars(cachedJsonString));
 
         try {
-            // 获取Worker实例
-            let worker = _getWorkerInstance();
-            
+            // 获取Worker实例（异步）
+            let worker = await _getWorkerInstance();
             if (worker) {
                 // 设置消息处理程序
                 worker.onmessage = function (evt) {
@@ -521,11 +529,9 @@ window.Formatter = (function () {
                         case 'FORMATTING':
                             formattingMsg.show();
                             break;
-
                         case 'FORMATTED':
                             formattingMsg.hide();
                             jfContent.html(msg[1]);
-
                             _buildOptionBar();
                             // 事件绑定
                             _addEvents();
@@ -534,7 +540,6 @@ window.Formatter = (function () {
                             break;
                     }
                 };
-                
                 // 发送格式化请求
                 worker.postMessage({
                     jsonString: jsonStr,

apps/json-format/index.js

@@ -172,10 +172,12 @@ new Vue({
                         (async () => {
                             let txt = await JsonEnDecode.urlDecodeByFetch(source);
                             source = JsonEnDecode.uniDecode(txt);
-                            Formatter.format(source);
+                            await Formatter.format(source);
                         })();
                     } else {
-                        Formatter.format(source);
+                        (async () => {
+                            await Formatter.format(source);
+                        })();
                     }
 
                     this.placeHolder = '';

apps/manifest.json

@@ -64,9 +64,7 @@
             "background/tools.js",
 
             "code-beautify/beautify.js",
-            "code-beautify/beautify-css.js",
-
-            "page-timing/timing.js"
+            "code-beautify/beautify-css.js"
         ],
         "matches": ["<all_urls>"]
       }

website/docs/index.md

@@ -4,6 +4,10 @@
 
 FeHelper 是一款强大的浏览器开发者工具集，为Web开发者提供了丰富的开发辅助功能。它集成了多种实用工具，包括代码格式化、JSON处理、编码转换、性能分析等，旨在提高开发效率，简化开发流程。
 
+![popup](static/screenshot/popup.png)
+
+![options](static/screenshot/options.png)
+
 ## 主要特性
 
 - 🛠️ 丰富的工具集：包含30+种开发工具
@@ -15,45 +19,45 @@ FeHelper 是一款强大的浏览器开发者工具集，为Web开发者提供
 ## 工具列表
 
 ### 代码相关工具
-- [JSON格式化工具](json-format.md) - 支持JSON的格式化、美化、压缩等功能
-- [JSON比对工具](json-diff.md) - 支持两个JSON内容的差异比较
-- [代码美化工具](code-beautify.md) - 支持多种编程语言的代码格式化
-- [代码压缩工具](code-compress.md) - 支持HTML、JavaScript、CSS代码压缩
+- [JSON格式化工具](?tool=json-format) - 支持JSON的格式化、美化、压缩等功能
+- [JSON比对工具](?tool=json-diff) - 支持两个JSON内容的差异比较  
+- [代码美化工具](?tool=code-beautify) - 支持多种编程语言的代码格式化
+- [代码压缩工具](?tool=code-compress) - 支持HTML、JavaScript、CSS代码压缩
 
 ### 图片处理工具
-- [二维码工具](qr-code.md) - 支持二维码生成和解码
-- [图片Base64转换](image-base64.md) - 支持图片与Base64互转
-- [SVG转换工具](svg-converter.md) - 支持SVG转图片格式
+- [二维码工具](?tool=qr-code) - 支持二维码生成和解码
+- [图片Base64转换](?tool=image-base64) - 支持图片与Base64互转
+- [SVG转换工具](?tool=svg-converter) - 支持SVG转图片格式
 
 ### 开发辅助工具
-- [简易Postman](postman.md) - 接口调试工具
-- [WebSocket工具](websocket.md) - WebSocket接口测试工具
-- [网页性能优化](page-timing.md) - 网站性能分析工具
-- [网页栅格标尺](grid-ruler.md) - 网页布局辅助工具
+- [简易Postman](?tool=postman) - 接口调试工具
+- [WebSocket工具](?tool=websocket) - WebSocket接口测试工具
+- [网页性能优化](?tool=page-timing) - 网站性能分析工具
+- [网页栅格标尺](?tool=grid-ruler) - 网页布局辅助工具
 
 ### 编码转换工具
-- [信息编码转换](en-decode.md) - 支持多种编码格式转换
-- [进制转换工具](trans-radix.md) - 支持2-36进制转换
-- [颜色转换工具](trans-color.md) - 支持颜色格式转换
+- [信息编码转换](?tool=en-decode) - 支持多种编码格式转换
+- [进制转换工具](?tool=trans-radix) - 支持2-36进制转换
+- [颜色转换工具](?tool=trans-color) - 支持颜色格式转换
 
 ### 实用工具
-- [时间戳转换](timestamp.md) - 时间与时间戳互转
-- [随机密码生成](password.md) - 密码生成工具
-- [便签笔记](sticky-notes.md) - 浏览器便签工具
-- [Markdown工具](html2markdown.md) - Markdown编辑与转换
-- [正则表达式工具](regexp.md) - 正则表达式速查
-- [Crontab工具](crontab.md) - Crontab表达式生成器
-- [贷款计算器](loan-rate.md) - 贷款还款计算工具
+- [时间戳转换](?tool=timestamp) - 时间与时间戳互转
+- [随机密码生成](?tool=password) - 密码生成工具
+- [便签笔记](?tool=sticky-notes) - 浏览器便签工具
+- [Markdown工具](?tool=html2markdown) - Markdown编辑与转换
+- [正则表达式工具](?tool=regexp) - 正则表达式速查
+- [Crontab工具](?tool=crontab) - Crontab表达式生成器
+- [贷款计算器](?tool=loan-rate) - 贷款还款计算工具
 
 ### 高级功能
-- [AI智能助手](aiagent.md) - AI驱动的智能对话工具
-- [网页油猴工具](page-monkey.md) - 网页自动化工具
-- [网页截屏工具](screenshot.md) - 网页截图工具
-- [页面取色工具](color-picker.md) - 网页颜色拾取工具
-- [思维导图](naotu.md) - 在线思维导图工具
-- [Excel转JSON](excel2json.md) - Excel数据转换工具
-- [图表制作工具](chart-maker.md) - 数据可视化工具
-- [海报生成工具](poster-maker.md) - 快速海报制作工具
+- [AI智能助手](?tool=aiagent) - AI驱动的智能对话工具
+- [网页油猴工具](?tool=page-monkey) - 网页自动化工具
+- [网页截屏工具](?tool=screenshot) - 网页截图工具
+- [页面取色工具](?tool=color-picker) - 网页颜色拾取工具
+- [思维导图](?tool=naotu) - 在线思维导图工具
+- [Excel转JSON](?tool=excel2json) - Excel数据转换工具
+- [图表制作工具](?tool=chart-maker) - 数据可视化工具
+- [海报生成工具](?tool=poster-maker) - 快速海报制作工具
 
 ## 安装方式
 

website/docs/json-format.md

@@ -4,6 +4,11 @@
 
 JSON格式化工具是FeHelper提供的一个强大的JSON数据处理工具，它能够帮助开发者快速格式化、美化、压缩和验证JSON数据。该工具支持多种JSON处理功能，包括自动格式化、手动格式化、乱码解码、排序、BigInt处理等，是Web开发中不可或缺的辅助工具。
 
+
+![popup](static/screenshot/json-format.png)
+
+![popup](static/screenshot/json-format-auto.png)
+
 ## 主要功能
 
 ### 1. 基础格式化功能

website/docs/qr-code.md

@@ -3,6 +3,9 @@
 ## 简介
 二维码工具是FeHelper提供的一个多功能工具，支持二维码的生成和解码功能。该工具提供了直观的用户界面，让用户可以轻松地生成自定义二维码，也可以快速解码已有的二维码图片。
 
+
+![popup](static/screenshot/qr-code.png)
+
 ## 主要功能
 
 ### 二维码生成功能

website/index.html

@@ -3,8 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>FeHelper - 前端开发者的超级助手</title>
-    <meta name="description" content="FeHelper是一个功能强大的浏览器扩展，专为前端开发者设计，集成了多种实用工具，支持Chrome和Edge浏览器。">
+    <title>FeHelper - 职场人的超级助手</title>
+    <meta name="description" content="FeHelper是一个功能强大的浏览器扩展，集成了丰富的实用工具，适合所有职场人使用，支持Chrome和Edge浏览器。">
     
     <!-- Favicon -->
     <link rel="icon" type="image/x-icon" href="static/img/favicon.ico">
@@ -51,11 +51,11 @@
         <div class="container">
             <div class="hero-content">
                 <h1 class="hero-title">
-                    前端开发者的 <span class="gradient-text">超级助手</span>
+                    职场人的 <span class="gradient-text">超级助手</span>
                 </h1>
                 <p class="hero-subtitle">
                     <span class="subtitle-main">
-                        FeHelper是一个功能强大的 <span class="highlight">开源浏览器扩展</span>，专为前端开发者设计，集成了30多种实用工具，支持Chrome和Edge浏览器。
+                        FeHelper是一个功能强大的 <span class="highlight">开源浏览器扩展</span>，集成了30多种实用工具，适合IT、数据、设计、运营、行政、财务等各类职场人，支持Chrome、Edge、Firefox浏览器。
                     </span>
                 </p>
                 <div class="badges-row pro-badges" style="margin: 32px 0 24px 0;">
@@ -88,7 +88,7 @@
                             <span></span>
                             <span></span>
                         </div>
-                        <div class="browser-url">fehelper.dev</div>
+                        <div class="browser-url">fehelper.com</div>
                         <div class="extension-icon">
                             <img src="static/img/fe-16.png" alt="FeHelper Extension" class="extension-logo">
                         </div>
@@ -96,20 +96,20 @@
                     <div class="browser-content">
                         <div class="tool-grid-demo">
                             <div class="tool-card-demo json">
-                                <i class="fas fa-code"></i>
-                                <span>JSON</span>
+                                <i class="fas fa-database"></i>
+                                <span>JSON类工具</span>
                             </div>
                             <div class="tool-card-demo qr">
-                                <i class="fas fa-qrcode"></i>
-                                <span>二维码</span>
+                                <i class="fas fa-image"></i>
+                                <span>图片类工具</span>
                             </div>
                             <div class="tool-card-demo encode">
-                                <i class="fas fa-key"></i>
-                                <span>编码</span>
+                                <i class="fas fa-code"></i>
+                                <span>代码类工具</span>
                             </div>
                             <div class="tool-card-demo postman">
-                                <i class="fas fa-paper-plane"></i>
-                                <span>接口</span>
+                                <i class="fas fa-robot"></i>
+                                <span>AI类工具</span>
                             </div>
                         </div>
                     </div>
@@ -147,7 +147,7 @@
         <div class="container">
             <div class="section-header">
                 <h2>为什么选择 FeHelper？</h2>
-                <p>专为前端开发者打造的全能工具集</p>
+                <p>为职场人量身打造的全能工具集</p>
             </div>
             <div class="features-grid">
                 <div class="feature-card">
@@ -176,7 +176,7 @@
                         <i class="fas fa-tools"></i>
                     </div>
                     <h3>工具齐全 <span class="feature-sub">30+ 专业工具，一站集成</span></h3>
-                    <p>涵盖前端开发全流程，JSON、二维码、编码转换、接口调试、取色、截图、便签等，满足所有开发需求。</p>
+                    <p>涵盖IT开发、数据处理、图片处理、效率办公等多种场景，JSON、二维码、编码转换、接口调试、取色、截图、便签等，满足各类职场人需求。</p>
                 </div>
                 <div class="feature-card">
                     <div class="feature-icon">
@@ -367,7 +367,7 @@
         <div class="container">
             <div class="section-header">
                 <h2>关于 FeHelper</h2>
-                <p>从2011年到现在，十多年专注前端开发工具</p>
+                <p>从2011年到现在，十多年专注实用工具集成</p>
             </div>
             <div class="about-content">
                 <div class="about-text">
@@ -375,7 +375,7 @@
                         <div class="timeline-year">2011</div>
                         <div class="timeline-content">
                             <h3>项目启动</h3>
-                            <p>FeHelper 1.0版本在Google Chrome Webstore发布，开始服务前端开发者</p>
+                            <p>FeHelper 1.0版本在Google Chrome Webstore发布，开始服务广大职场人</p>
                         </div>
                     </div>
                     <div class="timeline-item">
@@ -430,7 +430,7 @@
                     <h3>Google Chrome</h3>
                     <p>Chrome Web Store 官方发布</p>
                     <div class="browser-stats">
-                        <span class="rating">★★★★☆ 4.5</span>
+                        <span class="rating">★★★★★ 4.7</span>
                         <span class="users">200K+ 用户</span>
                     </div>
                     <a href="https://chrome.google.com/webstore/detail/pkgccpejnmalmdinmhkkfafefagiiiad" class="browser-link" target="_blank">
@@ -438,32 +438,32 @@
                         安装扩展
                     </a>
                 </div>
-                <div class="browser-card firefox">
+                <div class="browser-card edge">
                     <div class="browser-icon">
-                        <i class="fab fa-firefox"></i>
+                        <i class="fab fa-edge"></i>
                     </div>
-                    <h3>Mozilla Firefox</h3>
-                    <p>Firefox Add-ons 官方发布</p>
+                    <h3>Microsoft Edge</h3>
+                    <p>Edge Add-ons 官方发布</p>
                     <div class="browser-stats">
-                        <span class="rating">★★★★★ 4.6</span>
-                        <span class="users">30K+ 用户</span>
+                        <span class="rating">★★★★★ 4.8</span>
+                        <span class="users">100K+ 用户</span>
                     </div>
-                    <a href="https://addons.mozilla.org/zh-CN/firefox/addon/web-fe-tool/" class="browser-link" target="_blank">
+                    <a href="https://microsoftedge.microsoft.com/addons/detail/feolnkbgcbjmamimpfcnklggdcbgakhe" class="browser-link" target="_blank">
                         <i class="fas fa-external-link-alt"></i>
                         安装扩展
                     </a>
                 </div>
-                <div class="browser-card edge">
+                <div class="browser-card firefox">
                     <div class="browser-icon">
-                        <i class="fab fa-edge"></i>
+                        <i class="fab fa-firefox"></i>
                     </div>
-                    <h3>Microsoft Edge</h3>
-                    <p>Edge Add-ons 官方发布</p>
+                    <h3>Mozilla Firefox</h3>
+                    <p>Firefox Add-ons 官方发布</p>
                     <div class="browser-stats">
-                        <span class="rating">★★★★★ 4.8</span>
-                        <span class="users">50K+ 用户</span>
+                        <span class="rating">★★★★★ 4.9</span>
+                        <span class="users">全新发布</span>
                     </div>
-                    <a href="https://microsoftedge.microsoft.com/addons/detail/feolnkbgcbjmamimpfcnklggdcbgakhe" class="browser-link" target="_blank">
+                    <a href="https://addons.mozilla.org/zh-CN/firefox/addon/web-fe-tool/" class="browser-link" target="_blank">
                         <i class="fas fa-external-link-alt"></i>
                         安装扩展
                     </a>
@@ -553,12 +553,12 @@
                     <img src="static/img/fe-48.png" alt="FeHelper Logo" class="logo-icon">
                     <span>FeHelper</span>
                 </div>
-                    <p>专为前端开发者打造的超级助手</p>
+                    <p>为职场人打造的超级助手</p>
                     <div class="social-links">
                         <a href="https://github.com/zxlie/FeHelper" target="_blank">
                             <i class="fab fa-github"></i>
                         </a>
-                        <a href="https://www.baidufe.com/fehelper/feedback.html" target="_blank">
+                        <a href="https://github.com/zxlie/FeHelper/issues/412" target="_blank">
                             <i class="fas fa-envelope"></i>
                         </a>
                     </div>
@@ -574,7 +574,7 @@
                         <h4>开发者</h4>
                         <a href="https://github.com/zxlie/FeHelper" target="_blank">GitHub</a>
                         <a href="https://github.com/zxlie/FeHelper/issues" target="_blank">问题反馈</a>
-                        <a href="https://www.baidufe.com/fehelper/feedback.html" target="_blank">联系我们</a>
+                        <a href="https://github.com/zxlie/FeHelper/issues/412" target="_blank">联系我们</a>
                     </div>
                     <div class="link-group">
                         <h4>支持</h4>
@@ -585,7 +585,7 @@
             </div>
             <div class="footer-bottom">
                 <p>&copy; 2024 FeHelper. Open source under MIT license.</p>
-                <p>Made with ❤️ for frontend developers</p>
+                <p>Made with ❤️ for all office professionals</p>
             </div>
         </div>
     </footer>

website/static/css/docs.css

@@ -316,3 +316,8 @@
     }
 } 
 
+.doc-content img {
+    max-width: 80%;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+}