Browse Source

优化右键菜单的配置功能

[email protected] 2 years ago
parent
commit
6d23bb5345
4 changed files with 86 additions and 93 deletions
  1. 30 43
      apps/background/awesome.js
  2. 3 3
      apps/background/background.js
  3. 46 40
      apps/background/menu.js
  4. 7 7
      apps/background/tools.js

+ 30 - 43
apps/background/awesome.js

@@ -67,27 +67,18 @@ let Awesome = (() => {
      * 检测工具是否已被成功安装
      * @param toolName 工具名称
      * @param detectMenu 是否进一步检测Menu的设置情况
-     * @param detectContent 是否检测内容实际存在
      * @returns {Promise}
      */
-    let detectInstall = (toolName, detectMenu, detectContent) => {
+    let detectInstall = (toolName, detectMenu) => {
 
         let menuKey = TOOL_MENU_TPL.replace('#TOOL-NAME#', toolName);
         let toolKey = TOOL_NAME_TPL.replace('#TOOL-NAME#', toolName);
 
-        if (toolName === 'json-format' && !detectContent) {
-            if (detectMenu) {
-                return StorageMgr.get(menuKey).then(value => String(value) !== '0');
-            } else {
-                return Promise.resolve(true);
-            }
-        }
-
         return Promise.all([StorageMgr.get(toolKey), StorageMgr.get(menuKey)]).then(values => {
             if (detectMenu) {
                 return values[0] && String(values[1]) === '1';
             }
-            return detectContent ? values[0] : !!values[0];
+            return !!values[0];
         });
     };
 
@@ -135,7 +126,7 @@ let Awesome = (() => {
         }
     }));
 
-    let getAllTools = (declareOnly) => {
+    let getAllTools = () => {
 
         // 获取本地开发的插件,也拼接进来
         // TODO ..
@@ -151,40 +142,36 @@ let Awesome = (() => {
         // } catch (e) {
         // }
 
-        if (declareOnly) {
-            return toolMap;
-        } else {
-            let tools = Object.keys(toolMap);
-            let promises = [];
-            tools.forEach(tool => {
-                promises = promises.concat([detectInstall(tool), detectInstall(tool, true)])
+        let tools = Object.keys(toolMap);
+        let promises = [];
+        tools.forEach(tool => {
+            promises = promises.concat([detectInstall(tool), detectInstall(tool, true)])
+        });
+        return Promise.all(promises).then(values => {
+            values.forEach((v, i) => {
+                let tool = tools[Math.floor(i / 2)];
+                let key = i % 2 === 0 ? 'installed' : 'menu';
+                toolMap[tool][key] = v;
+                // 本地工具,还需要看是否处于开启状态
+                if (toolMap[tool].hasOwnProperty('_devTool')) {
+                    toolMap[tool][key] = toolMap[tool][key] && toolMap[tool]._enable;
+                }
             });
-            return Promise.all(promises).then(values => {
-                values.forEach((v, i) => {
-                    let tool = tools[Math.floor(i / 2)];
-                    let key = i % 2 === 0 ? 'installed' : 'menu';
-                    toolMap[tool][key] = v;
-                    // 本地工具,还需要看是否处于开启状态
-                    if (toolMap[tool].hasOwnProperty('_devTool')) {
-                        toolMap[tool][key] = toolMap[tool][key] && toolMap[tool]._enable;
-                    }
+            let sortArr = SortToolMgr.get();
+            if (sortArr && sortArr.length) {
+                let map = {};
+                sortArr.forEach(tool => {
+                    map[tool] = toolMap[tool];
                 });
-                let sortArr = SortToolMgr.get();
-                if (sortArr && sortArr.length) {
-                    let map = {};
-                    sortArr.forEach(tool => {
+                Object.keys(toolMap).forEach(tool => {
+                    if (!map[tool]) {
                         map[tool] = toolMap[tool];
-                    });
-                    Object.keys(toolMap).forEach(tool => {
-                        if (!map[tool]) {
-                            map[tool] = toolMap[tool];
-                        }
-                    });
-                    return map;
-                }
-                return toolMap;
-            });
-        }
+                    }
+                });
+                return map;
+            }
+            return toolMap;
+        });
     };
 
     /**

+ 3 - 3
apps/background/background.js

@@ -187,7 +187,7 @@ let BgPageInstance = (function () {
             }
         } else {
             // 重绘菜单
-            Menu.manage(Settings);
+            Menu.rebuild();
         }
 
         if (showTips) {
@@ -297,7 +297,7 @@ let BgPageInstance = (function () {
                 switch(request.thing){
                     case 'save-options':
                         //管理右键菜单
-                        Menu.manage(Settings);
+                        Menu.rebuild();
                         notifyText({
                             message: '配置修改已生效,请继续使用!',
                             autoClose: 2000
@@ -436,7 +436,7 @@ let BgPageInstance = (function () {
     let _init = function () {
         _checkUpdate();
         _addExtensionListener();
-        Menu.manage(Settings);
+        Menu.rebuild();
         // 定期清理冗余的垃圾
         setTimeout(() => {
             Awesome.gcLocalFiles();

+ 46 - 40
apps/background/menu.js

@@ -7,6 +7,7 @@
 import CrxDownloader from './crx-download.js';
 import Awesome from './awesome.js';
 import toolMap from './tools.js';
+import Settings from '../options/settings.js';
 
 export default (function () {
 
@@ -115,9 +116,12 @@ export default (function () {
      */
     let _createItem = (toolName, menuList) => {
         menuList && menuList.forEach && menuList.forEach(menu => {
-            let _menu_id = 'fhm_c' + escape(menu.text).replace(/\W/g,'');
+
+            // 确保每次创建出来的是一个新的主菜单,防止onClick事件冲突
+            let menuItemId = 'fhm_c' + escape(menu.text).replace(/\W/g,'')+(new Date()*1);
+
             chrome.contextMenus.create({
-                id: _menu_id,
+                id: menuItemId,
                 title: menu.icon + '  ' + menu.text,
                 contexts: menu.contexts || ['all'],
                 parentId: FeJson.contextMenuId
@@ -131,10 +135,11 @@ export default (function () {
                         chrome.DynamicToolRunner({ tool });
                     }
                 }
-            })(toolName,_menu_id,menu.onClick));
+            })(toolName,menuItemId,menu.onClick));
         });
     };
 
+
     /**
      * 绘制一条分割线
      * @private
@@ -150,58 +155,59 @@ export default (function () {
     /**
      * 创建扩展专属的右键菜单
      */
-    let _createContextMenu = function () {
-        _removeContextMenu();
-        chrome.contextMenus.create({
-            id: FeJson.contextMenuId,
-            title: "FeHelper",
-            contexts: ['page', 'selection', 'editable', 'link', 'image'],
-            documentUrlPatterns: ['http://*/*', 'https://*/*', 'file://*/*']
-        });
+    let _initMenus = function () {
+        _removeContextMenu(() => {
+            chrome.contextMenus.create({
+                id: FeJson.contextMenuId,
+                title: "FeHelper",
+                contexts: ['page', 'selection', 'editable', 'link', 'image'],
+                documentUrlPatterns: ['http://*/*', 'https://*/*', 'file://*/*']
+            });
 
-        // 绘制用户安装的菜单,放在前面
-        Awesome.getInstalledTools().then(tools => {
-            let allMenus = Object.keys(tools).filter(tool => tools[tool].installed && tools[tool].menu);
-            let onlineTools = allMenus.filter(tool => tool !== 'devtools' && !tools[tool].hasOwnProperty('_devTool'));
-            let devTools = allMenus.filter(tool => tool === 'devtools' || tools[tool].hasOwnProperty('_devTool'));
-
-            // 绘制FH提供的工具菜单
-            onlineTools.forEach(tool => _createItem(tool, tools[tool].menuConfig));
-            // 如果有本地工具的菜单需要绘制,则需要加一条分割线
-            devTools.length && _createSeparator();
-            // 绘制本地工具的菜单
-            devTools.forEach(tool => _createItem(tool, tools[tool].menuConfig));
-        });
+            // 绘制用户安装的菜单,放在前面
+            Awesome.getInstalledTools().then(tools => {
+                let allMenus = Object.keys(tools).filter(tool => tools[tool].installed && tools[tool].menu);
+                let onlineTools = allMenus.filter(tool => tool !== 'devtools' && !tools[tool].hasOwnProperty('_devTool'));
+                let devTools = allMenus.filter(tool => tool === 'devtools' || tools[tool].hasOwnProperty('_devTool'));
+
+                // 绘制FH提供的工具菜单
+                onlineTools.forEach(tool => _createItem(tool, tools[tool].menuConfig));
+                // 如果有本地工具的菜单需要绘制,则需要加一条分割线
+                devTools.length && _createSeparator();
+                // 绘制本地工具的菜单
+                devTools.forEach(tool => _createItem(tool, tools[tool].menuConfig));
+            });
 
-        // 绘制两个系统提供的菜单,放到最后
-        let sysMenu = ['download-crx', 'fehelper-setting'];
-        let arrPromises = sysMenu.map(menu => Awesome.menuMgr(menu, 'get'));
-        Promise.all(arrPromises).then(values => {
-            let needDraw = String(values[0]) === '1' || String(values[1]) !== '0';
+            // 绘制两个系统提供的菜单,放到最后
+            let sysMenu = ['download-crx', 'fehelper-setting'];
+            let arrPromises = sysMenu.map(menu => Awesome.menuMgr(menu, 'get'));
+            Promise.all(arrPromises).then(values => {
+                let needDraw = String(values[0]) === '1' || String(values[1]) !== '0';
 
-            // 绘制一条分割线
-            _createSeparator();
+                // 绘制一条分割线
+                _createSeparator();
 
-            // 绘制菜单
-            String(values[0]) === '1' && _createItem(sysMenu[0], [defaultMenuOptions[sysMenu[0]]]);
-            String(values[1]) !== '0' && _createItem(sysMenu[1], [defaultMenuOptions[sysMenu[1]]]);
+                // 绘制菜单
+                String(values[0]) === '1' && _createItem(sysMenu[0], [defaultMenuOptions[sysMenu[0]]]);
+                String(values[1]) !== '0' && _createItem(sysMenu[1], [defaultMenuOptions[sysMenu[1]]]);
+            });
         });
     };
 
     /**
      * 移除扩展专属的右键菜单
      */
-    let _removeContextMenu = function () {
-        chrome.contextMenus.removeAll();
+    let _removeContextMenu = function (callback) {
+        chrome.contextMenus.removeAll(callback);
     };
 
     /**
      * 创建或移除扩展专属的右键菜单
      */
-    let _createOrRemoveContextMenu = function (_settings) {
-        _settings.getOptions((opts) => {
+    let _createOrRemoveContextMenu = function () {
+        Settings.getOptions((opts) => {
             if (String(opts['OPT_ITEM_CONTEXTMENUS']) !== 'false') {
-                _createContextMenu();
+                _initMenus();
             } else {
                 _removeContextMenu();
             }
@@ -209,6 +215,6 @@ export default (function () {
     };
 
     return {
-        manage: _createOrRemoveContextMenu
+        rebuild: _createOrRemoveContextMenu
     };
 })();

+ 7 - 7
apps/background/tools.js

@@ -164,7 +164,7 @@ let toolMap = {
         contentScriptJs: true,
         menuConfig: [{
             icon: '♀',
-            text: 'FH开发者工具'
+            text: '网页油猴工具'
         }]
     },
     'screenshot': {
@@ -174,7 +174,7 @@ let toolMap = {
         noPage: true,
         menuConfig: [{
             icon: '✂',
-            text: 'FH开发者工具'
+            text: '网页截屏工具'
         }]
     },
     'color-picker': {
@@ -184,7 +184,7 @@ let toolMap = {
         noPage: true,
         menuConfig: [{
             icon: '✑',
-            text: 'FH开发者工具'
+            text: '页面取色工具'
         }]
     },
     'naotu': {
@@ -192,7 +192,7 @@ let toolMap = {
         tips: '轻量便捷,随想随用,支持自动保存、本地数据存储、批量数据导入导出、图片格式下载等',
         menuConfig: [{
             icon: 'Ψ',
-            text: 'FH开发者工具'
+            text: '便捷思维导图'
         }]
     },
     'grid-ruler': {
@@ -203,7 +203,7 @@ let toolMap = {
         noPage: true,
         menuConfig: [{
             icon: 'Ⅲ',
-            text: 'FH开发者工具'
+            text: '网页栅格标尺'
         }]
     },
     'page-timing': {
@@ -213,7 +213,7 @@ let toolMap = {
         noPage: true,
         menuConfig: [{
             icon: 'Σ',
-            text: 'FH开发者工具'
+            text: '网页性能检测'
         }]
     },
     'excel2json': {
@@ -221,7 +221,7 @@ let toolMap = {
         tips: '将Excel或CVS中的数据,直接转换成为结构化数据,如JSON、XML、MySQL、PHP等(By @hpng)',
         menuConfig: [{
             icon: 'Ⓗ',
-            text: 'FH开发者工具'
+            text: 'Excel转JSON'
         }]
     },
 };