增加二维码解码工具

README.md

@@ -20,6 +20,7 @@ https://chrome.google.com/webstore/detail/pkgccpejnmalmdinmhkkfafefagiiiad?hl=zh
 * JSON页面自动格式化查看
 * JSON代码片段格式化工具
 * 二维码生成工具
+* 二维码解码（网页图片右键菜单）
 * 字符串编解码工具（Unicode、UTF8、Base64、MD5等）
 * 图片Base64编码工具
 * 页面加载性能检测工具

chrome/manifest.json

@@ -1,11 +1,11 @@
 {
     "name": "WEB前端助手(FeHelper)",
-    "version": "10.3",
+    "version": "10.4",
     "manifest_version": 2,
 
     "default_locale": "zh_CN",
 
-    "description": "FE助手：包括字符串编解码、代码压缩、美化、JSON格式化、正则表达式、时间转换工具、二维码生成器、编码规范检测、页面性能检测、页面取色、Ajax接口调试",
+    "description": "FE助手：包括字符串编解码、代码压缩、美化、JSON格式化、正则表达式、时间转换工具、二维码生成与解码、编码规范检测、页面性能检测、页面取色、Ajax接口调试",
     "icons": {
         "16": "static/img/fe-16.png",
         "48": "static/img/fe-48.png",
@@ -57,7 +57,8 @@
             "matches": [
                 "http://*/*",
                 "https://*/*",
-                "file://*/*"
+                "file://*/*",
+                "*://*/*"
             ],
             "js": [
                 "static/js/core/jquery-1.5.min.js",
@@ -83,6 +84,8 @@
                 "static/js/colorpicker/elem-tool.js",
                 "static/js/colorpicker/colorpicker.js",
 
+                "static/js/qrcode/fe-decode.js",
+
                 "static/js/jsonformat/json-format-dealer.js",
                 "static/js/jsonformat/json-format-ent.js",
                 "static/js/jsonformat/contentscript-jsonformat.js"

chrome/online.manifest.json

@@ -1,11 +1,11 @@
 {
     "name": "WEB前端助手(FeHelper)",
-    "version": "10.3",
+    "version": "10.4",
     "manifest_version": 2,
 
     "default_locale": "zh_CN",
 
-    "description": "FE助手：包括字符串编解码、代码压缩、美化、JSON格式化、正则表达式、时间转换工具、二维码生成器、编码规范检测、页面性能检测、页面取色、Ajax接口调试",
+    "description": "FE助手：包括字符串编解码、代码压缩、美化、JSON格式化、正则表达式、时间转换工具、二维码生成与解码、编码规范检测、页面性能检测、页面取色、Ajax接口调试",
     "icons": {
         "16": "static/img/fe-16.png",
         "48": "static/img/fe-48.png",
@@ -63,6 +63,7 @@
                 "static/js/core/jquery-1.5.min.js",
                 "static/vendor/jquery-ui-1.8/jquery-ui.min.js",
 
+                "static/js/qrcode/fe-decode.js",
                 "static/js/mod/mod_manifest.js"
             ],
             "run_at": "document_end",

chrome/static/css/fe-qrcode.css

@@ -25,4 +25,17 @@ hr.x-hr  {
 #preview {
     padding: 5px;
     text-align: center;
+}
+.panel-heading .x-tips {
+    font-size:12px;
+    float: right;
+    padding-bottom: 2px;
+    border-bottom: 1px solid #ccc;
+    cursor: default;
+}
+.panel-heading .x-tips:hover {
+    border-bottom-color: #f00;
+}
+.panel-heading .x-tips i {
+    color: #f00;
 }

chrome/static/js/core/fe-const.js

@@ -81,6 +81,8 @@ const MSG_TYPE = {
     TIME_STAMP : 'timestamp',
     // 图片base64
     IMAGE_BASE64 : 'imagebase64',
+    // 二维码解码
+    QR_DECODE : 'qr_decode',
 
     //页面json代码自动格式化
     AUTO_FORMART_PAGE_JSON : "opt_item_autojson",

chrome/static/js/fe-background.js

@@ -262,11 +262,11 @@ var BgPageInstance = (function () {
         _removeContextMenu();
         baidu.contextMenuId = chrome.contextMenus.create({
             title: "FeHelper",
-            contexts: ['page', 'selection', 'editable', 'link'],
-            documentUrlPatterns: ['http://*/*', 'https://*/*']
+            contexts: ['page', 'selection', 'editable', 'link','image'],
+            documentUrlPatterns: ['http://*/*', 'https://*/*', 'file://*/*']
         });
         chrome.contextMenus.create({
-            title: "生成二维码",
+            title: "二维码生成",
             contexts: ['page', 'selection', 'editable', 'link'],
             parentId: baidu.contextMenuId,
             onclick: function (info, tab) {
@@ -280,6 +280,29 @@ var BgPageInstance = (function () {
                 });
             }
         });
+
+        chrome.contextMenus.create({
+            type: 'separator',
+            contexts: ['image'],
+            parentId: baidu.contextMenuId
+        });
+        chrome.contextMenus.create({
+            title: "二维码解码",
+            contexts: ['image'],
+            parentId: baidu.contextMenuId,
+            onclick: function (info, tab) {
+                qrcode.callback = function(text){
+                    chrome.tabs.sendMessage(tab.id, {
+                        type: MSG_TYPE.QR_DECODE,
+                        info:info,
+                        result:text
+                    });
+                };
+                qrcode.decode(info.srcUrl);
+            }
+        });
+
+
         chrome.contextMenus.create({
             type: 'separator',
             contexts: ['all'],
@@ -353,6 +376,7 @@ var BgPageInstance = (function () {
                 });
             }
         });
+
     };
 
     /**

chrome/static/js/mod/mod_background.js

@@ -21,4 +21,5 @@ importScript("js/core/core.js");
 importScript("js/core/fe-const.js");
 importScript("js/core/network.js");
 importScript("js/fe-option.js");
+importScript("vendor/zxing/zxing.min.js");
 importScript("js/fe-background.js");

chrome/static/js/qrcode/fe-decode.js

@@ -0,0 +1,58 @@
+/**
+ * QR码解码
+ */
+var qrDecode = (function () {
+
+    "use strict";
+
+    var _show = function(text){
+        var el = $('#__fehelper_qr_decode__');
+        if(!el[0]){
+            el = $('<div id="__fehelper_qr_decode__" style="z-index:999999;position: fixed;left:0;top:0;right: 0;bottom: 0;display: none;">' +
+                '<div style="position: fixed;left:0;top:0;right: 0;bottom: 0;background: #000;opacity: 0.5;"></div>' +
+                '<div style="position: relative;top: 100px;left: ' + ($('body').width() / 2 - 200) + 'px;border:1px solid #000;background:#fff;width:420px;padding:15px;border-radius:5px 5px;box-shadow:2px 2px 5px #000;">' +
+                '<div style="margin: 0 0 10px 0;font-size: 14px;font-weight: bold;">二维码解码结果：</div>' +
+                '<textarea style="border-radius:5px 5px;width:398px;border:1px solid #aaa;min-height:80px;resize:none;box-shadow:2px 2px 5px #aaa;padding:10px;font-size:14px;color:#888;"></textarea>' +
+                '<span id="__fehelper_qr_msg_" style="float: right;color:#f00;display:none;">复制成功！</span>' +
+                '<a id="__fehelper_qr_copy_" style="margin:10px 20px 0 0;color: #00f;text-decoration: underline" href="#">复制</a>' +
+                '<a id="__fehelper_qr_close_" style="margin-top:10px;color: #00f;text-decoration: underline" href="#">关闭</a>' +
+                '</div>' +
+                '</div>').appendTo('body');
+
+            el.find('a#__fehelper_qr_copy_').click(function(e){
+                e.preventDefault();
+
+                el.find('textarea').select();
+                document.execCommand('Copy');
+
+                el.find('#__fehelper_qr_msg_').show().delay(2000).hide('slow');
+            });
+            el.find('a#__fehelper_qr_close_').click(function(e){
+                e.preventDefault();
+                el.hide('slow');
+            });
+        }
+
+        if(text == 'error decoding QR Code') {
+            text = '抱歉，二维码识别失败！';
+        }
+
+        el.show('slow').find('textarea').val(text);
+    };
+
+    var _init = function () {
+        // 在tab创建或者更新时候，监听事件，看看是否有参数传递过来
+        chrome.runtime.onMessage.addListener(function (request, sender, callback) {
+            if (request.type == MSG_TYPE.QR_DECODE) {
+                _show(request.result);
+            }
+        });
+
+    };
+
+    return {
+        init: _init
+    };
+})();
+
+qrDecode.init();

chrome/template/fehelper_qrcode.html

@@ -14,6 +14,7 @@
     <div class="wrapper">
         <div class="panel panel-default" style="margin-bottom: 0px;">
             <div class="panel-heading">
+                <span class="x-tips" title="在网页二维码上右击，在FeHelper菜单中点击：二维码解码">★温馨提示：在网页右键菜单中已增加<i>「二维码解码」</i>功能</span>
                 <h3 class="panel-title">
                     <a href="http://www.baidufe.com/fehelper/feedback.html" target="_blank" class="x-a-high">
                         <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>：二维码生成器</h3>