一键转贴Chrome扩展开发经验总结4:网页内容预处理-出家如初,成佛有余

一键转贴Chrome扩展开发经验总结4:网页内容预处理

技术 admin 397浏览 0评论

一键转贴最核心的任务是对图片资源文件的处理,包括页面图片提取、图片元信息获取、普通图片类型互转、WEBP类型处理(例如WEBP动图转为GIF)、网页图片链接爬虫。

但在开始对图片资源处理前,首先面临一个问题:怎样较好地把网页内容提取出来?也即在对图片资源文件处理前,需要对网页内容进行进行预处理。网页内容预处理工作未做好,会对后续图片资源文件的处理会带来诸多麻烦。

1、网页内容提取典型需求场景:

1、用户鼠标选择了部分网页内容,只针对此部分的内容进行预处理

2、用户未选择任何内容,需要把网页内容主体提取出来

第一个需求场景貌似简单,只需要使用window.getSelection和selection.getRangeAt 就可以获取用户选取的内容。但在实际处理时,面临一个典型问题:如果选择内容中包含了WEBP类型的图片,怎样处理?

由于并非所有浏览器都支持WEBP图片,因此按照WEBP协议,浏览器在请求时候,可以在HTTP Header的Accept字段中协商是否支持。Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 。

如果没有明确指明支持image/webp,则服务器端会返回image/webp类型对应的image/gif、image/png、image/jpeg类型的图片。

因此在第二种场景中,可以通过XMLHTTPREQUEST 发起ajax请求,Header Accept字段指明支持的mime类型,则可以获取实际的图片类型,不需要对WEBP类型的图片做特别处理。

    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.setRequestHeader("Accept", "text/html,application/xhtml+xml,application/xml;q=0.9, image/png, image/jpeg, image/gif, image/svg+xml, image/bitmap,*/*;q=0.8,application/signed-exchange;v=b3");
    xhr.setRequestHeader("Upgrade-Insecure-Requests", 1);
    xhr.onload = function (e) {
      if (xhr.status == 200) {

      } else {

      }
    };
    xhr.onerror = function (err) {
    };
    xhr.send();

这也是直接手工修改WEBP URL链接地址,将对应的的.webp后缀修改为类似.jpg、.png、.gif,可以得到非WEBP格式图片的原理。

而在第一种需求场景中,由于用户只选取了页面部分内容,无法通过与服务器协商方式获取非WEBP类型的图片。

一种方案是保存下用户选择的范围(getRangeAt),然后重新以不支持image/webp的请求整个页面,然后根据保存的范围重新获取响应区间的内容。由于支不支持image/webp返回的网页内容并非完全相同,此种方案并不准确。而且如果用户是直接单独打开了WEBP图片,对大部分服务器,协商直接请求图片地址,还是返回webp格式的图片。

总结一下:第一种需求场景,在图片资源处理逻辑上与第二种不同。

但如果只局限在网页内容预处理上,需求场景1和需求场景2逻辑基本上相同。

 

2、网页内容预处理主要任务

1)、提取网页主体内容

由于大部分的网页都包含了广告、导航栏等无关内容,如果只是直接通过window.document.body获取内容,则会包含大量的冗余信息(例如各种无价值链接),还需要用户在可视化编辑器中手工编辑删除,体验不好。

提取网页主体内容,专有术语叫readability,Pocket、Instapaper这样的服务都使用了此技术。

大部分开源 readability 项目,都是基于 arc90labs-readability – Readability cleans up hard-to-read articles on the Web 

一些开源移植版本:

 

2)、预处理图片资源链接

典型需求场景为:目前很多网站都使用了图片惰性加载技术(lazy loading),在装载时候 img 标签中src一般为占位图片,实际图片链接在data-src中。装载完成后(例如用户鼠标滚动到相应位置后),src值才设置为实际图片链接地址。
如果不做预处理,直接提取图片资源文件,会只提取出占位图片。 与此类似,还需要对<source> <picture> 标签的srcset进行预处理。

 

3、图片链接相对路径补齐为绝对路径

由于在网页内容中,图片链接地址既有相对路径、也有绝对路径的,需要都预先处理为绝对路径。

2、3 两项任务可以放到readability中。

 

 

转载请注明:出家如初,成佛有余 » 一键转贴Chrome扩展开发经验总结4:网页内容预处理

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址