图床
相信对于写博客的开发者们来说， 图床是一个非常非常刚需的东西。 如果有钱的同学可以可以去阿里云或者七牛云等站点， 借助他们的云能力构建自己的图床；
但是想免费白嫖的同学呢， 想免费的同学怎么办？
网上有很多通过 gitee 来做静态资源图床的， 也有通过 PicGo+GitHub+jsDeliver 来搭建的。 但是在国内， 感觉都不是可取之道。 首先 gitee 的资源没有 CDN 加速， 非常非常的慢， github + jsDeliver 虽然有 CDN 加速了， 但是他们 cdn 站点是在国外，所以也非常非常的慢， 有没有 CDN 甚至都没有感觉。
那有没有白嫖的， 速度又超级快的呢？
当然有， 而且还是免费且非常快的。 就是掘金静态资源图！它能帮我们自动处理图片压缩， 图片质量处理， 图片 CDN 等， 能力非常强大， 加载速度更加是快的离谱！
我这儿举一个简单的例子：
这些图片初次加载， 最大的图片， 500 多kb, 只需要 140ms ；如果 有 CDN 缓存之后呢？
是的， 只需要 3ms , 是不是很惊喜， 很意外！
这就是强大的掘金静态资源图片的能力。
我作为小白咋使用呢？
我这儿给一个小白来个指引几步走：
- 注册一个掘金账号
这个没有啥好说的， 直接略过吧。
- 创建一个掘金文档草稿， 随便取名字就可以
在掘金作者中心写文章：
然后随便取一个名字， 退出即可， 就可以保存为一个草稿
- 这个时候就喜提一个图床文档了
比如我们有啥看上的图片， 复制粘贴到文档里面， 它就自动上传生成一个图片 CDN 图片链接： 比如这样操作
而且还可以自己上传本地文件， 这里就不做演示了。
我做了一个插件， 借助掘金的能力搭建个人顶级图床
上面的流程使用静态图片也是非常流畅和好使的。 但是也有一定的痛点问题： 比如我们每次需要保存新图片的时候， 就需要去登陆掘金， 然后找到我的草稿， 然后复制粘贴；再比如我图片太多了， 我想找到我想要的图片是一件很困难的事情。
所以现在进入我们的主题了。 有没有一个办法， 能够非常方便的保存我的静态图片， 有没有一种办法， 能够让我非常轻松的预览我所有保存的图片; 我甚至有好几个图库草稿， 能不能快速来回切换呢?
基于上面的需求，我就搭建了一个插件工具来解决上面的问题：
先来看看插件效果
先俩看看使用效果吧：图库的图片， 都可以使用 瀑布流的方式来预览， 这样可以非常方方面的找到我的图片， 支持复制、预览、下载， 就像这样子：
其中如果遇到自己想要的图片了，直接可以换出图库链接， 直接保存即可。
如果是初次使用：
需要自己去添加图库的草稿链接
快速保存图片
在插件的这个地方， 换起来之后， 会有自己保存的图床链接， 直接点就可以到自己的图床草稿了， 然后复制粘贴图片即可。
大概就是这样子的功能吧。 更多的功能， 有兴趣的同学们自己探索一下吧。 当然有BUG 或者有 想法的同学， 请联系作者
咋使用
按照以下步骤来即可
- 访问代码源码
- 下载代码
- 解压 dist.zip 文件， 然后将解压后的文件，将产物目录导入到浏览器扩展程序页面即可（【添加已解压的扩展程序】）。
用到了哪些技术
作为开发同学，我们来梳理一下用到的技术， 当然不会做细节代码展示分析， 有兴趣的同学可以直接去看源码即可。
用到的最核心技术点， 就是我们如何去获取草稿里面的链接
思路1：最开始想法是， 直接在插件 background service worker 里面去请求掘金的草稿接口， 结果直接踩坑第一步：掘金权限做的太好了， 直接会因为不同的 Origin 直接拦截请求下来。 当然借助服务端的能力可以越过这个， 插件里面使用服务端能力， 岂不是我的 cookie 都有可能被传走？ 所以此法果断放弃。
思路2： 使用浏览器扩展程序能力， 去动态创建一个掘金图床草稿页面的页签， 然后通过 content script 注入脚本的能力， 在掘金草稿的页面去请求草稿接口， 拿到草稿的数据在给我 background wervice worker 。 还是失败了， 因为掘金的鉴权能力实在是太牛逼了， 因为我没有办法越过他们的 csrf_token 检查， 我没有办法获取实时的 token。 就导致了， 该方法可能现在好使， 第二天就接口挂了。
思路3：让插件去做爬虫。 也是通过插件去创建掘金图床草稿页面的页签， 然后等待掘金本身去请求草稿， 请求回来之后， 等待渲染完成， 然后直接爬取 html 脚本即可。
技术
-
通过
chrome.storage.local去存取储用户保存掘金图床草稿链接； -
使用
chrome.runtime.sendMessage去做 html <--> service worker 的通信 -
使用
chrome.webRequest.onCompleted监听请求是否完成 -
使用
chrome.scripting.executeScript对页面页签进行脚本注入 -
使用
bricks.js做图片瀑布流；
彩蛋
插件里面， 还有两个功能， 一个是开启掘金阅读模式 ， 还有一个是 支持复制当前文章为 Markdown
可以看下面两个文章：