增加人像抠图工具

apps/background/index.js

@@ -392,6 +392,9 @@ var BgPageInstance = (function () {
                     MENU_STICKY_NOTE: function (info, tab) {
                         _openFileAndRun(tab, MSG_TYPE.STICKY_NOTES);
                     },
+                    MENU_REMOVE_BG: function(info,tab){
+                        _openFileAndRun(tab, MSG_TYPE.REMOVE_BG);
+                    },
                     MENU_GRID_RULER: function(info,tab){
                         _doGridDetect(tab);
                     }
@@ -665,6 +668,10 @@ var BgPageInstance = (function () {
             else if (request.type === MSG_TYPE.OPEN_OPTIONS_PAGE) {
                 chrome.runtime.openOptionsPage();
             }
+            // 开启remove-bg功能
+            else if(request.type === MSG_TYPE.REMOVE_PERSON_IMG_BG) {
+                Tarp.require('../remove-bg/proxy').addBackgroundRemoveListener(callback);
+            }
 
 
             // ===========================以下为编码规范检测====start==================================

apps/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "WEB前端助手(FeHelper)",
-  "version": "2018.12.1417",
+  "version": "2018.12.1915",
   "manifest_version": 2,
   "default_locale": "zh_CN",
   "description": "FE助手：包括JSON格式化、二维码生成与解码、信息编解码、代码压缩、美化、页面取色、Markdown与HTML互转、网页滚动截屏、正则表达式、时间转换工具、编码规范检测、页面性能检测、Ajax接口调试、密码生成器、JSON比对工具、网页编码设置、便签笔记",
@@ -118,6 +118,16 @@
       ],
       "run_at": "document_start",
       "all_frames": false
+    },
+    {
+      "matches": [
+        "https://www.remove.bg/"
+      ],
+      "js": [
+        "remove-bg/content.js"
+      ],
+      "run_at": "document_end",
+      "all_frames": true
     }
   ],
   "content_security_policy": "style-src 'self' 'unsafe-inline';script-src 'self' 'unsafe-eval'; object-src 'self' ;",

apps/options/settings.js

@@ -34,7 +34,16 @@ module.exports = (() => {
         'MAX_JSON_KEYS_NUMBER',
         'AUTO_TEXT_DECODE',
         'STICKY_NOTES',
-        'GRID_RULER'
+        'GRID_RULER',
+        'REMOVE_BG'
+    ];
+
+    // 默认处理关闭状态的功能，除非用户手动打开
+    let offDefaultList = [
+        'GRID_RULER',
+        'MENU_GRID_RULER',
+        'REMOVE_BG',
+        'MENU_REMOVE_BG'
     ];
 
     // 邮件菜单配置项
@@ -125,6 +134,10 @@ module.exports = (() => {
         MENU_GRID_RULER: {
             icon: '✚',
             text: '页面栅格标尺'
+        },
+        MENU_REMOVE_BG: {
+            icon: '⚘',
+            text: '人像背景移除'
         }
     };
 
@@ -171,7 +184,9 @@ module.exports = (() => {
                 } else if (typeof(opt) === 'number') {
                     rst[item] = opt;
                 } else if (opt !== 'false') {
-                    rst[item] = 'true';
+                    if(opt || !offDefaultList.includes(item)) {
+                        rst[item] = 'true';
+                    }
                 }
             });
             callback.call(null, rst);

apps/popup/index.css

@@ -155,6 +155,9 @@ ul.fe-function-list li.-x-grid-ruler b {
     background-position: -33px -127px;
 }
 
+ul.fe-function-list li.-x-remove-bg b {
+    background-position: -145px -127px;
+}
 
 ul.fe-function-list li i {
     color: #aaa;

apps/popup/index.html

@@ -47,6 +47,8 @@
                     <b></b>Ajax调试:<i>{{ ajaxDebugger }}</i></li>
                 <li class="-x-sticky-notes" @click="runHelper('STICKY_NOTES',1)" v-if="canMeShow.STICKY_NOTES">
                     <b></b>我的便签笔记</li>
+                <li class="-x-remove-bg" @click="runHelper('REMOVE_BG',1)" v-if="canMeShow.REMOVE_BG">
+                    <b></b>人像背景移除</li>
             </ul>
             <div class="fe-feedback">
 

apps/remove-bg/content.js

@@ -0,0 +1,30 @@
+// 页面已经被嵌套在chrome extension的iframe中，所以可以去除掉页面上的一些元素
+if (window.self !== window.top && location.host === 'www.remove.bg') {
+    try {
+        // 隐藏不必要的元素，让页面变得干净
+        let styleEl = document.createElement('style');
+        styleEl.innerHTML = `
+            nav,
+            div.grecaptcha-badge,
+            div.colorlib-featured,
+            div.colorlib-services,
+            footer { display:none; }
+        `;
+        document.body.appendChild(styleEl);
+
+        // 页面文字汉化，友好一些
+        let containerEl = document.querySelector('#home .container');
+        // 主标题
+        containerEl.querySelector('h2').innerHTML = '人物背景抠图，轻松搞定！';
+        // 副标题
+        Array.from(containerEl.querySelectorAll('p'))[0].innerHTML = '上传带有人物的图片，这个工具会自动帮你把人物从背景中抠出来！';
+
+        // 按钮区域
+        let pEl2 = Array.from(containerEl.querySelectorAll('p'))[1];
+        Array.from(pEl2.querySelectorAll('a'))[0].innerHTML = '上传照片';
+        Array.from(pEl2.querySelectorAll('a'))[1].innerHTML = '填写一个图片URL';
+
+    } catch (e) {
+        console.log('Maybe，源站改版了：', e);
+    }
+}

apps/remove-bg/index.css

@@ -0,0 +1,74 @@
+@import url("../static/css/bootstrap.min.css");
+
+body {
+    background-color: #fff;
+}
+.wrapper {padding-right:0}
+.wp-rbg {
+    width:auto;
+    padding-right: 20px;
+    font-family: "Nunito", Arial, sans-serif;
+}
+.panel-iframe {
+    position: absolute;
+    top: 70px;
+    bottom: 5px;
+    right: 35px;
+    left: 35px;
+    text-align: center;
+}
+.overlay {
+    position: absolute;
+    top: 70px;
+    right: 20px;
+    left: 20px;
+    height: 700px;
+    opacity: 0.95;
+    z-index: 1;
+    padding-top:10%;
+    text-align: center;
+    line-height: 60px;
+    color: #fff;
+    background: linear-gradient(135deg, #499bea 0%, #798eea 100%);
+}
+.overlay .x-btn {
+    background: #4aca85;
+    color: #fff;
+    border: 1px solid #4aca85;
+    padding: 18px 36px !important;
+    border-radius: 30px;
+}
+.overlay .x-btn:hover {
+    background: #4ada95;
+}
+.overlay h2 {
+    font-size: 40px;
+    font-weight: normal;
+}
+.overlay h5 {
+    margin: 40px 0;
+    font-size: 20px;
+    font-weight: normal;
+}
+.overlay h5 span,
+.overlay h5 a{
+    color: #ee0;
+    padding-bottom: 2px;
+    border-bottom: 1px solid #fff;
+    text-decoration: none;
+    cursor: default;
+}
+.overlay h5 span:hover,
+.overlay h5 a:hover{
+    color: #ff0;
+    border-bottom: 1px solid #ff0;
+}
+.overlay h5 span {
+    color:#fff;
+}
+.overlay h5 a:hover {
+    cursor: pointer;
+}
+.x-tips {
+    color: #ccc;
+}

apps/remove-bg/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<html lang="zh-CN">
+    <head>
+        <title>人像背景移除工具</title>
+        <meta charset="UTF-8">
+        <link rel="stylesheet" href="index.css" />
+        <script type="text/javascript" src="../static/vendor/vue/vue.js"></script>
+        <script src="../static/vendor/require/require.js"></script>
+    </head>
+    <body>
+        <div class="wrapper wp-rbg" id="pageContainer">
+            <div class="panel panel-default" style="margin-bottom: 0px;">
+                <div class="panel-heading">
+                    <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>
+                </div>
+            </div>
+
+            <div class="panel-body mod-rgb" ref="panelBody">
+                <div class="overlay" ref="overlay">
+                    <h2>抠人像，抠人像！</h2>
+                    <h5>此工具来自于：<span target="_blank">www.remove.bg</span> ，一个非常高效且精准的人像背景移除工具！</h5>
+                    <h5 class="x-tips">温馨提示：要用这个工具，你可能需要一把好用的梯子，目前我在用的是这个：<a href="http://www.ggfwzs.com/" target="_blank">http://www.ggfwzs.com/</a> </h5>
+
+                    <span class="btn btn-primary btn-lg btn-custom x-btn" @click="loadTools" ref="btnEnter">进入工具，开始使用！</span>
+                </div>
+
+                <div class="row panel-iframe" ref="boxIframe"></div>
+            </div>
+            <script src="index.js"></script>
+        </div>
+    </body>
+</html>

apps/remove-bg/index.js

@@ -0,0 +1,45 @@
+new Vue({
+    el: '#pageContainer',
+    data: {
+        iframeHtml: '<iframe src="https://www.remove.bg/" frameborder="0" width="100%" height="100%"></iframe>',
+        enter: false
+    },
+
+    methods: {
+        permission: function (callback) {
+            chrome.permissions.request({
+                permissions: ['webRequest', 'webRequestBlocking']
+            }, (granted) => {
+                if (granted) {
+                    callback && callback();
+                } else {
+                    alert('必须接受授权，才能正常使用！');
+                }
+            });
+        },
+
+        loadTools: function () {
+            if (this.enter) return;
+            this.permission(() => {
+                let MSG_TYPE = Tarp.require('../static/js/msg_type');
+                chrome.runtime.sendMessage({
+                    type: MSG_TYPE.REMOVE_PERSON_IMG_BG
+                }, () => {
+                    this.enter = true;
+                    this.$refs.btnEnter.innerHTML = '正在进入，请稍后......';
+                    this.$refs.boxIframe.innerHTML = this.iframeHtml;
+                    let opacity = 1;
+                    let intervalId = window.setInterval(() => {
+                        opacity -= 0.02;
+                        if (opacity <= 0) {
+                            window.clearInterval(intervalId);
+                            this.$refs.overlay.remove();
+                        } else {
+                            this.$refs.overlay.style.opacity = opacity;
+                        }
+                    }, 30);
+                });
+            });
+        },
+    }
+});

apps/remove-bg/proxy.js

@@ -0,0 +1,45 @@
+/**
+ * 站点 remove.bg 设置了X-Frame-Options的Header，不能被嵌入到iframe，这里加个proxy来delete header
+ * @type {{addBackgroundRemoveListener}}
+ * @author zhaoxianlie
+ */
+let BgProxy = (() => {
+
+    let listenerAddedFlag = false;
+
+    /**
+     * web请求截获，重置response Headers
+     * @param callback
+     */
+    let addListener = (callback) => {
+
+        if (listenerAddedFlag) {
+            callback && callback();
+            return false;
+        }
+
+        chrome.webRequest.onHeadersReceived.addListener((info) => {
+                let headers = info.responseHeaders;
+                for (let i = headers.length - 1; i >= 0; --i) {
+                    let header = headers[i].name.toLowerCase();
+                    if (header === 'x-frame-options' || header === 'frame-options') {
+                        headers.splice(i, 1);
+                    }
+                }
+                return {responseHeaders: headers};
+            },
+            {
+                urls: ['https://www.remove.bg/'],
+                types: ['sub_frame']
+            },
+            ['blocking', 'responseHeaders']
+        );
+        listenerAddedFlag = true;
+    };
+
+    return {
+        addBackgroundRemoveListener: addListener
+    };
+})();
+
+module.exports = BgProxy;

apps/static/js/msg_type.js

@@ -104,7 +104,11 @@ const MSG_TYPE = {
     OPEN_OPTIONS_PAGE:'open-options-page',
 
     // 屏幕栅格标尺
-    GRID_RULER: 'grid-ruler'
+    GRID_RULER: 'grid-ruler',
+
+    // 人像背景移除
+    REMOVE_PERSON_IMG_BG:'remove-person-img-bg',
+    REMOVE_BG:'remove-bg'
 };
 
 (typeof module === 'object') ? module.exports = MSG_TYPE : '';

apps/timestamp/index.css

@@ -41,4 +41,15 @@
 thead th {
     text-align: center;
     background: #f9f9f9;
+}
+.x-gmt-setting {
+    display: inline-block;
+    float: right;
+    position: relative;
+    top: -8px;
+    right: -13px;
+}
+.x-gmt-setting select {
+    width:auto;
+    display: inline;
 }

apps/timestamp/index.js

@@ -14,7 +14,8 @@ new Vue({
         txtDesStamp: '',
         secFrom: 's',
         secTo: 's',
-        worldTime: {}
+        worldTime: {},
+        curGMT:(new Date()).getTimezoneOffset() / 60 * -1
     },
     mounted: function () {
         this.startTimestamp();
@@ -24,11 +25,12 @@ new Vue({
             let formatter = 'yyyy-MM-dd HH:mm:ss';
             window.intervalId = window.setInterval(() => {
                 let localDate = new Date();
+                let gmtTime = new Date(localDate.getTime() + localDate.getTimezoneOffset() * 60000);
 
-                this.txtNowDate = localDate.format(formatter);
-                this.txtNow = Math.round(localDate.getTime() / 1000) + ' s   / ' + localDate.getTime() + ' ms';
+                let nowDate = new Date(gmtTime.getTime() + this.curGMT * 60 * 60000);
+                this.txtNowDate = nowDate.format(formatter);
+                this.txtNow = Math.round(nowDate.getTime() / 1000) + ' s   / ' + nowDate.getTime() + ' ms';
 
-                let gmtTime = new Date(localDate.getTime() + localDate.getTimezoneOffset() * 60000);
                 this.worldTime['local'] = this.txtNowDate;
                 this.worldTime['gmt'] = gmtTime.format(formatter);