增加【网页转为图片】的功能

README.md

@@ -31,6 +31,7 @@ https://chrome.google.com/webstore/detail/pkgccpejnmalmdinmhkkfafefagiiiad?hl=zh
 - 代码压缩工具（HTML/CSS/JS）
 - 二维码生成器（支持当前页面、图片、链接、选中的文字生成QrCode）
 - 二维码解码器（支持网页二维码`右键`解码）
+- 网页转为图片（将当前整个网页转为图片并保存）
 - Markdown转换（支持Markdown与HTML的互转）
 - 页面取色工具（滑动鼠标随意取色）
 - Js正则表达式（正则测试、常用正则列表）

apps/background/index.js

@@ -13,7 +13,8 @@ var BgPageInstance = (function () {
         codeStandardMgr: {},
         ajaxDebuggerMgr: {},
         csDetectIntervals: [],
-        manifest: chrome.runtime.getManifest()
+        manifest: chrome.runtime.getManifest(),
+        notifyTimeoutId: -1
     };
     let devToolsDetected = false;
 
@@ -71,13 +72,19 @@ var BgPageInstance = (function () {
      * @config {string} message 内容
      */
     let notifyText = function (options) {
+        let notifyId = 'fehleper-notify-id';
+
+        clearTimeout(feHelper.notifyTimeoutId);
+        if (options.closeImmediately) {
+            return chrome.notifications.clear(notifyId);
+        }
+
         if (!options.icon) {
             options.icon = "static/img/fe-48.png";
         }
         if (!options.title) {
             options.title = "温馨提示";
         }
-        let notifyId = 'fehleper-notify-id';
         chrome.notifications.create(notifyId, {
             type: 'basic',
             title: options.title,
@@ -85,7 +92,7 @@ var BgPageInstance = (function () {
             message: options.message
         });
 
-        setTimeout(() => {
+        feHelper.notifyTimeoutId = setTimeout(() => {
             chrome.notifications.clear(notifyId);
         }, parseInt(options.autoClose || 3000, 10));
 
@@ -395,7 +402,7 @@ var BgPageInstance = (function () {
             parentId: feHelper.contextMenuId
         });
         chrome.contextMenus.create({
-            title: "将页面导出为图片",
+            title: "网页转为图片",
             contexts: ['all'],
             parentId: feHelper.contextMenuId,
             onclick: function (info, tab) {
@@ -535,10 +542,9 @@ var BgPageInstance = (function () {
     //判断是否可以针对json页面进行自动格式化
     let _jsonAutoFormatRequest = function () {
         Settings.getOptsFromBgPage(opts => {
-            chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
+            opts.JSON_PAGE_FORMAT && 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
+                    type: MSG_TYPE.JSON_PAGE_FORMAT
                 });
             });
         });
@@ -546,11 +552,20 @@ var BgPageInstance = (function () {
 
     //判断是否可以针对js、css自动检测格式化
     let _jsCssAutoDetectRequest = function () {
-        Settings.getOptsFromBgPage(opts => {
-            chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
-                chrome.tabs.sendMessage(tabs[0].id, {
-                    type: MSG_TYPE.JS_CSS_PAGE_BEAUTIFY,
-                    canIDoIt: opts.JS_CSS_PAGE_BEAUTIFY
+
+        chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
+
+            let tab = tabs[0];
+            let url = new URL(tab.url);
+            let ext = url.pathname.substring(url.pathname.lastIndexOf(".") + 1).toLowerCase();
+            let fileType = ({'js': 'Javascript', 'css': 'CSS'})[ext];
+            if (!fileType) {
+                return false;
+            }
+
+            Settings.getOptsFromBgPage(opts => {
+                opts.JS_CSS_PAGE_BEAUTIFY && chrome.tabs.sendMessage(tab.id, {
+                    type: MSG_TYPE.JS_CSS_PAGE_BEAUTIFY
                 });
             });
         });
@@ -718,7 +733,8 @@ var BgPageInstance = (function () {
         runHelper: _runHelper,
         notify: notifyText,
         showColorPicker: _showColorPicker,
-        tellMeAjaxDbgSwitch: _tellDevToolsDbgSwitchOn
+        tellMeAjaxDbgSwitch: _tellDevToolsDbgSwitchOn,
+        getCapturedData: PageCapture.getCapturedData
     };
 })();
 

apps/content-script/index.js

@@ -38,12 +38,12 @@ chrome.runtime.onMessage.addListener(function (request, sender, callback) {
     switch (request.type) {
         // JSON页面自动格式化
         case MSG_TYPE.JSON_PAGE_FORMAT:
-            request.canIDoIt && Tarp.require('../json-format/automatic', true).then(JsonTools => JsonTools.format());
+            Tarp.require('../json-format/automatic').format();
             break;
 
         // js、css页面自动检测，提示格式化
         case MSG_TYPE.JS_CSS_PAGE_BEAUTIFY:
-            request.canIDoIt && Tarp.require('../code-beautify/automatic', true).then(beautifier => beautifier.detect());
+            Tarp.require('../code-beautify/automatic', true).then(beautifier => beautifier.detect());
             break;
 
         // 二维码解码
@@ -53,7 +53,7 @@ chrome.runtime.onMessage.addListener(function (request, sender, callback) {
 
         // 全屏截图
         case MSG_TYPE.PAGE_CAPTURE_SCROLL:
-            Tarp.require('../page-capture/index', true).then(page => page.scroll(callback));
+            Tarp.require('../page-capture/inject', true).then(page => page.scroll(callback));
             break;
 
         // 页面性能检测

apps/manifest.json

@@ -1,9 +1,9 @@
 {
   "name": "WEB前端助手(FeHelper)",
-  "version": "2018.04.2611",
+  "version": "2018.04.2717",
   "manifest_version": 2,
   "default_locale": "zh_CN",
-  "description": "FE助手：包括JSON格式化、二维码生成与解码、信息编解码、代码压缩、美化、页面取色、Markdown与HTML互转、正则表达式、时间转换工具、编码规范检测、页面性能检测、Ajax接口调试",
+  "description": "FE助手：包括JSON格式化、二维码生成与解码、信息编解码、代码压缩、美化、页面取色、Markdown与HTML互转、网页转为图片、正则表达式、时间转换工具、编码规范检测、页面性能检测、Ajax接口调试",
   "icons": {
     "16": "static/img/fe-16.png",
     "48": "static/img/fe-48.png",
@@ -23,10 +23,6 @@
     ]
   },
   "options_page": "options/index.html",
-  "options_ui": {
-    "chrome_style": true,
-    "page": "options/index.html"
-  },
   "devtools_page": "ajax-debugger/index.html",
   "permissions": [
     "tabs",
@@ -36,6 +32,7 @@
     "activeTab",
     "<all_urls>"
   ],
+  "optional_permissions": ["downloads"],
   "web_accessible_resources": [
     "static/img/fe-16.png",
     "static/img/fe-48.png",
@@ -54,7 +51,7 @@
     "qr-code/decode.js",
     "wpo/inject.js",
     "color-picker/index.js",
-    "page-capture/index.js",
+    "page-capture/inject.js",
     "static/vendor/jquery/jquery-3.3.1.min.js",
     "code-standards/index.css",
     "code-standards/index.js",

apps/page-capture/capture-api.js

@@ -14,7 +14,8 @@ module.exports = function (MSG_TYPE) {
     let matches = ['http://*/*', 'https://*/*', 'ftp://*/*', 'file://*/*'],
         noMatches = [/^https?:\/\/chrome.google.com\/.*$/];
 
-    let listenerFunc ;
+    let listenerFunc;
+    let capturedData = {};
 
     /**
      * URL合法性校验
@@ -197,7 +198,6 @@ module.exports = function (MSG_TYPE) {
         });
     }
 
-
     /**
      * 将Blob数据存储到本地临时文件
      * @param blob
@@ -243,13 +243,13 @@ module.exports = function (MSG_TYPE) {
 
 
     /**
-     * 截屏保存为Blob对象
+     * 截屏输出screenshots对象
      * @param tab
      * @param doneback
      * @param errback
      * @param progress
      */
-    function captureToBlobs(tab, doneback, errback, progress) {
+    function captureToOrigin(tab, doneback, errback, progress) {
         let screenshots = [],
             noop = new Function();
 
@@ -261,7 +261,7 @@ module.exports = function (MSG_TYPE) {
             errback('invalid url');
         }
 
-        if(typeof listenerFunc !== 'undefined') {
+        if (typeof listenerFunc !== 'undefined') {
             chrome.runtime.onMessage.removeListener(listenerFunc);
         }
         listenerFunc = function (request, sender, sendResponse) {
@@ -269,7 +269,7 @@ module.exports = function (MSG_TYPE) {
                 progress(request.complete);
                 capture(request, screenshots, (data) => {
                     sendResponse(data);
-                    request.complete === 1 && doneback(getBlobs(screenshots));
+                    request.complete === 1 && doneback(screenshots);
                 });
                 return true;
             }
@@ -279,6 +279,27 @@ module.exports = function (MSG_TYPE) {
         chrome.tabs.sendMessage(tab.id, {type: MSG_TYPE.PAGE_CAPTURE_SCROLL}, () => progress(0));
     }
 
+    /**
+     * 通过网页url生成默认的文件名
+     * @param contentURL
+     * @returns {string}
+     */
+    function buildFilenameFromUrl(contentURL) {
+        let name = contentURL.split('?')[0].split('#')[0];
+        if (name) {
+            name = name
+                .replace(/^https?:\/\//, '')
+                .replace(/[^A-z0-9]+/g, '-')
+                .replace(/-+/g, '-')
+                .replace(/^[_\-]+/, '')
+                .replace(/[_\-]+$/, '');
+            name = '-' + name;
+        } else {
+            name = '';
+        }
+        return 'fehelper' + name + '-' + Date.now() + '.png';
+    }
+
     /**
      * 截屏保存为文件
      * @param tab
@@ -287,26 +308,13 @@ module.exports = function (MSG_TYPE) {
      * @param progress
      */
     function captureToFiles(tab, callback, errback, progress) {
-        let doneback = (blobs) => {
-            let i = 0,
-                len = blobs.length;
+        let doneback = (screenshots) => {
+            let blobs = getBlobs(screenshots);
+            let i = 0;
+            let len = blobs.length;
 
             // 生成临时文件名
-            let baseName = ((contentURL) => {
-                let name = contentURL.split('?')[0].split('#')[0];
-                if (name) {
-                    name = name
-                        .replace(/^https?:\/\//, '')
-                        .replace(/[^A-z0-9]+/g, '-')
-                        .replace(/-+/g, '-')
-                        .replace(/^[_\-]+/, '')
-                        .replace(/[_\-]+$/, '');
-                    name = '-' + name;
-                } else {
-                    name = '';
-                }
-                return 'screencapture' + name + '-' + Date.now() + '.png';
-            })(tab.url);
+            let baseName = buildFilenameFromUrl(tab.url);
 
             // 保存 & 打开
             (function doNext() {
@@ -316,7 +324,7 @@ module.exports = function (MSG_TYPE) {
             })();
         };
 
-        captureToBlobs(tab, doneback, errback, progress);
+        captureToOrigin(tab, doneback, errback, progress);
     }
 
 
@@ -328,33 +336,64 @@ module.exports = function (MSG_TYPE) {
 
         // 配置项
         let captureConfig = {
-            success: filename => {
+            // 保存成功文件时，用这个
+            successForFile: filename => {
                 chrome.tabs.create({
                     url: filename
                 });
             },
 
+            // 获取原始数据，用这个
+            successForDataURI: function (screenshots) {
+                capturedData = {
+                    pageInfo: tab,
+                    filename: buildFilenameFromUrl(tab.url),
+                    imageURI: screenshots.map(function (screenshot) {
+                        return screenshot.canvas.toDataURL();
+                    })
+                };
+
+                chrome.tabs.create({
+                    url: 'page-capture/index.html'
+                });
+            },
+
             fail: reason => {
-                console.log(reason)
+                BgPageInstance.notify({
+                    title: '糟糕，转换失败',
+                    message: (reason && reason.message || reason || '稍后尝试刷新页面重试!')
+                });
             },
 
             progress: percent => {
-                if (percent === 0) {
-                    console.log('loading');
-                }
-                else {
-                    percent = parseInt(percent * 100, 10) + '%';
-                    console.log(percent);
+                percent = parseInt(percent * 100, 10) + '%';
+
+                chrome.tabs.executeScript(tab.id, {
+                    code: 'document.title="进度：' + percent + ' ...";'
+                });
+
+                if (percent === '100%') {
+                    setTimeout(() => {
+                        chrome.tabs.executeScript(tab.id, {
+                            code: 'document.title="' + tab.title + '";'
+                        });
+                    }, 800);
                 }
             }
         };
 
         // 截屏走起
-        captureToFiles(tab, captureConfig.success, captureConfig.fail, captureConfig.progress);
+        // captureToFiles(tab, captureConfig.successForFile, captureConfig.fail, captureConfig.progress);
+        captureToOrigin(tab, captureConfig.successForDataURI, captureConfig.fail, captureConfig.progress);
+    }
+
+    function getCapturedData() {
+        return capturedData;
     }
 
     return {
-        full: fullPageCapture
+        full: fullPageCapture,
+        getCapturedData: getCapturedData
     };
 
 };

apps/page-capture/index.css

@@ -0,0 +1,44 @@
+@import url("../static/css/bootstrap.min.css");
+
+.wrapper,.panel-body {
+    padding-bottom: 0;
+}
+
+.img-container {
+    overflow-y: scroll;
+    height: 480px;
+    border:10px solid #4e5d6c;
+    border-right: 0;
+    background-color:#4e5d6c;
+}
+
+.img-result {
+    width: 100%;
+    padding-right: 10px;
+    margin: auto;
+    display: block;
+}
+
+#btnSave {
+    margin-top: -6px;
+}
+
+.x-title {
+    display: block;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 4px;
+    margin-bottom:10px;
+}
+.x-title .x-link {
+    cursor: pointer;
+    color:#c00;
+    text-decoration: underline;
+    margin-left: 10px;
+}
+.x-title .x-link:hover {
+    color: #f00;
+}
+.c-d {
+    cursor: default;
+    margin-top: 20px;
+}

apps/page-capture/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<html lang="zh-CN">
+<head>
+    <title>FeHelper截图预览</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" 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>：截图预览
+                <input id="btnSave" class="btn btn-success btn-sm ui-fl-r" type="button" value="保存图片到本地" @click="save">
+            </h3>
+        </div>
+    </div>
+
+    <div class="panel-body">
+        <div class="row">
+            <h5 class="x-title">&gt;&gt;&nbsp;网页信息 <span class="x-link" @click="expandInfo">{{btnInfoText}}</span></h5>
+            <pre class="page-info" v-html="originPageInfo" v-show="expand"></pre>
+
+            <h5 class="x-title c-d">&gt;&gt;&nbsp;完整截图</h5>
+            <div class="panel panel-default img-container" v-html="imageHTML"></div>
+        </div>
+    </div>
+</div>
+<script type="text/javascript" src="index.js"></script>
+</body>
+</html>

apps/page-capture/index.js

@@ -1,132 +1,48 @@
 /**
- * FeHelper Full Page Capture
- * @type {{scroll}}
+ * FeHelper，截图后的保存界面
  */
-module.exports = (() => {
-
-    function max(nums) {
-        return Math.max.apply(Math, nums.filter(function (x) {
-            return x;
-        }));
-    }
-
-    function getPositions(callback) {
-
-        let body = document.body,
-            originalBodyOverflowYStyle = body ? body.style.overflowY : '',
-            originalX = window.scrollX,
-            originalY = window.scrollY,
-            originalOverflowStyle = document.documentElement.style.overflow;
-
-        if (body) {
-            body.style.overflowY = 'visible';
-        }
-
-        let widths = [
-                document.documentElement.clientWidth,
-                body ? body.scrollWidth : 0,
-                document.documentElement.scrollWidth,
-                body ? body.offsetWidth : 0,
-                document.documentElement.offsetWidth
-            ],
-            heights = [
-                document.documentElement.clientHeight,
-                body ? body.scrollHeight : 0,
-                document.documentElement.scrollHeight,
-                body ? body.offsetHeight : 0,
-                document.documentElement.offsetHeight
-            ],
-            fullWidth = max(widths),
-            fullHeight = max(heights),
-            windowWidth = window.innerWidth,
-            windowHeight = window.innerHeight,
-            arrangements = [],
-            // pad the vertical scrolling to try to deal with
-            // sticky headers, 250 is an arbitrary size
-            scrollPad = 200,
-            yDelta = windowHeight - (windowHeight > scrollPad ? scrollPad : 0),
-            xDelta = windowWidth,
-            yPos = fullHeight - windowHeight,
-            xPos,
-            numArrangements;
-
-        // During zooming, there can be weird off-by-1 types of things...
-        if (fullWidth <= xDelta + 1) {
-            fullWidth = xDelta;
-        }
-
-        // Disable all scrollbars. We'll restore the scrollbar state when we're done
-        // taking the screenshots.
-        document.documentElement.style.overflow = 'hidden';
-
-        while (yPos > -yDelta) {
-            xPos = 0;
-            while (xPos < fullWidth) {
-                arrangements.push([xPos, yPos]);
-                xPos += xDelta;
-            }
-            yPos -= yDelta;
-        }
-
-        numArrangements = arrangements.length;
-
-        function cleanUp() {
-            document.documentElement.style.overflow = originalOverflowStyle;
-            if (body) {
-                body.style.overflowY = originalBodyOverflowYStyle;
-            }
-            window.scrollTo(originalX, originalY);
+new Vue({
+    el: '#pageContainer',
+    data: {
+        capturedImage: '',
+        imageHTML: '',
+        originPageInfo: '',
+        defaultFilename: Date.now() + '.png',
+        expand: false,
+        btnInfoText: '点击展开'
+    },
+    mounted: function () {
+        let bpInstance = chrome.extension.getBackgroundPage().BgPageInstance;
+        let capturedData = bpInstance.getCapturedData();
+        if (capturedData && capturedData.imageURI && capturedData.imageURI.length) {
+            this.capturedImage = capturedData.imageURI[0];
+            this.imageHTML = `<img class="img-result" src="${this.capturedImage}" />`;
+            this.originPageInfo = JSON.stringify(capturedData.pageInfo, null, 4);
+            this.defaultFilename = capturedData.filename;
         }
-
-        (function processArrangements() {
-            if (!arrangements.length) {
-                cleanUp();
-                if (callback) {
-                    callback();
+    },
+    methods: {
+        expandInfo: function () {
+            this.expand = !this.expand;
+            this.btnInfoText = this.expand ? '点击收起' : '点击展开';
+        },
+
+        save: function () {
+            // 请求权限
+            chrome.permissions.request({
+                permissions: ['downloads']
+            }, (granted) => {
+                if (granted) {
+                    chrome.downloads.download({
+                        url: this.capturedImage,
+                        saveAs: true,
+                        conflictAction: 'overwrite',
+                        filename: this.defaultFilename
+                    });
+                } else {
+                    alert('必须接受授权，才能正常下载！');
                 }
-                return;
-            }
-
-            let next = arrangements.shift(),
-                x = next[0], y = next[1];
-
-            window.scrollTo(x, y);
-
-            let data = {
-                type: MSG_TYPE.PAGE_CAPTURE_CAPTURE,
-                x: window.scrollX,
-                y: window.scrollY,
-                complete: (numArrangements - arrangements.length) / numArrangements,
-                windowWidth: windowWidth,
-                totalWidth: fullWidth,
-                totalHeight: fullHeight,
-                devicePixelRatio: window.devicePixelRatio
-            };
-
-            // Need to wait for things to settle
-            window.setTimeout(function () {
-                // In case the below callback never returns, cleanup
-                let cleanUpTimeout = window.setTimeout(cleanUp, 1250);
-
-                chrome.runtime.sendMessage(data, function (captured) {
-                    window.clearTimeout(cleanUpTimeout);
-
-                    if (captured) {
-                        // Move on to capture next arrangement.
-                        processArrangements();
-                    } else {
-                        // If there's an error in popup.js, the response value can be
-                        // undefined, so cleanup
-                        cleanUp();
-                    }
-                });
-
-            }, 150);
-        })();
-    }
-
-    return {
-        scroll: getPositions
+            });
+        }
     }
-
-})();
+});

apps/page-capture/inject.js

@@ -0,0 +1,129 @@
+/**
+ * FeHelper Full Page Capture
+ * @type {{scroll}}
+ */
+module.exports = (() => {
+
+    function max(nums) {
+        return Math.max.apply(Math, nums.filter(function (x) {
+            return x;
+        }));
+    }
+
+    function getPositions(callback) {
+
+        let body = document.body,
+            originalBodyOverflowYStyle = body ? body.style.overflowY : '',
+            originalX = window.scrollX,
+            originalY = window.scrollY,
+            originalOverflowStyle = document.documentElement.style.overflow;
+
+        if (body) {
+            body.style.overflowY = 'visible';
+        }
+
+        let widths = [
+                document.documentElement.clientWidth,
+                body ? body.scrollWidth : 0,
+                document.documentElement.scrollWidth,
+                body ? body.offsetWidth : 0,
+                document.documentElement.offsetWidth
+            ],
+            heights = [
+                document.documentElement.clientHeight,
+                body ? body.scrollHeight : 0,
+                document.documentElement.scrollHeight,
+                body ? body.offsetHeight : 0,
+                document.documentElement.offsetHeight
+            ],
+            fullWidth = max(widths),
+            fullHeight = max(heights),
+            windowWidth = window.innerWidth,
+            windowHeight = window.innerHeight,
+            arrangements = [],
+            // pad the vertical scrolling to try to deal with
+            // sticky headers, 250 is an arbitrary size
+            scrollPad = 200,
+            yDelta = windowHeight - (windowHeight > scrollPad ? scrollPad : 0),
+            xDelta = windowWidth,
+            yPos = fullHeight - windowHeight,
+            xPos,
+            numArrangements;
+
+        // During zooming, there can be weird off-by-1 types of things...
+        if (fullWidth <= xDelta + 1) {
+            fullWidth = xDelta;
+        }
+
+        // Disable all scrollbars. We'll restore the scrollbar state when we're done
+        // taking the screenshots.
+        document.documentElement.style.overflow = 'hidden';
+
+        while (yPos > -yDelta) {
+            xPos = 0;
+            while (xPos < fullWidth) {
+                arrangements.push([xPos, yPos]);
+                xPos += xDelta;
+            }
+            yPos -= yDelta;
+        }
+
+        numArrangements = arrangements.length;
+
+        function cleanUp() {
+            document.documentElement.style.overflow = originalOverflowStyle;
+            if (body) {
+                body.style.overflowY = originalBodyOverflowYStyle;
+            }
+            window.scrollTo(originalX, originalY);
+        }
+
+        (function processArrangements() {
+            if (!arrangements.length) {
+                cleanUp();
+                if (callback) {
+                    callback();
+                }
+                return;
+            }
+
+            let next = arrangements.shift(),
+                x = next[0], y = next[1];
+
+            window.scrollTo(x, y);
+
+            let data = {
+                type: MSG_TYPE.PAGE_CAPTURE_CAPTURE,
+                x: window.scrollX,
+                y: window.scrollY,
+                complete: (numArrangements - arrangements.length) / numArrangements,
+                windowWidth: windowWidth,
+                totalWidth: fullWidth,
+                totalHeight: fullHeight,
+                devicePixelRatio: window.devicePixelRatio
+            };
+
+            // Need to wait for things to settle
+            window.setTimeout(function () {
+                // In case the below callback never returns, cleanup
+                let cleanUpTimeout = window.setTimeout(cleanUp, 1250);
+
+                chrome.runtime.sendMessage(data, function (captured) {
+                    window.clearTimeout(cleanUpTimeout);
+
+                    if (captured) {
+                        processArrangements();
+                    } else {
+                        cleanUp();
+                    }
+                });
+
+            }, 150);
+        })();
+    }
+
+    return {
+        scroll: getPositions
+    }
+
+})();

apps/static/js/msg_type.js

@@ -84,7 +84,7 @@ const MSG_TYPE = {
     AJAX_DEBUGGER_SWITCH: "ajax-debugger-switch",
 
     HTML_TO_MARKDOWN: "html2markdown",
-    PAGE_CAPTURE:'PAGE_CAPTURE',
+    PAGE_CAPTURE:'page-capture',
     PAGE_CAPTURE_SCROLL:"page_capture_scroll",
     PAGE_CAPTURE_CAPTURE:"page_capture_capture",