v2 -v2

v2.0/apps/background/index.js

@@ -156,7 +156,7 @@ var BgPageInstance = (function () {
     let _runHelper = function (config) {
         chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
             let tab = tabs[0];
-            
+
             // 如果是采用独立文件方式访问，直接打开该页面即可
             if (config.useFile === '1') {
                 let content = config.msgType === MSG_TYPE.QR_CODE ? tab.url : '';
@@ -427,11 +427,11 @@ var BgPageInstance = (function () {
         chrome.runtime.onMessage.addListener(function (request, sender, callback) {
             //提取配置项
             if (request.type === MSG_TYPE.GET_OPTIONS) {
-                Settings.doGetOptions(request.items, callback);
+                Settings.getOptsFromBgPage(callback);
             }
             //保存配置项
             else if (request.type === MSG_TYPE.SET_OPTIONS) {
-                Settings.doSetOptions(request.items, callback);
+                Settings.setOptsFromBgPage(request.items, callback);
                 //管理右键菜单
                 _createOrRemoveContextMenu();
             }

v2.0/apps/options/index.css

@@ -0,0 +1,10 @@
+@import "../static/css/bootstrap.min.css";
+
+#pageContainer label {
+    font-weight: normal;
+}
+
+#pageContainer h4 {
+    color: #000;
+    font-size: 18px;
+}

v2.0/apps/options/index.js

@@ -0,0 +1,39 @@
+/**
+ * FeHelper Options Page
+ */
+
+let Settings = Tarp.require('./settings');
+
+new Vue({
+    el: '#pageContainer',
+    data: {
+        selectedOpts: []
+    },
+
+    created: function () {
+        Settings.getOptions((opts) => {
+            this.selectedOpts = Object.keys(opts);
+        })
+    },
+
+    methods: {
+
+        close: () => {
+            chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
+                chrome.tabs.remove(tabs[0].id);
+            });
+        },
+
+        cancel: () => {
+            this.close();
+        },
+
+        save: function () {
+
+            Settings.setOptions(this.selectedOpts);
+
+            alert('恭喜，FeHelper配置修改成功!');
+            this.close();
+        }
+    }
+});

v2.0/apps/options/settings.js

@@ -5,39 +5,44 @@ module.exports = (() => {
 
     // 页面json格式化强制开启
     let pageJsonMustFormat = false;
+    let MSG_TYPE = Tarp.require('../static/js/core/msg_type');
 
-    /**
-     * 将这些配置项保存到background-page，这样才能对每个页面生效
-     * @param {Object} items {key:value}
-     */
-    let _saveOptionItemByBgPage = function (items) {
-        for (let key in items) {
-            window.localStorage.setItem(key, items[key]);
-        }
-    };
+    // 所有配置项
+    let optionItems = [
+        'opt_item_contextMenus',
+        'EN_DECODE',
+        'CODE_BEAUTIFY',
+        'CODE_COMPRESS',
+        'JSON_FORMAT',
+        'QR_CODE',
+        'COLOR_PICKER',
+        'REGEXP_TOOL',
+        'TIME_STAMP',
+        'IMAGE_BASE64',
+        'FCP_HELPER_DETECT',
+        'SHOW_PAGE_LOAD_TIME',
+        'AJAX_DEBUGGER'
+    ];
+    if (!pageJsonMustFormat) {
+        optionItems.push('JSON_PAGE_FORMAT');
+    }
 
     /**
-     * 从background-page获取配置项
-     * @param {Object} items ["",""]
-     * @return {key:value}
+     * 获取全部配置项
+     * @returns {string[]}
+     * @private
      */
-    let _getOptionItemByBgPage = function (items) {
-        let rst = {};
-        for (let i = 0, len = items.length; i < len; i++) {
-            rst[items[i]] = window.localStorage.getItem(items[i]);
-        }
-        return rst;
-    };
+    let _getAllOpts = () => optionItems;
+
 
     /**
      * 向background-page发送请求，提取配置项
      * @param {Object} items
-     * @param {Function} 回调方法
+     * @param {Function} callback 回调方法
      */
-    let _goGetOptions = function (items, callback) {
+    let _getOptions = function (callback) {
         chrome.extension.sendMessage({
-            type: MSG_TYPE.GET_OPTIONS,
-            items: items
+            type: MSG_TYPE.GET_OPTIONS
         }, callback);
     };
 
@@ -45,7 +50,7 @@ module.exports = (() => {
      * 向background-page发送请求，保存配置项
      * @param {Object} items
      */
-    let _goSetOptions = function (items) {
+    let _setOptions = function (items) {
         chrome.extension.sendMessage({
             type: MSG_TYPE.SET_OPTIONS,
             items: items
@@ -54,12 +59,18 @@ module.exports = (() => {
 
     /**
      * 由background-page触发
-     * @param {Object} items
      * @param {Object} callback
      */
-    let _doGetOptions = function (items, callback) {
-        if (callback && typeof callback == 'function') {
-            callback.call(null, _getOptionItemByBgPage(items));
+    let _getOptsFromBgPage = function (callback) {
+        if (callback && typeof callback === 'function') {
+            let rst = {};
+            optionItems.forEach((item) => {
+                let opt = localStorage.getItem(item);
+                if (opt !== 'false') {
+                    rst[item] = 'true';
+                }
+            });
+            callback.call(null, rst);
         }
     };
 
@@ -67,57 +78,18 @@ module.exports = (() => {
      * 由background-page触发
      * @param {Object} items
      */
-    let _doSetOptions = function (items) {
-        _saveOptionItemByBgPage(items);
-    };
-
-    /**
-     * 获取某一项配置
-     * @param {String} optName 配置参数名
-     */
-    let _getOptionItem = function (optName) {
-        return _getOptionItemByBgPage([optName])[optName];
-    };
-
-    // 所有配置项
-    let optionItems = [
-        'opt_item_contextMenus',
-        'EN_DECODE',
-        'CODE_BEAUTIFY',
-        'CODE_COMPRESS',
-        'JSON_FORMAT',
-        'QR_CODE',
-        'COLOR_PICKER',
-        'REGEXP_TOOL',
-        'TIME_STAMP',
-        'IMAGE_BASE64',
-        'FCP_HELPER_DETECT',
-        'SHOW_PAGE_LOAD_TIME',
-        'AJAX_DEBUGGER'
-    ];
-    if (!pageJsonMustFormat) {
-        optionItems.push('JSON_PAGE_FORMAT');
-    }
-
-    /**
-     * 保存启动项
-     */
-    let _save_opt_form_start = function () {
-        let items = {};
-        $.each(optionItems, function (i, item) {
-            items[item] = $('#' + item).attr('checked');
+    let _setOptsFromBgPage = function (items) {
+        optionItems.forEach((opt) => {
+            localStorage.setItem(opt, items.indexOf(opt) > -1 ? 'true' : 'false');
         });
-
-        _goSetOptions(items);
     };
 
     return {
         pageJsonMustFormat: pageJsonMustFormat,
-        optionItems: optionItems,
-        doSetOptions: _doSetOptions,
-        doGetOptions: _doGetOptions,
-        getOptionItem: _getOptionItem,
-        getOptions: _goGetOptions,
-        setOptions: _goSetOptions
+        getAllOpts: _getAllOpts,
+        setOptsFromBgPage: _setOptsFromBgPage,
+        getOptsFromBgPage: _getOptsFromBgPage,
+        getOptions: _getOptions,
+        setOptions: _setOptions
     };
 })();

v2.0/apps/popup/index.js

@@ -3,24 +3,28 @@
  */
 
 new Vue({
-    el: 'ul.fe-function-list',
+    el: '#pageContainer',
     data: {
-        ajaxDebugger: '开',
+        ajaxDebugger: '已开',
         canMeShow: {}
     },
+
     created: function () {
         let Settings = Tarp.require('../options/settings');
 
         // 根据配置，控制功能菜单的显示与隐藏
-        Settings.doGetOptions(Settings.optionItems, (opts) => {
-            opts && Object.keys(opts).forEach((item) => {
-                this.canMeShow[item] = opts[item] !== 'false';
-            });
-        })
+        Settings.getOptions((opts) => this.canMeShow = opts);
+
+        // ajax debugger开关文案控制
+        let bgPage = chrome.extension.getBackgroundPage();
+        bgPage.BgPageInstance.tellMeAjaxDbgSwitch((dbgSwitchOn) => {
+            this.ajaxDebugger = dbgSwitchOn ? '已开' : '已关';
+        });
     },
+
     methods: {
 
-        runHelper: function (mType, useFile) {
+        runHelper: (mType, useFile) => {
             // 获取后台页面，返回window对象
             let bgPage = chrome.extension.getBackgroundPage();
 
@@ -32,6 +36,8 @@ new Vue({
                     useFile: useFile
                 });
             }
-        }
+        },
+
+        openOptionsPage: () => chrome.runtime.openOptionsPage()
     }
 });