一键转贴Chrome扩展开发经验总结1-需求及架构设计-出家如初,成佛有余

一键转贴Chrome扩展开发经验总结1-需求及架构设计

技术 admin 641浏览 0评论

为了熟悉chrome扩展开发,正开发一个chrome插件,主要解决一键转贴指定网页内容并发布到Wordpress的需求。

需求场景:

目前很多网站(例如微信公众号)文章中的图片基本上都做了防盗链处理,因此在转贴内容时候,图片无法正常显示。图片少的话,手工修改还行,但如果图片多,工作量奇大。

而且目前很多网站都采用WebP图片格式,像Fatkun这样的图片批量下载扩展以及Wordpres的Import External Images 都不支持批量下载或导入WebP格式图片。

扩展需求:

1、将选中的内容(包括图片、文字)自动发布到Wordpress中。如果用户未选中内容,则为当前页面所有内容。

2、将选中内容中的图片转存到Wordpress服务器或批量下载到本地,避免防盗链限制

3、能够将内容中的WebP图片转为JPG/PNG格式

技术方案分析:

涉及到相关技术方案包括:

1、自动发布到Wordpress

可以使用Wordpress的XML-RPC接口  https://codex.wordpress.org/XML-RPC_WordPress_API

2、转存图片内容到Wordpress

方案1:最直接了当的方案是将选取内容提交到服务器端,由服务器端下载、转化后,再调用XML-RPC提交到Wordpress。

此种方案存在一些问题:如果要做成通用性扩展,则需要依赖单独的服务器接口,同时服务器端需要存储Wordpress的用户名、密码,安全性存在问题。

 

方案2:单独的图片中转服务器

为解决用户名、密码存储问题,可以让服务器端只负责中转图片功能。chrome扩展将图片请求提交给中转服务器,中转服务器下载处理后,返回上传图片的服务器地址,再由扩展将包含转存地址的图文内容直接提交给Wordpress服务器(用户名及密码只存储在扩展本地)。

此种方案,需要维护单独的服务器,单独的服务器很容易成为瓶颈。

 

方案3:扩展将图片下载到本地,再随内容一起提交到Wordpress服务器

最初采用此种方案,后来发现此种方案基本上不可行。基于安全考虑,chrome不允许扩展自动访问本地文件并上传。

 

方案4:直接在浏览中完成图片下载、转换,并提交到Wordpress服务器

核心思路是用canvas作为中转

a、通过XMLHttpRequest2(XHR2)请求图片,得到对应图片的ArrayBuffer,从而可以得到对应图片的mime类型、标准扩展名

参考《下载文件 MIME TYPE智能检测

b、通过HTMLImageElement的Image() 可以得到对应图片的naturalWidth和naturalHeight

c、构建对应图片的Canvas对象,然后转为JPG/PNG格式(此步主要针对WebP,JPG/PNG/GIF等格式可以直接提交)

d、将Canvas对象转为Blob类型

e、使用jQuery的xmlrpc(或者直接用XMLHttpRequest2),调用Wordpress XML-RPC 的wp.uploadFile接口,提交图片到Wordpress服务器,得到上传图片的地址

f、用上传图片的地址替换选中内容对应的图片地址

g、调用Wordpress XML-RPC 的wp.newPost接口,提交图文内容到Wordpress服务器

此种方案主要处理完全在浏览器本地完成,不依赖其他中转服务器,相对于其他几种方案优势很多,因此采用此种方案。

方案中对图片mime类型、扩展名的判断、width、height,直接读取图片流信息,具有较好的适应性。

将WebP转为JPG/PNG采用canvas的方案比采用修改webp扩展名修改为png的方式,适应性更好。

 

3、页面图片内容批量提取

即使像Fatkun这样的图片批量下载工具,对一些图片提取也不全,例如css文件中的图片。

实际上可能包含图片的html元素包括<img>、<input>、<button />、<a />、iframe、css文件。

由于目前很多网站对图片的装载都采用延迟装载方案,而对<img data-src=”” src=””>中源图片的实际地址的data-src 每个网站命名都不相同。

 

4、chrome扩展开发相关技术

相关技术的具体实现,后面文章单独解说。

 

转载请注明:出家如初,成佛有余 » 一键转贴Chrome扩展开发经验总结1-需求及架构设计

发表我的评论
取消评论

表情

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

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