增加对Firefox浏览器的支持：提供Firefox版插件

.gitignore

@@ -3,4 +3,5 @@
 .DS_Store
 node_modules/
 package-lock.json
-output/
+output/
+output-firefox/

README.md

@@ -1,11 +1,19 @@
-Web前端助手（FeHelper）- Chrome Extension
+Web前端助手（FeHelper）- Chrome&Firefox Extension
 =============================
 
 ## 一、官网地址
 https://www.baidufe.com/fehelper
 
+
+### 1、扩展示例
 ![Web前端助手-FeHelper](/apps/static/screenshot/menu.png)
 
+### 2、完整版FeHelper功能配置
+![Web前端助手-FeHelper](/apps/static/screenshot/fe-full-func.png)
+
+### 3、FeHelper右键菜单配置
+![Web前端助手-FeHelper](/apps/static/screenshot/fe-menu-func.png)
+
 ## 二、扩展安装地址：
 
 ### 1、官方安装地址
@@ -14,12 +22,15 @@ https://www.baidufe.com/fehelper/install.html
 ### 2、Chrome web store地址
 https://chrome.google.com/webstore/detail/pkgccpejnmalmdinmhkkfafefagiiiad?hl=zh-cn
 
-### 3、crx文件下载=>本地安装
+### 3、Firefox Add-ons
+https://addons.mozilla.org/zh-CN/firefox/addon/web%E5%89%8D%E7%AB%AF%E5%8A%A9%E6%89%8B-fehelper
+
+### 4、crx文件下载=>本地安装
 - 官网下载：https://www.baidufe.com/fehelper
 - 翻墙下载：https://chrome-extension-downloader.com/?extension=pkgccpejnmalmdinmhkkfafefagiiiad
 - 本站下载：[点击进入下载页](/apps/static/screenshot/crx)
 
-### 4、安装教程
+### 5、安装教程
 > 参考： https://www.baidufe.com/item/d1b710c290b38bda6b44.html
 
 ![安装教程](/apps/static/screenshot/how-to-install.gif)

apps/background/index.js

@@ -936,13 +936,23 @@ var BgPageInstance = (function () {
         _createOrRemoveContextMenu();
     };
 
+    /**
+     * 打开任意一个URL
+     * @param url
+     * @private
+     */
+    let _openUrl = function(url){
+        chrome.tabs.create({url: url});
+    };
+
     return {
         init: _init,
         runHelper: _runHelper,
         notify: notifyText,
         showColorPicker: _showColorPicker,
         tellMeAjaxDbgSwitch: _tellDevToolsDbgSwitchOn,
-        getCapturedData: PageCapture.getCapturedData
+        getCapturedData: PageCapture.getCapturedData,
+        openUrl: _openUrl
     };
 })();
 

apps/manifest.json

@@ -1,9 +1,9 @@
 {
   "name": "WEB前端助手(FeHelper)-Dev",
-  "version": "2019.06.1915",
+  "version": "2019.06.2715",
   "manifest_version": 2,
   "default_locale": "zh_CN",
-  "description": "FE助手：JSON格式化、JSON比对、二维码、信息编解码、代码压缩&美化、页面取色、Markdown、网页截屏、编码设置、正则、Crontab、时间转换、网页性能检测、密码生成器、便签笔记、chrome插件下载等",
+  "description": "Awesome，All In One的一个工具，包含多个独立小应用，比如：Json工具、代码美化工具、代码压缩、二维码工具、markdown工具、网页定制工具、便签笔记工具、信息加密与解密、随机密码生成、Crontab等等！",
   "icons": {
     "16": "static/img/fe-16.png",
     "48": "static/img/fe-48.png",
@@ -23,7 +23,10 @@
       "background/index.js"
     ]
   },
