一键采集文章(掘金划水库跑路了/掘金被黑客rm-rf了)

　　一键采集文章(掘金划水库跑路了/掘金被黑客rm-rf了)

　　有一天我在掘金划桨的时候，突然想到了一件事情

　　我在掘金发表了很多文章。发布后把本地保存的原文件删了，因为懒得整理放在桌面上，所以就随便删了，也就是说我写了文章只写了掘金的原件，如果有的话那天掘金破产/掘金从库中被删除/掘金被rm -rf 黑客攻击/掘金负担不起OSS 费用而被关闭，那我文章 是不是损失的机会很大?

　　虽然我的文章质量一般，但我还是花时间写了，8行，一定要消除这个隐患，容灾备份会发生。

　　保存这些文章并不难，只需点击每个文章的编辑背景，将它们一一复制粘贴到本地，然后下载每个文章中的图片，只是将它们组织到文件夹中，但是当我在本地拥有原创文件时，我没有费心组织它们。现在我想从头开始复制和粘贴新文件。对我来说不是很难吗？

　　所以我想，我只是写一个浏览器插件，把这个东西自动化。

　　先上效果图：

　　渲染图的最终版本可能会发生变化

　　该插件支持下载单个文章和批量下载一个作者的文章两种功能。你可以下载自己的文章，也可以下载别人的文章，下载文章 @文章，文章中引用的图片资源会被下载，并且文章中图片的远程地址会自动替换为本地路径

　　获取文章的内容

　　随机点进一篇文章的文章，然后打开控制台看了一下，发现已经有返回文章详情的原创markdown字符串的界面了，发现界面输入只需要当前的文章id，发现文章的id其实已经明文写在链接上了。这对我来说是天赐之物。您可以在一个界面中获取所有数据。

　　代码刷完后，可以找几篇文章的文章测试一下，没想到很快就遇到了问题。一些文章详情界面返回文章markdown原文字段为空String，我一开始以为掘金使用了一些反作弊技术，但仔细分析后发现并非如此。应该是因为产品设计经过多次迭代，早期发布的文章不会返回原来的markdown字段让前端转，而是直接返回转换后的html字符串

　　如果你发现问题，处理起来很容易。文章 的详细信息仍然返回，但格式已更改。既然你是转换后的html字符串，那我就把你转回markdown。?

　　仍然有很多这样的开源库。环顾四周，我终于选择了夜床。那么反向翻译可以用一句话完成：

　　turndownService.turndown(html)

复制代码

　　不过我也考虑过，在逆向翻译中很难保证100%还原原文。我自己下载的文章，绝对希望能保证100%原样，哪怕只有一个逗号不一致，也难受。

　　如果我要下载的文章是我自己的文章，那我肯定能进入编辑后台，而且编辑界面必须返回原创的markdown字符串。只要我下载了这个内容，我就可以保证100%还原，于是跑去一看，发现确实如此

　　编辑界面需要输入参数draft_id。巧的是，这个draft_id可以从上面的文章详情界面获取

　　对于不属于我的文章，我肯定进不去编辑后台，所以还是按照逆译的方法。经过我的测试，反向翻译的内容与原文基本一致。

　　获取文章中的图片

　　既然是下载，那就连文章里面的图片都要下载。首先，它确实是为了节省到当地。其次，如果您以后想在其他平台上发布，您可以轻松传输图片。三、如果哪天掘金会在图片上加个反水蛭的话，你可能看不出来

　　从文章字符串中取出原文，正则匹配就可以了，但是因为文章详情界面有的返回markdown，有的返回html，需要为每一个都写一个正则规则

　　匹配图片链接后，根据这些链接下载对应的图片，然后将原文中图片的远程链接替换为下载到本地的图片文件的路径，即本地图片映射到< @文章一张一张如果你下载一堆图片，你不能一张一张对齐或者手动替换，对吧？所以在处理的时候需要考虑到这一点

　　下载文章

　　现在文章的原创markdown字符串可用，下一步需要保存到本地

　　字符串转二进制文件有两种方式，使用Blob，将二进制文件保存在本地

　　一种是借助标签的下载属性，使用标签来模拟浏览器下载。但是这种方法的局限性在于不能指定下载目录。只能下载到默认目录或用户手动指定。

　　而我的想法是，最好用作者的名字作为文件夹名，然后在这个文件夹下新建一个子文件夹。这些子文件夹的名字就是每篇文章的名字文章，子文件夹下收录一个.md格式的文章正文内容文件，以及几个图片文件，这样会更正规，更容易存档，所以我选择了浏览器插件暴露的 chrome.downloads.download 方法

　　var blob = new Blob([message.data.content], { type: 'text/x-markdown' })

chrome.downloads.download({

url: URL.createObjectURL(blob),

saveAs: false

})

复制代码

　　下载图片

　　也可以使用 chrome.downloads.download 方法将图片下载到本地。这一步需要注意，因为要替换文章原文中图片的远程路径，所以需要在下载前确定图片名称。

　　图片扩展后缀的种类很多，比如.jpg、.png、.gif、.svg，不过好在请求响应头的content-type字段会告诉图片MIME是什么，所以后缀可以也确定

<p>一般来说，当你下载页面上的文件时，浏览器会弹出一个弹窗告诉你要下载的文件的信息，让你确认是否真的下载了，考虑到