最近开发了一款基于GithubAPI的Chrome插件Picee，现已开源，可在ChromeAppStore获取。过程中涉及到一些有趣的知识点，所以记录下来。Github地址：https://github.com/jrainlau/p...Chrome商店下载地址：PiceeInspiration平时有写东西的习惯，但是找不到合适的图床。有人推荐用微博或者七牛做图床，但总给我一种“被人束缚”的感觉。后来发现Github其实很适合做图床，因为仓库里的所有文件都可以通过链接https://raw.githubusercontent.com直接下载。但是如果为了写一篇文章每次加图片都需要Git操作，那写作体验一定很差。如果有更方便的方式就好了——那就是GithubAPI。GithubAPIGithub提供了一套完整的API进行操作，几乎涵盖了开发一个完整的Github客户端的所有功能。API分为REST风格的v3版本和GraphQL风格的v4版本。为了方便使用，我选择了v3版本。具体的API详情可以查看官方文档。做一个图床应用，我们只需要使用上传文件的API即可。但是在调用这个API之前，用户首先需要对应用进行授权，也就是所谓的登录操作。授权一般的“查看”操作不需要授权，比如获取用户的公开信息，获取公共仓库的issues等。但是，有两种情况需要授权。一是对仓库进行任何“增删改查”操作（包括提交issue、评论等）；二是对某个IP的API调用次数有限制。GithubAPI次数过多需要授权。那么授权应该做什么呢？官方提供了三种方法，分别是Basic、oAuth2token和oAuth2key/secret。基本授权是最传统的账号密码授权方式。我们可以在命令行使用curl来测试一下：curl-u"account:password"https://api.github.com如果账号密码正确，会返回一系列内容，否则会报错回。开发的话，我推荐使用Postman来测试API：点击右边代码可以看到JS代码：wherexhr.setRequestHeader("Authorization","Basicxxxxxx");是我们需要设置的authorizationheader，其中xxxxxx来源于：btoa(username+':'+password)oAuth2tokenauthorization对于账号密码，在第三方平台随便输入不是那么安全，所以有什么办法可以保护帐号？安全，还要达到授权要求？答案是oAuth令牌。简单来说，oAuthtoken相当于用户提供给第三方的授权令牌。第三方可以通过这个token获得用户允许的一系列权限，但是他们不会知道用户的账号和密码，所以可以方便的对第三方应用进行授权，同时有效的保护了用户账号的安全.在Github中，可以在这里设置生成一个具有一定权限的token：最后在Postman中选择OAuth2.0或者BearerToken，然后把这串token粘贴进去。授权标头是不记名令牌。oAuth2key/secret授权这种授权方式允许第三方通过生成一对key/secret来获取用户的公开信息。是只读授权方式，不能重写仓库。主要用于第三方登录，此处不适用。关于key/secret的更多信息可以参考阮一峰的《GitHub OAuth 第三方登录示例教程》，写的很形象也很详细。了解了三种授权方式后，我们就可以进行下一步上传图片了。图片上传API图片上传使用内容API的创建文件接口，通过PUT向指定仓库目录发送带有base64文件内容的请求。这里强调一下，文件必须是base64编码的，否则接口调用会出错。使用btoa('helloworld)方法将helloworld转成base64，然后在Postman中测试：貌似效果还可以，下一步就是开发imagebedplugin了。Chrome插件开发学习插件开发除了看官方文档，还可以参考@小茶同学写的《【干货】Chrome插件(扩展)开发全攻略》，里面有详细的Chrome插件开发说明，非常值得一读。看完上面推荐的文章，我选择了用VueJS开发。由于项目比较简单，所以没有使用任何打包工具，直接通过脚本引入了VueJS。值得注意的是，Chrome扩展不允许内联脚本和内联样式，所以任何css和js文件都必须通过本地文件链接使用。另外，由于我们的JS是在Chrome环境下运行的，所以我们可以放心大胆的使用esmodules、async/await等高级语法，不需要借助任何构建工具。但是我在使用VueJS的第一步遇到了一个问题，用newVue()绑定的DOM元素无法显示。经验证，原来是Chrome插件存在内容安全策略（CSP）限制。默认不支持eval()、newFunction()等方式运行代码，而完整版的VueJS恰好可以做到这一点（官网说的），所以出错了。那么如何解决呢？很简单，在manifest.json中声明即可：//manifest.json{//..."content_security_policy":"script-src'self''unsafe-eval';object-src'self'"}这里我使用弹窗形式的插件，弹窗为项目定义的index.html。如果要调试插件页面，可以直接在插件的弹窗上右击，然后点击“Inspect”，就会弹出熟悉的开发者工具。如果插件文件发生变化，除了重新打开插件外，我们还可以直接在开发者工具中通过cmd+r进行刷新，省去了多次点击的麻烦。功能实现经过前面的准备，我们已经掌握了如何对GithubAPI进行授权，然后上传图片，接下来就是在业务逻辑中实现了。我封装了原生的fetch方法，方便调用：const$fetch=(options)=>{returnwindow.fetch(options.url,{method:options.method||'GET',headers:{"Content-类型”：“应用程序/json”，“授权”：localStorage.getItem（'picee_token'）}，正文：JSON.stringify（options.body）||null，模式：'cors'}）.then（asyncres=>{if(res.status>=200&&res.status<400){return{status:res.status,data:awaitres.json()}}else{return{status:res.status,data:null}}}).catch(e=>e)}exportdefault$fetch请求接口时携带的authorizationheader需要的token，我把它们存放在插件的localStorage中，方便调用。有了请求接口的方法之后，接下来就是完成选择图片和图片转base64的工作了。这里我重用了另一个作品中的chooseImg.js和paste.js方法，终于可以支持选择粘贴拖拽上传图片了。我不会详细介绍其余功能。代码非常简单。建议读者自行查阅。应用发布准备好logo、描述等善后工作后，即可正式提交应用发布。我们可以在开发者信息中心提交插件，填写必要的信息，点击发布，等待审核完成。但在此之前，你必须支付5美元的开发者注册费。国内开发者完成这一步可能会遇到相当大的困难。这个问题在知乎上也有讨论：中国Chrome网上应用店开发者注册费如何用信用卡支付？.我是通过万能的淘宝淘到的。完成注册发布后，可以看到插件首页：值得注意的是，刚刚发布的插件暂时搜索不到，需要一段时间才能搜索到。至此，整个插件开发-发布流程就完成了。