-  "options_page": "options/index.html",
+  "options_ui": {
+    "page": "options/index.html",
+    "open_in_tab": true
+  },
   "devtools_page": "ajax-debugger/index.html",
   "permissions": [
     "tabs",

apps/options/index.css

@@ -56,6 +56,11 @@ h5,h4 {
     background-color: transparent;
     color: inherit;
 }
+.b-firefox .x-disabled {
+    text-decoration: line-through;
+    text-decoration-color: red;
+    text-decoration-style: double;
+}
 .row-line {
     line-height: 24px;
 }

apps/options/index.js

@@ -14,7 +14,8 @@ new Vue({
         manifest: {},
         menuOpts: {},
         selectedMenu: [],
-        defaultMenu: Settings.getDefaultContextMenus()
+        defaultMenu: Settings.getDefaultContextMenus(),
+        isFireFox: window.navigator && /firefox/i.test(navigator.userAgent)
     },
 
     created: function () {
@@ -31,11 +32,17 @@ new Vue({
 
         Settings.getOptions((opts) => {
             this.selectedOpts = Object.keys(opts).filter(k => {
+                if (this.isFireFox) {
+                    if (this.disabledItem(k) || this.disabledItem(k, 'menu')) {
+                        return false;
+                    }
+                }
                 if (typeof(opts[k]) === 'string' && /^MENU_/.test(k)) {
                     this.selectedMenu.push(k);
                     return false;
                 }
-                return typeof(opts[k]) === 'string' && !['MAX_JSON_KEYS_NUMBER', 'AUTO_TEXT_DECODE'].includes(k)
+                return typeof(opts[k]) === 'string'
+                    && !['MAX_JSON_KEYS_NUMBER', 'AUTO_TEXT_DECODE'].includes(k);
             });
 
             this.maxJsonKeysNumber = opts['MAX_JSON_KEYS_NUMBER'];
@@ -44,16 +51,31 @@ new Vue({
             // 如果还没设置过menu，就用默认的了
             Settings.askMenuSavedOrNot(saved => {
                 if (!saved) {
-                    this.selectedMenu = this.defaultMenu;
+                    this.selectedMenu = this.defaultMenu.filter(m => {
+                        return !(this.isFireFox && this.disabledItem(m, 'menu'));
+                    });
                 }
             });
         });
         this.manifest = chrome.runtime.getManifest();
         this.menuOpts = Settings.getMenuOpts();
+
     },
 
     methods: {
 
+        disabledItem: (key, type) => {
+            if (!type || type !== 'menu') {
+                return ['PAGE_CAPTURE', 'COLOR_PICKER', 'FCP_HELPER_DETECT', 'REMOVE_BG',
+                    'SHOW_PAGE_LOAD_TIME', 'GRID_RULER', 'AJAX_DEBUGGER'].includes(key);
+            } else {
+                return ['MENU_PAGE_CAPTURE', 'MENU_COLOR_PICKER',
+                    'MENU_STR_ENDECODE', 'MENU_AJAX_DEBUGGER', 'MENU_PAGE_OPTIMI', 'MENU_DOWNLOAD_CRX',
+                    'MENU_CODE_STANDARD', 'MENU_GRID_RULER', 'MENU_REMOVE_BG'].includes(key);
+            }
+        },
+
+
         close: () => {
             chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
                 chrome.tabs.remove(tabs[0].id);
@@ -77,6 +99,9 @@ new Vue({
         },
 
         setShortcuts: function () {
+            if (this.isFireFox) {
+                return alert('此功能仅针对Google Chrome浏览器！')
+            }
             chrome.tabs.create({
                 url: 'chrome://extensions/shortcuts'
             });

apps/popup/index.html

@@ -23,9 +23,9 @@
                     <b></b>代码压缩工具</li>
                 <li class="-x-qrcode" @click="runHelper('QR_CODE',1)" v-if="canMeShow.QR_CODE">
                     <b></b>二维码生成器</li>
-                <li class="-x-pagecapture" @click="runHelper('PAGE_CAPTURE',0)" v-if="canMeShow.PAGE_CAPTURE">
+                <li class="-x-pagecapture" @click="runHelper('PAGE_CAPTURE',0)" v-if="canMeShow.PAGE_CAPTURE && !isFireFox">
                     <b></b>网页滚动截屏</li>
-                <li class="-x-colorpicker" @click="runHelper('COLOR_PICKER',0)" v-if="canMeShow.COLOR_PICKER">
+                <li class="-x-colorpicker" @click="runHelper('COLOR_PICKER',0)" v-if="canMeShow.COLOR_PICKER && !isFireFox">
                     <b></b>页面取色工具</li>
                 <li class="-x-regexp" @click="runHelper('REGEXP_TOOL',1)" v-if="canMeShow.REGEXP_TOOL">
                     <b></b>Js正则表达式</li>
@@ -37,26 +37,26 @@
                     <b></b>随机密码生成</li>
                 <li class="-x-markdown" @click="runHelper('HTML_TO_MARKDOWN',1)" v-if="canMeShow.HTML_TO_MARKDOWN">
                     <b></b>Markdown转换</li>
-                <li class="-x-fcp" @click="runHelper('FCP_HELPER_DETECT',0)" v-if="canMeShow.FCP_HELPER_DETECT">
+                <li class="-x-fcp" @click="runHelper('FCP_HELPER_DETECT',0)" v-if="canMeShow.FCP_HELPER_DETECT && !isFireFox">
                     <b></b>编码规范检测</li>
-                <li class="-x-loadtime" @click="runHelper('SHOW_PAGE_LOAD_TIME',0)" v-if="canMeShow.SHOW_PAGE_LOAD_TIME">
+                <li class="-x-loadtime" @click="runHelper('SHOW_PAGE_LOAD_TIME',0)" v-if="canMeShow.SHOW_PAGE_LOAD_TIME && !isFireFox">
                     <b></b>页面性能检测</li>
-                <li class="-x-grid-ruler" @click="runHelper('GRID_RULER',0)" v-if="canMeShow.GRID_RULER">
+                <li class="-x-grid-ruler" @click="runHelper('GRID_RULER',0)" v-if="canMeShow.GRID_RULER && !isFireFox">
                     <b></b>页面栅格标尺</li>
                 <li class="-x-page-modifier" @click="runHelper('PAGE_MODIFIER',1)" v-if="canMeShow.PAGE_MODIFIER">
                     <b></b>网页再造精灵</li>
                 <li class="-x-multi-toolkit" @click="runHelper('MULTI_TOOLKIT',1)" v-if="canMeShow.MULTI_TOOLKIT">
                     <b></b>多维小工具集</li>
-                <li class="-x-ajax-debugger" title="在开发者工具-Console面板使用" @click="runHelper('AJAX_DEBUGGER',0)" v-if="canMeShow.AJAX_DEBUGGER">
+                <li class="-x-ajax-debugger" title="在开发者工具-Console面板使用" @click="runHelper('AJAX_DEBUGGER',0)" v-if="canMeShow.AJAX_DEBUGGER && !isFireFox">
                     <b></b>Ajax调试:<i>{{ ajaxDebugger }}</i></li>
                 <li class="-x-sticky-notes" @click="runHelper('STICKY_NOTES',1)" v-if="canMeShow.STICKY_NOTES">
                     <b></b>我的便签笔记</li>
-                <li class="-x-remove-bg" @click="runHelper('REMOVE_BG',1)" v-if="canMeShow.REMOVE_BG">
+                <li class="-x-remove-bg" @click="runHelper('REMOVE_BG',1)" v-if="canMeShow.REMOVE_BG && !isFireFox">
                     <b></b>人像背景移除</li>
             </ul>
             <div class="fe-feedback">
 
-                <a href="https://github.com/zxlie/FeHelper" target="_blank" tabindex="-1" class="x-github" title="访问Github">
+                <a href="https://github.com/zxlie/FeHelper" @click="openUrl($event)" target="_blank" tabindex="-1" class="x-github" title="访问Github">
                     <svg height="16" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true">
                         <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
                     </svg>
@@ -67,7 +67,7 @@
                         <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 href="https://www.baidufe.com/fehelper/feedback.html" target="_blank" tabindex="-1" class="x-fb" title="提交意见反馈">
+                <a href="https://www.baidufe.com/fehelper/feedback.html" @click="openUrl($event)" target="_blank" tabindex="-1" class="x-fb" title="提交意见反馈">
                     <svg version="1.1" width="14" height="14" viewBox="0 0 426.667 426.667" style="enable-background:new 0 0 426.667 426.667;" xml:space="preserve">
                         <path d="M384,0H42.667C19.093,0,0.213,19.093,0.213,42.667L0,426.667l85.333-85.333H384c23.573,0,42.667-19.093,42.667-42.667v-256C426.667,19.093,407.573,0,384,0z M234.667,256H192v-42.667h42.667V256z M234.667,170.667H192V85.333h42.667V170.667z"/>
                     </svg>反馈

apps/popup/index.js

@@ -7,7 +7,8 @@ new Vue({
     data: {
         ajaxDebugger: '已开',
         canMeShow: {},
-        manifest: {}
+        manifest: {},
+        isFireFox: window.navigator && /firefox/i.test(navigator.userAgent)
     },
 
     created: function () {
@@ -31,12 +32,12 @@ new Vue({
         // 整个popup窗口支持上线选择
         document.body.addEventListener('keydown', e => {
             let keyCode = e.keyCode || e.which;
-            if(![38,40,13].includes(keyCode)) {
+            if (![38, 40, 13].includes(keyCode)) {
                 return false;
             }
             let ul = document.querySelector('#pageContainer ul');
             let hovered = ul.querySelector('li.x-hovered');
-            let next,prev;
+            let next, prev;
             if (hovered) {
                 hovered.classList.remove('x-hovered');
                 next = hovered.nextElementSibling;
@@ -45,7 +46,7 @@ new Vue({
             if (!next) {
                 next = ul.querySelector('li:first-child');
             }
-            if(!prev) {
+            if (!prev) {
                 prev = ul.querySelector('li:last-child');
             }
 
@@ -88,6 +89,18 @@ new Vue({
             window.close();
         },
 
-        openOptionsPage: () => chrome.runtime.openOptionsPage()
+        openOptionsPage: () => {
+            chrome.runtime.openOptionsPage();
+            window.close();
+        },
+
+        openUrl: function (event) {
+            event.preventDefault();
+            // 获取后台页面，返回window对象
+            let bgPage = chrome.extension.getBackgroundPage();
+            bgPage.BgPageInstance.openUrl(event.currentTarget.href);
+            window.close();
+            return false;
+        }
     }
 });

gulpfile.js

@@ -111,7 +111,7 @@ gulp.task('zip', () => {
 
     // ============冗余文件清理================================================
     shell.cd('output/apps');
-    let fileList = shell.find('.').filter(file => {
+    let fileList = shell.find('./').filter(file => {
         let included = 'yes';
         if (file.match(/\.css$/) && !/index\.css$/.test(file)) {
             included = shell.grep('-l', file, './**/*.{css,html,js}').stdout;
@@ -120,12 +120,12 @@ gulp.task('zip', () => {
         }
 
         // 如果没有搜索到，再尝试下在js、css文件的当前目录下搜寻
-        if(!included.trim().length && /\.(js|css)$/.test(file)) {
+        if (!included.trim().length && /\.(js|css)$/.test(file)) {
             let arr = file.split(/\//);
             let filename = arr.splice(-1);
             let dirname = arr.join('/');
 
-            included = shell.grep('-l', filename, (dirname || '.') +  '/*.{html,js,css}').stdout;
+            included = shell.grep('-l', filename, (dirname || '.') + '/*.{html,js,css}').stdout;
         }
 
         return !included.trim().length;
@@ -139,7 +139,7 @@ gulp.task('zip', () => {
 
     // web_accessible_resources 中也不需要加载这些冗余的文件了
     manifest.web_accessible_resources = manifest.web_accessible_resources.filter(f => fileList.indexOf(f) === -1);
-    manifest.name = manifest.name.replace('-Dev','');
+    manifest.name = manifest.name.replace('-Dev', '');
     fs.writeFileSync(pathOfMF, JSON.stringify(manifest));
 
     // ============压缩打包================================================
@@ -147,10 +147,42 @@ gulp.task('zip', () => {
     let size = fs.statSync('output/fehelper.zip').size;
     size = pretty(size);
 
+
     console.log('\n\n================================================================================');
     console.log('    当前版本：', manifest.version, '\t文件大小:', size);
     console.log('    去Chrome商店发布吧：https://chrome.google.com/webstore/devconsole');
     console.log('================================================================================\n\n');
+
+});
+
+// 打包Firefox安装包
+gulp.task('firefox', () => {
+    shell.exec('rm -rf output-firefox && cp -r output output-firefox && rm -rf output-firefox/fehelper.zip');
+
+    // 更新firefox所需的配置文件
+    let pathOfMF = './output-firefox/apps/manifest.json';
+    let manifest = require(pathOfMF);
+    manifest.description = 'FE助手：JSON工具、代码美化、代码压缩、二维码工具、网页定制工具、便签笔记，等等';
+    delete manifest.update_url;
+    manifest.applications = {
+        "gecko": {
+            "id": "[email protected]",
+            "strict_min_version": "45.0"
+        }
+    };
+    manifest.version = manifest.version.replace(/\./,'') + 'stable';
+    fs.writeFileSync(pathOfMF, JSON.stringify(manifest));
+
+    shell.exec('cd output-firefox/apps && zip -r ../fehelper.xpi ./ > /dev/null && cd ../../');
+    let size = fs.statSync('output-firefox/fehelper.xpi').size;
+    size = pretty(size);
+
+    console.log('\n\nfehelper.xpi 已打包完成！');
+
+    console.log('\n\n================================================================================');
+    console.log('    当前版本：', manifest.version, '\t文件大小:', size);
+    console.log('    去Chrome商店发布吧：https://addons.mozilla.org/zh-CN/developers/addon/web%E5%89%8D%E7%AB%AF%E5%8A%A9%E6%89%8B-fehelper/versions');
+    console.log('================================================================================\n\n');
 });
 
 // builder

package.json

@@ -3,7 +3,9 @@
   "version": "1.0.0",
   "description": "chrome extension",
   "main": "index.js",
-  "dependencies": {},
+  "dependencies": {
+    "sign-addon": "^0.3.1"
+  },
   "devDependencies": {
     "gulp": "^3.9.1",
     "gulp-callback": "0.0.3",