FeHelper/v2.0/apps/background/index.js

/**
 * FE-Helper后台运行程序
 * @author zhaoxianlie
 */
var BgPageInstance = (function () {

    let MSG_TYPE = Tarp.require('../static/js/msg_type');
    let Settings = Tarp.require('../options/settings');
    let Network = Tarp.require('../background/network');

    let feHelper = {};
    let devToolsDetected = false;

    // debug cache，主要记录每个tab的ajax debug 开关
    let ajaxDbgCache = {};


    //侦测就绪情况
    let _detectReadyState = function (callback) {
        if (_readyState.css && _readyState.js && _readyState.html) {
            _readyState.allDone = true;
        }
        if (_readyState.allDone && typeof callback === 'function') {
            callback();
        }
    };

    //各种元素的就绪情况
    let _readyState = {
        css: false,
        js: false,
        html: true,
        allDone: false
    };
    let _fcp_detect_interval = [];

    /**
     * 执行前端FCPHelper检测
     */
    let _doFcpDetect = function (tab) {
        //所有元素都准备就绪
        if (_readyState.allDone) {
            clearInterval(_fcp_detect_interval[tab.id]);
            chrome.tabs.sendMessage(tab.id, {
                type: MSG_TYPE.CODE_STANDARDS,
                event: MSG_TYPE.FCP_HELPER_DETECT
            });
        } else if (_fcp_detect_interval[tab.id] === undefined) {
            chrome.tabs.sendMessage(tab.id, {
                type: MSG_TYPE.CODE_STANDARDS,
                event: MSG_TYPE.FCP_HELPER_INIT
            });
            //显示桌面提醒
            notifyText({
                message: "正在准备数据，请稍等..."
            });
            _fcp_detect_interval[tab.id] = setInterval(function () {
                _doFcpDetect(tab);
            }, 200);
        }
    };


    /**
     * 文本格式，可以设置一个图标和标题
     * @param {Object} options
     * @config {string} type notification的类型，可选值：html、text
     * @config {string} icon 图标
     * @config {string} title 标题
     * @config {string} message 内容
     */
    let notifyText = function (options) {
        if (!window.Notification) {
            return;
        }
        if (!options.icon) {
            options.icon = "static/img/fe-48.png";
        }
        if (!options.title) {
            options.title = "温馨提示";
        }

        return chrome.notifications.create('', {
            type: 'basic',
            title: options.title,
            iconUrl: chrome.runtime.getURL(options.icon),
            message: options.message
        });

    };

    /**
     * 查看页面wpo信息
     */
    let _showPageWpoInfo = function (wpoInfo) {
        chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
            if (!wpoInfo) {
                notifyText({
                    message: "对不起，检测失败"
                });
            } else {
                chrome.tabs.create({
                    url: "wpo/index.html?" + btoa(encodeURIComponent(JSON.stringify(wpoInfo))),
                    active: true
                });
            }
        });
    };

    /**
     * 获取页面wpo信息
     * @return {[type]}
     */
    let _getPageWpoInfo = function () {
        chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
            let tab = tabs[0];
            //显示桌面提醒
            chrome.tabs.sendMessage(tab.id, {
                type: MSG_TYPE.GET_PAGE_WPO_INFO
            });
        });
    };

    /**
     * 创建或更新成功执行的动作
     * @param evt
     * @param content
     * @private
     */
    let _tabUpdatedCallback = function (evt, content) {
        return function (newTab) {
            if (content) {
                setTimeout(function () {
                    chrome.tabs.sendMessage(newTab.id, {
                        type: MSG_TYPE.TAB_CREATED_OR_UPDATED,
                        content: content,
                        event: evt
                    });
                }, 300)
            }
        };
    };

    /**
     * 打开对应文件，运行该Helper
     * @param tab
     * @param file
     * @param txt
     * @private
     */
    let _openFileAndRun = function (tab, file, txt) {
        chrome.tabs.query({windowId: chrome.windows.WINDOW_ID_CURRENT}, function (tabs) {
            let isOpened = false;
            let tabId;
            let reg = new RegExp("^chrome.*" + file + ".html$", "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) {
                chrome.tabs.create({
                    url: '' + file + '/index.html',
                    active: true
                }, _tabUpdatedCallback(file, txt));
            } else {
                chrome.tabs.update(tabId, {highlighted: true}, _tabUpdatedCallback(file, txt));
            }
        });
    };

    /**
     * ajax debugger 开关切换
     * @private
     */
    let _debuggerSwitchOn = function (callback) {
        chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
            let tab = tabs[0];
            ajaxDbgCache[tab.id] = !ajaxDbgCache[tab.id];

            chrome.tabs.executeScript(tab.id, {
                code: 'console.info("FeHelper提醒：Ajax Debugger开关已' + (ajaxDbgCache[tab.id] ? '开启' : '关闭') + '！");',
                allFrames: false
            });
            callback && callback();
        });
    };

    /**
     * 告诉DevTools页面，当前的debug开关是否打开
     * @param callback
     * @param withAlert
     * @private
     */
    let _tellDevToolsDbgSwitchOn = function (callback, withAlert) {

        chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
            let tab = tabs[0];
            callback && callback(ajaxDbgCache[tab.id]);

            if (withAlert) {
                if (ajaxDbgCache[tab.id]) {
                    let msg = '';
                    if (devToolsDetected) {
                        msg = 'DevTools已打开，确保已切换到【Console】界面，并关注信息输出，愉快的进行Ajax Debugger！'
                    } else {
                        msg = '请打开DevTools，并切换到【Console】界面，关注信息输出，愉快的进行Ajax Debugger！';
                    }
                    alert(msg);
                }
            }
        });
    };

    /**
     * 根据给定参数，运行对应的Helper
     */
    let _runHelper = function (config, callback) {

        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 : '';
                _openFileAndRun(tab, config.msgType, content);
            } else {
                switch (config.msgType) {
                    //编码规范检测
                    case MSG_TYPE.FCP_HELPER_DETECT:
                        _doFcpDetect(tab);
                        break;
                    //查看网页加载时间
                    case MSG_TYPE.SHOW_PAGE_LOAD_TIME:
                        _getPageWpoInfo();
                        break;
                    //Ajax调试
                    case MSG_TYPE.AJAX_DEBUGGER:
                        _debuggerSwitchOn(callback);
                        break;
                    default :
                        break;
                }
            }
        });
    };

    /**
     * 创建扩展专属的右键菜单
     */
    let _createContextMenu = function () {
        _removeContextMenu();
        feHelper.contextMenuId = chrome.contextMenus.create({
            title: "FeHelper",
            contexts: ['page', 'selection', 'editable', 'link', 'image'],
            documentUrlPatterns: ['http://*/*', 'https://*/*', 'file://*/*']
        });
        chrome.contextMenus.create({
            title: "二维码生成",
            contexts: ['page', 'selection', 'editable', 'link', 'image'],
            parentId: feHelper.contextMenuId,
            onclick: function (info, tab) {
                chrome.tabs.executeScript(tab.id, {
                    code: '(' + (function (pInfo) {
                        let linkUrl = pInfo.linkUrl;
                        let pageUrl = pInfo.pageUrl;
                        let imgUrl = pInfo.srcUrl;
                        let selection = pInfo.selectionText;

                        return linkUrl || imgUrl || selection || pageUrl;
                    }).toString() + ')(' + JSON.stringify(info) + ')',
                    allFrames: false
                }, function (txt) {
                    _openFileAndRun(tab, MSG_TYPE.QR_CODE, (typeof txt === 'object') ? txt[0] : txt);
                });
            }
        });

        chrome.contextMenus.create({
            type: 'separator',
            contexts: ['image'],
            parentId: feHelper.contextMenuId
        });
        chrome.contextMenus.create({
            title: "二维码解码",
            contexts: ['image'],
            parentId: feHelper.contextMenuId,
            onclick: function (info, tab) {
                _qrDecode(info, tab);
            }
        });

        chrome.contextMenus.create({
            type: 'separator',
            contexts: ['all'],
            parentId: feHelper.contextMenuId
        });
        chrome.contextMenus.create({
            title: "字符串编解码",
            contexts: ['page', 'selection', 'editable'],
            parentId: feHelper.contextMenuId,
            onclick: function (info, tab) {
                chrome.tabs.executeScript(tab.id, {
                    code: '(' + (function (pInfo) {

                        return pInfo.selectionText;
                    }).toString() + ')(' + JSON.stringify(info) + ')',
                    allFrames: false
                }, function (txt) {
                    _openFileAndRun(tab, MSG_TYPE.EN_DECODE, (typeof txt === 'object') ? txt[0] : txt);
                });
            }
        });
        chrome.contextMenus.create({
            type: 'separator',
            contexts: ['all'],
            parentId: feHelper.contextMenuId
        });
        chrome.contextMenus.create({
            title: "JSON格式化",
            contexts: ['page', 'selection', 'editable'],
            parentId: feHelper.contextMenuId,
            onclick: function (info, tab) {
                chrome.tabs.executeScript(tab.id, {
                    code: '(' + (function (pInfo) {
                        return pInfo.selectionText;
                    }).toString() + ')(' + JSON.stringify(info) + ')',
                    allFrames: false
                }, function (txt) {
                    _openFileAndRun(tab, MSG_TYPE.JSON_FORMAT, (typeof txt === 'object') ? txt[0] : txt);
                });
            }
        });
        chrome.contextMenus.create({
            type: 'separator',
            contexts: ['all'],
            parentId: feHelper.contextMenuId
        });
        chrome.contextMenus.create({
            title: "代码格式化",
            contexts: ['page', 'selection', 'editable'],
            parentId: feHelper.contextMenuId,
            onclick: function (info, tab) {
                chrome.tabs.executeScript(tab.id, {
                    code: '(' + (function (pInfo) {
                        return pInfo.selectionText;
                    }).toString() + ')(' + JSON.stringify(info) + ')',
                    allFrames: false
                }, function (txt) {
                    _openFileAndRun(tab, MSG_TYPE.CODE_BEAUTIFY, (typeof txt === 'object') ? txt[0] : txt);
                });
            }
        });

        chrome.contextMenus.create({
            type: 'separator',
            contexts: ['all'],
            parentId: feHelper.contextMenuId
        });
        chrome.contextMenus.create({
            title: "页面取色器",
            contexts: ['page', 'selection', 'editable'],
            parentId: feHelper.contextMenuId,
            onclick: function (info, tab) {
                _showColorPicker();
            }
        });
    };

    /**
     * 移除扩展专属的右键菜单
     */
    let _removeContextMenu = function () {
        if (!feHelper.contextMenuId) return;
        chrome.contextMenus.remove(feHelper.contextMenuId);
        feHelper.contextMenuId = null;
    };

    /**
     * 创建或移除扩展专属的右键菜单
     */
    let _createOrRemoveContextMenu = function () {
        Settings.getOptsFromBgPage((opts) => {
            if (opts['opt_item_contextMenus'] !== 'false') {
                _createContextMenu();
            } else {
                _removeContextMenu();
            }
        });
    };

    /**
     * 二维码转码
     * @param info
     * @param tab
     * @private
     */
    let _qrDecode = function (info, tab) {
        let qrcode = Tarp.require('../static/vendor/zxing/zxing.min.js');
        qrcode.callback = function (text) {
            if ((text || '').indexOf('error decoding QR Code') !== -1) {
                let image = new Image();
                image.src = info.srcUrl;
                image.onload = function () {
                    let width = this.naturalWidth;
                    let height = this.naturalHeight;

                    // url方式解码失败，再转换成data uri后继续解码
                    (function createCanvasContext(img, t, l, w, h) {
                        let canvas = document.createElement('canvas');
                        canvas.setAttribute('id', 'qr-canvas');
                        canvas.height = h + 100;
                        canvas.width = w + 100;
                        let context = canvas.getContext('2d');
                        context.fillStyle = 'rgb(255,255,255)';
                        context.fillRect(0, 0, canvas.width, canvas.height);
                        context.drawImage(img, l, t, w, h, 50, 50, w, h);
                        qrcode.callback = function (txt) {
                            chrome.tabs.sendMessage(tab.id, {
                                type: MSG_TYPE.QR_DECODE,
                                result: txt
                            });
                        };
                        qrcode.decode(canvas.toDataURL());
                    })(image, 0, 0, width, height);
                }
            } else {
                chrome.tabs.sendMessage(tab.id, {
                    type: MSG_TYPE.QR_DECODE,
                    result: text
                });
            }
        };
        qrcode.decode(info.srcUrl);
    };

    /**
     * 显示color picker
     * @private
     */
    let _showColorPicker = function () {
        chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
            let tab = tabs[0];
            let tabid = tab.id;
            chrome.tabs.sendMessage(tabid, {
                type: MSG_TYPE.SHOW_COLOR_PICKER,
                enableColorPicker: true
            }, function (response) {
                chrome.tabs.sendMessage(tabid, {
                    type: MSG_TYPE.SHOW_COLOR_PICKER,
                    doPick: true
                }, function (r) {
                });
            });
        });
    };

    /**
     * 将网页截成一张图，实现取色
     * @param callback
     * @private
     */
    let _drawColorPicker = function (callback) {
        chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
            let tab = tabs[0];
            let tabid = tab.id;
            chrome.tabs.captureVisibleTab(null, {format: 'png'}, function (dataUrl) {
                chrome.tabs.sendMessage(tabid, {
                    type: MSG_TYPE.SHOW_COLOR_PICKER,
                    setPickerImage: true,
                    pickerImage: dataUrl
                }, function (response) {
                    callback && callback();
                });
            });
        });
    };

    /**
     * 在当前页面的控制台输出console
     * @param request
     * @private
     */
    let _ajaxDebugger = function (request) {

        chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
            let tab = tabs[0];
            chrome.tabs.executeScript(tab.id, {
                code: "(" + (function (jsonStr) {
                    let args = JSON.parse(unescape(jsonStr));
                    console[args[0]].apply(console, Array.prototype.slice.call(args, 1));
                }).toString() + ")('" + request.content + "');"
            });
        });
    };

    // 当前页面是否进行自动格式化
    let _jsonAutoFormatRequest = function () {
        Settings.getOptsFromBgPage(opts => {
            chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
                chrome.tabs.sendMessage(tabs[0].id, {
                    type: MSG_TYPE.JSON_PAGE_FORMAT,
                    canIDoIt: opts.JSON_PAGE_FORMAT
                });
            });
        });
    };

    /**
     * 接收来自content_scripts发来的消息
     */
    let _addExtensionListener = function () {
        chrome.runtime.onMessage.addListener(function (request, sender, callback) {
            //提取配置项
            if (request.type === MSG_TYPE.GET_OPTIONS) {
                Settings.getOptsFromBgPage(callback);
            }
            //保存配置项
            else if (request.type === MSG_TYPE.SET_OPTIONS) {
                Settings.setOptsFromBgPage(request.items, callback);
                //管理右键菜单
                _createOrRemoveContextMenu();
            }
            //判断是否可以进行自动格式化
            else if (request.type === MSG_TYPE.JSON_PAGE_FORMAT_REQUEST) {
                _jsonAutoFormatRequest();
            }
            //保存当前网页加载时间
            else if (request.type === MSG_TYPE.CALC_PAGE_LOAD_TIME) {
                _showPageWpoInfo(request.wpo);
            }
            // color picker
            else if (request.type === MSG_TYPE.COLOR_PICKER) {
                _drawColorPicker(callback);
            }
            // console switch
            else if (request.type === MSG_TYPE.AJAX_DEBUGGER_SWITCH) {
                _tellDevToolsDbgSwitchOn(callback);
            }
            // console show
            else if (request.type === MSG_TYPE.AJAX_DEBUGGER_CONSOLE) {
                _ajaxDebugger(request);
            }

            // ===========================以下为编码规范检测====start==================================
            //处理CSS的请求
            else if (request.type === MSG_TYPE.GET_CSS) {
                //直接AJAX获取CSS文件内容
                Network.readFileContent(request.link, callback);
            }
            //处理JS的请求
            else if (request.type === MSG_TYPE.GET_JS) {
                //直接AJAX获取JS文件内容
                Network.readFileContent(request.link, callback);
            }
            //处理HTML的请求
            else if (request.type === MSG_TYPE.GET_HTML) {
                //直接AJAX获取JS文件内容
                Network.readFileContent(request.link, callback);
            }
            //处理cookie
            else if (request.type === MSG_TYPE.GET_COOKIE) {
                Network.getCookies(request, callback);
            }
            //移除cookie
            else if (request.type === MSG_TYPE.REMOVE_COOKIE) {
                Network.removeCookie(request, callback);
            }
            //设置cookie
            else if (request.type === MSG_TYPE.SET_COOKIE) {
                Network.setCookie(request, callback);
            }
            //CSS准备就绪
            else if (request.type === MSG_TYPE.CSS_READY) {
                _readyState.css = true;
                _detectReadyState(callback);
            }
            //JS准备就绪
            else if (request.type === MSG_TYPE.JS_READY) {
                _readyState.js = true;
                _detectReadyState(callback);
            }
            //HTML准备就绪
            else if (request.type === MSG_TYPE.HTML_READY) {
                _readyState.html = true;
                _detectReadyState(callback);
            }
            // ===========================以上为编码规范检测====end==================================


            return true;
        });

        // 检测DevTools是否打开
        let openCount = 0;
        chrome.runtime.onConnect.addListener(function (port) {
            if (port.name === MSG_TYPE.DEV_TOOLS) {
                if (openCount === 0) {
                    devToolsDetected = true;
                }
                openCount++;

                port.onDisconnect.addListener(function (port) {
                    openCount--;
                    if (openCount === 0) {
                        devToolsDetected = false;
                    }
                });
            }
        });

        // 安装与更新
        chrome.runtime.onInstalled.addListener(({reason, previousVersion}) => {
            switch (reason) {
                case 'install':
                    chrome.runtime.openOptionsPage();
                    break;
                case 'update':
                    chrome.browserAction.getBadgeText({tabId: null}, ({text}) => {
                        setTimeout(() => {
                            chrome.browserAction.setBadgeText({text: '恭喜'});
                            setTimeout(() => {
                                chrome.browserAction.setBadgeText({text: '升级'});
                                setTimeout(() => {
                                    chrome.browserAction.setBadgeText({text: '成功'});
                                    setTimeout(() => {
                                        chrome.browserAction.setBadgeText({text: ''});
                                    }, 1500);
                                }, 1500);
                            }, 1500);
                        }, 2000);
                    });

                    break;
            }
        });
    };

    /**
     * 初始化
     */
    let _init = function () {
        _addExtensionListener();
        _createOrRemoveContextMenu();
    };

    return {
        init: _init,
        runHelper: _runHelper,
        showColorPicker: _showColorPicker,
        tellMeAjaxDbgSwitch: _tellDevToolsDbgSwitchOn
    };
})();

//初始化
BgPageInstance.init();