解决插件冲突问题&color-picker在新版本chrome下的bug

chrome/manifest.json

@@ -1,6 +1,6 @@
 {
     "name": "WEB前端助手(FeHelper)",
-    "version": "7.7",
+    "version": "7.9",
     "manifest_version": 2,
 
     "default_locale": "zh_CN",

chrome/online.manifest.json

@@ -1,6 +1,6 @@
 {
     "name": "WEB前端助手(FeHelper)",
-    "version": "7.7",
+    "version": "7.9",
     "manifest_version": 2,
 
     "default_locale": "zh_CN",

chrome/static/css/fe-jsonformat-content.css

@@ -65,7 +65,6 @@ html {
 }
 html body {
     direction: inherit;
-    cursor: default;
 }
 .mod-json .format-item button{
     width:80px;

chrome/static/js/colorpicker/colorpicker.js

@@ -193,7 +193,7 @@ FeHelper.ColorPicker = (function () {
             if (c)document.body.removeChild(c);
             if (n)document.body.removeChild(n);
             c = false, n = false;
-            document.body.style.cursor = 'default';
+            document.body.style.cursor = '';
         }
     }
 
@@ -244,7 +244,6 @@ FeHelper.ColorPicker = (function () {
         addEventListener('keyup', wk);
         addEventListener('scroll', ssf);
         addEventListener('resize', ssf);
-        testWebGlAvail();
         initializeCanvas();
         remainingInit();
     }
@@ -318,21 +317,14 @@ FeHelper.ColorPicker = (function () {
                 chrome.runtime.sendMessage({type: MSG_TYPE.COLOR_PICKER}, function (response) {
                 });
             } catch (e) {
-                console.log('有错误发生，可提交此反馈到官网！',e);
+                console.log('有错误发生，可提交此反馈到官网！', e);
             }
         }, 255);
     }
 
     var lastPreviewURI;
-    var gl = 0, texture = 0, texturectx = 0, snapTexture = 0, shaderProgram = 0, textureSampPosition = 0, fishEyeScalePosition = 0;
-
-    var webGlAvail = false, icvs = 0, totalWidth = 150;//750
-    function testWebGlAvail() {
-        var testc = document.createElement("canvas");
-        var testctx = testc.getContext('webgl');
-        if (testctx && typeof(testctx.getParameter) == "function") webGlAvail = true;
-        else webGlAvail = false;
-    }
+
+    var icvs = 0, totalWidth = 150;//750
 
     function handleRendering(quick) {
         var x = ex, y = ey;
@@ -351,30 +343,43 @@ FeHelper.ColorPicker = (function () {
             ictx.scale(0.5, 0.5);
 
             ictx.fillStyle = "rgba(0,0,0,0.3)";//croshair
-            //ictx.globalAlpha = 1.0;
 
             ictx.fillRect(startPoint, 0, 1, totalWidth);
             ictx.fillRect(0, startPoint, totalWidth, 1);
 
         } else {
-            if (webGlAvail) {
-                getMain3dContext();
-                texturectx.drawImage(cvs, -ox + (64), -oy + (64));
-                //gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture);
-                gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, texture);
-                gl.uniform1i(textureSampPosition, 0);
-                gl.uniform1f(fishEyeScalePosition, 15)
-                gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-            } else {
-                var ictx = getMain2dContext();
-                ictx.drawImage(cvs, -ox + (startPoint), -oy + (startPoint));
-                var smi, spi, mp = 15 - 0;
-                //xx,yy
-                for (var i = 0; i < startPoint; i += 2) {
+            var ictx = getMain2dContext();
+            ictx.drawImage(cvs, -ox + (startPoint), -oy + (startPoint));
+            var smi, spi, mp = 15 - 0;
+            //xx,yy
+            for (var i = 0; i < startPoint; i += 2) {
+                smi = startPoint - i;
+                spi = startPoint + i;
+                //drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) //CANVAS
+                ictx.drawImage(icvs, spi, 0, smi, totalWidth,//total width really??
+                    spi + 1, 0, smi, totalWidth);
+
+                ictx.drawImage(icvs, 0, 0, smi + 1, totalWidth,
+                    -1, 0, smi + 1, totalWidth);
+
+                ictx.drawImage(icvs, 0, spi, totalWidth, smi,
+                    0, spi + 1, totalWidth, smi);
+
+                ictx.drawImage(icvs, 0, 0, totalWidth, smi + 1,
+                    0, -1, totalWidth, smi + 1);
+
+                if (i == 0) {
+                    var dat = ictx.getImageData(startPoint, startPoint, 1, 1).data;//notarget
+                    var d = dat[0] + dat[1] + dat[2];
+                    if (d > 192) ictx.fillStyle = "rgba(30,30,30,0.8)";
+                    else ictx.fillStyle = "rgba(225,225,225,0.8)";
+                } else ictx.fillStyle = "rgba(255,255,255,0.4)";
+
+                for (var c = 0; c < mp; c++) {
+                    if (++i >= startPoint)break;
                     smi = startPoint - i;
                     spi = startPoint + i;
-                    //drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) //CANVAS
-                    ictx.drawImage(icvs, spi, 0, smi, totalWidth,//total width really??
+                    ictx.drawImage(icvs, spi, 0, smi, totalWidth,
                         spi + 1, 0, smi, totalWidth);
 
                     ictx.drawImage(icvs, 0, 0, smi + 1, totalWidth,
@@ -385,37 +390,13 @@ FeHelper.ColorPicker = (function () {
 
                     ictx.drawImage(icvs, 0, 0, totalWidth, smi + 1,
                         0, -1, totalWidth, smi + 1);
-
-                    if (i == 0) {
-                        var dat = ictx.getImageData(startPoint, startPoint, 1, 1).data;//notarget
-                        var d = dat[0] + dat[1] + dat[2];
-                        if (d > 192) ictx.fillStyle = "rgba(30,30,30,0.8)";
-                        else ictx.fillStyle = "rgba(225,225,225,0.8)";
-                    } else ictx.fillStyle = "rgba(255,255,255,0.4)";
-
-                    for (var c = 0; c < mp; c++) {
-                        if (++i >= startPoint)break;
-                        smi = startPoint - i;
-                        spi = startPoint + i;
-                        ictx.drawImage(icvs, spi, 0, smi, totalWidth,
-                            spi + 1, 0, smi, totalWidth);
-
-                        ictx.drawImage(icvs, 0, 0, smi + 1, totalWidth,
-                            -1, 0, smi + 1, totalWidth);
-
-                        ictx.drawImage(icvs, 0, spi, totalWidth, smi,
-                            0, spi + 1, totalWidth, smi);
-
-                        ictx.drawImage(icvs, 0, 0, totalWidth, smi + 1,
-                            0, -1, totalWidth, smi + 1);
-                    }
-                    mp--;
-                    if (mp < 1)mp = 1;
-                    ictx.fillRect(spi + 1, 0, 1, totalWidth);
-                    ictx.fillRect(smi - 1, 0, 1, totalWidth);
-                    ictx.fillRect(0, spi + 1, totalWidth, 1);
-                    ictx.fillRect(0, smi - 1, totalWidth, 1);
                 }
+                mp--;
+                if (mp < 1)mp = 1;
+                ictx.fillRect(spi + 1, 0, 1, totalWidth);
+                ictx.fillRect(smi - 1, 0, 1, totalWidth);
+                ictx.fillRect(0, spi + 1, totalWidth, 1);
+                ictx.fillRect(0, smi - 1, totalWidth, 1);
             }
         }
 
@@ -464,141 +445,10 @@ FeHelper.ColorPicker = (function () {
         }
     }
 
-    function getMain3dContext() {
-        if (gl) return gl;
-        else {
-            initializeCanvas();
-            return gl;
-        }
-    }
-
     function initializeCanvas() {
-        gl = 0;
         icvs = document.createElement('canvas');//icon canvas
         icvs.width = totalWidth;
         icvs.height = totalWidth;
-        if (webGlAvail) {
-            gl = icvs.getContext("webgl");
-
-            var squareVerticesBuffer = gl.createBuffer();
-            gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
-            var vertices = [
-                1.0, 1.0, 0.0,//top right
-                -1.0, 1.0, 0.0,
-                1.0, -1.0, 0.0,
-                -1.0, -1.0, 0.0
-            ];
-            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
-
-            var textureCoordBuffer = gl.createBuffer();
-            gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);
-            var textureCoordinates = [
-                // Front
-                1.0, 1.0,
-                0.0, 1.0,
-                1.0, 0.0,
-                0.0, 0.0
-            ];
-            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates), gl.STATIC_DRAW);
-
-            var fragShader = "" +
-                "precision mediump float;" + "\n" +
-                "varying highp vec2 vTextureCoord;" + "\n" +
-                "uniform float fishEyeScale;" + "\n" +
-                "uniform sampler2D uSampler;" + "\n" +
-                "void main(void) {" + "\n" +
-                " float texSizeFracOnePix=1.0 / 128.0;" + "\n" +
-                " float halfTexSizeFracOnePix=texSizeFracOnePix * 0.5;" + "\n" +
-                " vec2 ctr=vec2(0.5,0.5) + vec2(halfTexSizeFracOnePix,-halfTexSizeFracOnePix);" + "\n" +
-                " vec2 agl=(vTextureCoord.xy - ctr.xy);" + "\n" +
-                " float dis=distance(ctr,vTextureCoord) / fishEyeScale;" + "\n" +
-                " vec2 get=ctr + (agl * dis);" + "\n" +
-                " vec4 bcolor=texture2D(uSampler, get);" + "\n" +
-                " vec2 res=get * 128.0;" + "\n" +
-                " ivec2 geb=ivec2(res);" + "\n" +
-                " vec4 pcolor = texture2D(uSampler, ctr);//picked color" + "\n" +
-                " vec4 ccolor = vec4(0.0,0.0,0.0,1.0);//crosshair color" + "\n" +
-                " if(pcolor.r + pcolor.g + pcolor.b < 1.5){" + "\n" +
-                "  ccolor = vec4(1.0,1.0,1.0,1.0);" + "\n" +
-                " }" + "\n" +
-                " if( geb.x == 64 && geb.y == 63 ){" + "\n" +
-                "  if( res.x < 64.1 || res.x > 64.9  || res.y > 63.9 || res.y < 63.1 	){" + "\n" +
-                "   bcolor = mix(bcolor,ccolor,0.8);" + "\n" +
-                "  }" + "\n" +
-                " }" + "\n" +
-                " gl_FragColor = bcolor;" + "\n" +
-                "}";
-
-            var vertShader = "" +
-                "attribute vec3 aVertexPosition;" + "\n" +
-                "attribute vec2 aTextureCoord;" + "\n" +
-                "varying highp vec2 vTextureCoord;" + "\n" +
-                "void main(void) {" + "\n" +
-                " gl_Position = vec4(aVertexPosition, 1.0);" + "\n" +
-                " vTextureCoord = aTextureCoord;" + "\n" +
-                "}";
-
-            var fshader = gl.createShader(gl.FRAGMENT_SHADER);
-            var vshader = gl.createShader(gl.VERTEX_SHADER);
-
-            gl.shaderSource(fshader, fragShader);
-            gl.shaderSource(vshader, vertShader);
-
-            gl.compileShader(fshader);
-            if (!gl.getShaderParameter(fshader, gl.COMPILE_STATUS)) {
-                webGlAvail = false;
-                console.log("An error occurred compiling the frag shaders: " + gl.getShaderInfoLog(fshader));
-            }
-
-            gl.compileShader(vshader);
-            if (!gl.getShaderParameter(vshader, gl.COMPILE_STATUS)) {
-                webGlAvail = false;
-                console.log("An error occurred compiling the vertex shaders: " + gl.getShaderInfoLog(vshader));
-            }
-
-            shaderProgram = gl.createProgram();
-            gl.attachShader(shaderProgram, vshader);
-            gl.attachShader(shaderProgram, fshader);
-            gl.linkProgram(shaderProgram);
-
-            if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
-                webGlAvail = false;
-                console.log("Unable to initialize the shader program.");
-                console.log(gl.getProgramInfoLog(shaderProgram));
-            }
-
-            gl.useProgram(shaderProgram);
-
-            var vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
-            gl.enableVertexAttribArray(vertexPositionAttribute);
-
-            var textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
-            gl.enableVertexAttribArray(textureCoordAttribute);
-
-            textureSampPosition = gl.getUniformLocation(shaderProgram, "uSampler");
-            fishEyeScalePosition = gl.getUniformLocation(shaderProgram, "fishEyeScale");
-
-            texture = document.createElement('canvas');//icon canvas
-            texture.width = 128;
-            texture.height = 128;
-            texturectx = texture.getContext("2d");
-
-            gl.activeTexture(gl.TEXTURE0);
-            snapTexture = gl.createTexture();
-            gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
-            gl.bindTexture(gl.TEXTURE_2D, snapTexture);
-            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-            gl.generateMipmap(gl.TEXTURE_2D);
-            gl.uniform1i(textureSampPosition, 0);
-
-            gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);
-            gl.vertexAttribPointer(textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
-
-            gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
-            gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
-        }
     }
 
     function reqLis(request, sender, sendResponse) {

chrome/static/js/jsonformat/contentscript-jsonformat.js

@@ -55,7 +55,7 @@ baidu.csJsonFormat = (function () {
                 // 如果是pre标签，则看内容是不是和source一样，一样则continue
                 if (tagName === 'pre' && html === source) {
                     continue;
-                } else if (tagName === 'embed' && nodes[i].offsetWidth === 0) {
+                } else if (nodes[i].offsetWidth === 0 || nodes[i].offsetHeight === 0 || !html) {
                     // 如果用户安装迅雷或者其他的插件，也回破坏页面结构，需要兼容一下
                     continue;
                 } else {