一键转贴最核心的任务是对图片资源文件的处理，包括页面图片提取、图片元信息获取、普通图片类型互转、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
一些开源移植版本：
- JS版本：https://github.com/mozilla/readability
- java版本：https://github.com/karussell/snacktory
- php 版本：https://github.com/feelinglucky/php-readability
- Python版本：https://github.com/timbertson/python-readability
- nodejs版本：https://github.com/luin/readability
- Swift版本：https://github.com/exyte/ReadabilityKit
- Ruby版本：https://github.com/cantino/ruby-readability
2）、预处理图片资源链接
典型需求场景为：目前很多网站都使用了图片惰性加载技术（lazy loading），在装载时候 img 标签中src一般为占位图片，实际图片链接在data-src中。装载完成后（例如用户鼠标滚动到相应位置后），src值才设置为实际图片链接地址。
如果不做预处理，直接提取图片资源文件，会只提取出占位图片。
3、图片链接相对路径补齐为绝对路径
由于在网页内容中，图片链接地址既有相对路径、也有绝对路径的，需要都预先处理为绝对路径。
2、3 两项任务可以放到readability中。
转载请注明：虚拟号之家 » 一键转贴Chrome扩展开发经验总结4：网页内容预处理