前言

提示：这里可以添加本文要记录的大概内容：

对webscraper中SelectorElementScroll部分改进，使其先滚动到底部加载全部网页，再读出所有数据。
因Firefox浏览器加载自己写的扩展程序需要审批，因此使用360浏览器加载改写的扩展，QQ浏览器中部分功能不能正常运行，其他浏览器未尝试。

提示：本代码在360浏览器中执行通过

一、对webscraper0.2.0.18的修改

该版本中SelectorElementScroll正好处于script/Selector文件夹下，文件结构较简单，但官方初始版本在执行上就发现有些浏览器不兼容，因此后面对更高版本也做了修改。

var SelectorElementScroll = {canReturnMultipleRecords: function () {return true;},canHaveChildSelectors: function () {return true;},canHaveLocalChildSelectors: function () {return true;},canCreateNewJobs: function () {return false;},willReturnElements: function () {return true;},scrollToBottom: function() {window.scrollTo(0,document.documentElement.scrollHeight);//console.log(document.documentElement.scrollTop+";"+document.documentElement.clientHeight+","+document.documentElement.scrollHeight);},scrollToTop: function() {var step=50;if(document.documentElement.scrollTop>step){window.scrollTo(document.documentElement.scrollTop,document.documentElement.scrollTop-step);}else{window.scrollTo(document.documentElement.scrollTop,0);}},_getData: function (parentElement) {var delay = parseInt(this.delay) || 0;var deferredResponse = $.Deferred();var foundElements = [];var lastHeight=0;var isTouchBottom=false;// initially scroll down and waitthis.scrollToBottom();var nextElementSelection = (new Date()).getTime()+delay;var begin = nextElementSelection;// infinitely scroll down and find all itemsvar interval = setInterval(function() {var now = (new Date()).getTime();// sleep. wait when to extract next elementsif(now < nextElementSelection) {clearInterval(interval);return;}/*if(now - begin > 10000){clearInterval(interval);alert("now-begin");return;}*/var elements = this.getDataElements(parentElement);// quick find max bottomif(!isTouchBottom && lastHeight!=document.documentElement.scrollHeight) {// continue scrolling and add delaylastHeight=document.documentElement.scrollHeight;foundElements = elements;this.scrollToBottom();nextElementSelection = now+delay;      //alert('step1;now:='+now+'nextElementSelection ='+nextElementSelection);// check max bottom//}else if(!isTouchBottom && lastHeight==document.documentElement.scrollHeight) {}else if(!isTouchBottom &&now - begin > 10000){isTouchBottom=true;foundElements = elements;this.scrollToTop();nextElementSelection = now+delay;//alert('step2;scrollTop='+document.documentElement.scrollTop);// smooth up to load pic}else if(isTouchBottom && document.documentElement.scrollTop!=0){foundElements = elements;this.scrollToTop();nextElementSelection = now+delay;//alert('step3;scrollTop='+document.documentElement.scrollTop);// check top}else if(isTouchBottom && document.documentElement.scrollTop==0){clearInterval(interval);deferredResponse.resolve(jQuery.makeArray(elements));//alert('step4;scrollTop='+document.documentElement.scrollTop);}}.bind(this), 50);return deferredResponse.promise();},getDataColumns: function () {return [];},getFeatures: function () {return ['multiple', 'delay']}
};

二、对0.3.6版本的修改

1.导入

导入src目录，先修改其中的manifest.json文件，完善插件名称、版本号等。
代码如下（示例）：

2.修正报错

要点2：
引用模块必须在json中声明类型"type"="module"或在html中添加type=“module”，否则无法识别

Uncaught SyntaxError: Cannot use import statement outside a module

如：

<script type="module" src="/public/portis.js"></script>

或

 "background": {"page": "./background/background.html","type": "module"},

要点3：
导入的模块文件地址前不能省略/（根文件夹）或./（本文件夹）或…/（上层文件夹），须按照规范

Uncaught TypeError: Failed to resolve module specifier "mymodule.js". Relative references must start with either "/",

如：

import * as browser from "../webextension-polyfill/browser-polyfill.min.js";
import Config from '../scripts/Config';
import StorePouchDB from '../scripts/StorePouchDB';
import StoreRestApi from '../scripts/StoreRestApi';
import Sitemap from '../scripts/Sitemap';
import Queue from '../scripts/Queue';
import ChromePopupBrowser from '../scripts/ChromePopupBrowser';
import Scraper from '../scripts/Scraper';
import getBackgroundScript from '../scripts/BackgroundScript';

3.特殊版本

发现GitHub上下载的版本是第三方修改版本，与官网下载版本不符，格式也不对应，修改此版本任务终止。

三、对0.6.4版本的修改

从0.2.1版本后采用ES6语法重写，之后所有版本都在此基础上迭代，因此我修改了最新版本。ES6语法一开始有些难以理解，因此是模仿着改写。

主要修改部分为background_script.js和content_script.js两个文件，注意devtools_panel.js也包含与background.js相同的代码，但修改devtools_panel.js是无效的。

background_script.js的#16095行是SelectorElementScroll部分

function(e, t, i) {"use strict";var n = this && this.__awaiter || function(e, t, i, n) {return new (i || (i = Promise))((function(r, a) {function o(e) {try {c(n.next(e));} catch (e) {a(e);}}function s(e) {try {c(n.throw(e));} catch (e) {a(e);}}function c(e) {var t;e.done ? r(e.value) : (t = e.value, t instanceof i ? t : new i((function(e) {e(t);}))).then(o, s);}c((n = n.apply(e, t || [])).next());}));}, r = this && this.__await || function(e) {return this instanceof r ? (this.v = e, this) : new r(e);}, a = this && this.__asyncGenerator || function(e, t, i) {if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");var n, a = i.apply(e, t || []), o = [];return n = {}, s("next"), s("throw"), s("return"), n[Symbol.asyncIterator] = function() {return this;}, n;function s(e) {a[e] && (n[e] = function(t) {return new Promise((function(i, n) {o.push([ e, t, i, n ]) > 1 || c(e, t);}));});}function c(e, t) {try {(i = a[e](t)).value instanceof r ? Promise.resolve(i.value.v).then(l, u) : d(o[0][2], i);} catch (e) {d(o[0][3], e);}var i;}function l(e) {c("next", e);}function u(e) {c("throw", e);}function d(e, t) {e(t), o.shift(), o.length && c(o[0][0], o[0][1]);}};Object.defineProperty(t, "__esModule", {value: !0}), t.SelectorElementScroll = void 0;const o = i(10);class s extends o.Selector {constructor(e) {super(), this.type = "SelectorElementScroll", this.selector = "", this.multiple = !0, this.delay = 2e3, this.scrollElementSelector = "", this.updateData(e);}canReturnMultipleRecords() {return !0;}canHaveChildSelectors() {return !0;}canCreateNewJobs() {return !1;}willReturnElements() {return !0;}scrollToBottomIm(e) {return n(this, void 0, void 0, (function*() {e.element;this.scrollElementSelector, yield e.scrollDownBodyIm();}));}scrollToBottom(e, t = !1) {return n(this, void 0, void 0, (function*() {const i = e.element;if (this.scrollElementSelector) {const n = yield e.getElement(this.scrollElementSelector);if (!n) return;yield e.scrollDownElement(i, this.selector, t, n.element);} else yield e.scrollDownBody(i, this.selector, t);}));}scrollToTop(e) {return n(this, void 0, void 0, (function*() {e.element;this.scrollElementSelector, yield e.srcollBodyToTop();}));}_getData(e) {return a(this, arguments, (function*() {yield r(this.waitDelay()), yield r(this.scrollToTop(e));const t = parseInt("" + this.delay, 10) || 0;let i = yield r(this.getDataElements(e)), n = i.length;for (;;) {if (yield r(this.scrollToBottomIm(e)), yield r(e.webPage.waitForPageLoadComplete(!1, t)), i = yield r(this.getDataElements(e)), i.length === n && (yield r(this.scrollToTop(e)), yield r(this.scrollToBottom(e, !0)), yield r(e.webPage.waitForPageLoadComplete(!1, t)), i = yield r(this.getDataElements(e)), i.length === n) && (yield r(this.scrollToTop(e)), yield r(this.scrollToBottom(e, !0)), yield r(e.webPage.waitForPageLoadComplete(!1, t)), i = yield r(this.getDataElements(e)), i.length === n)) {for (const e of i) yield yield r(e);return yield r(void 0);}n = i.length;}}));}getDataColumns() {return [];}getFeatures() {return [ "selector", "multiple", "delay", "scrollElementSelector" ];}getExperimentalFeatures() {return [ "scrollElementSelector" ];}}t.SelectorElementScroll = s;
}

注意#50477和#50918行做了函数传递
#50477

     scrollDownBody(e, t, i = !1) {return n(this, void 0, void 0, (function*() {return this.sendMessage("scrollDownBody", [ e, t, i ]);}));}srcollBodyToTop() {return n(this, void 0, void 0, (function*() {return this.sendMessage("srcollBodyToTop");}));}

#50918

        srcollBodyToTop() {return n(this, void 0, void 0, (function*() {yield this.contentScriptClient.srcollBodyToTop();}));}scrollDownBodyIm() {return n(this, void 0, void 0, (function*() {yield this.contentScriptClient.scrollDownBodyIm();}));}

content-script.js中

#2135

            scrollElementToTop(e) {return r(this, void 0, void 0, (function*() {const t = this.elementReferences.getElementByReference(e);yield s.ScrollDown.scrollElementToTop(t);}));}srcollBodyToTop() {return r(this, void 0, void 0, (function*() {yield s.ScrollDown.scrollElementToTop(window);}));}scrollElementToBottomIm(e) {return r(this, void 0, void 0, (function*() {const t = this.elementReferences.getElementByReference(e);yield s.ScrollDown.scrollElementToBottomIm(t);}));}scrollDownBodyIm() {return r(this, void 0, void 0, (function*() {yield s.ScrollDown.scrollElementToBottomIm(window);}));}

#2856

            static scrollElementToTop(e) {return r(this, void 0, void 0, (function*() {0 !== o.getElementScrollYPosition(e) && (yield o.scrollToY(0, e));}));}static scrollElementToBottomIm(e) {return r(this, void 0, void 0, (function*() {document.documentElement.scrollTop !== o.getElementScrollYPosition(e) && (yield o.scrollToY(0, e));}));}

总结

通过自己改写浏览器插件大幅提高工作效率，修改该浏览器插件需要补充JS（ES6）方面知识，ES6的难度较高，不太容易上手。

webscraper改写案例分析相关推荐

崔华 oracle简历,2013数据库大会:崔华-基于Oracle的SQL优化案例分析
2013数据库大会:崔华-基于Oracle的SQL优化案例分析崔华的新书即将出版,其数据库大会上的演讲也非常精彩,他的新书十分值得期待. 2013年中国数据库技术大会第二天的"Oracle ...
Python：Python语言的简介(语言特点/pyc介绍/Python版本语言兼容问题(python2 VS Python3))、安装、学习路线(数据分析/机器学习/网页爬等编程案例分析)之详细攻略
Python:Python语言的简介(语言特点/pyc介绍/Python版本语言兼容问题(python2 VS Python3)).安装.学习路线(数据分析/机器学习/网页爬等编程案例分析)之详细攻略 ...
MYSQL——索引设计原则与案例分析
摘要 B+ 树为了维护索引有序性,在插入新值的时候需要做必要的维护.假如表中 R1~R5 的 (ID,k) 值分别为 (100,1).(200,2).(300,3).(500,5) 和 (600,6) ...
北航软工-软件案例分析-IT问答平台
项目内容这个作业属于哪个课程 2023 年北航软件工程这个作业的要求在哪里个人作业-软件案例分析我在这个课程的目标是学习软件开发方法,了解并实践一些软件工程的方法论和工具,积累以结对编程和 ...
pandas案例分析
pandas案例分析 1 需求现在我们有一组从2006年到2016年1000部最流行的电影数据数据来源:https://www.kaggle.com/damianpanek/sunday-eda/ ...
Java多线程：线程8锁案例分析
线程8锁案例分析通过分析代码,推测打印结果,并运行代码进行验证 1.两个线程调用同一个对象的两个同步方法被synchronized修饰的方法,锁的对象是方法的调用者.因为两个方法的调用者是同一个, ...
R语言Logistic回归模型案例:分析吸烟、饮酒与食管癌的关系
R语言Logistic回归模型案例:分析吸烟.饮酒与食管癌的关系目录 R语言Logistic回归模型案例分析吸烟.饮酒与食管癌的关系 #样例数据
计算机两个硬盘无法重启,双硬盘电脑非系统盘硬盘盘符重启丢失的案例分析
原标题:双硬盘电脑非系统盘硬盘盘符重启丢失的案例分析昨晚,小编在工作了一段时间之后,重新启动计算机,突然发现两个数据盘分区没了,从计算机的磁盘管理里面看,硬盘分区还在,盘符没了.如下图所示: 我的计 ...
案例分析 | SAP如何帮助企业实现端到端的数字化供应链管理
https://www.toutiao.com/a6687387597922107916/ 在我之前的一篇 <收藏 | 供应链管理最佳实践之S&OP> 文章中,为大家介绍了关于S& ...

webscraper改写案例分析

文章目录

前言