如何写一个浏览器插件，可以将在Vue SFC Playground中写好的代码直接push到自己指定的github仓库里？

Question

如何写一个浏览器插件，可以将在Vue SFC Playground中写好的代码直接push到自己指定的github仓库里？
用户故事

• 登录github账号（该网站的Header多了个用户图标）
• 在Vue SFC Playground中写好代码
• 点击用户图标，弹出菜单栏
• 选中菜单栏中的上传
• 弹出输入框，输入要将代码上传的仓库名字。（此时输入框的底部显示该用户github上所有的仓库名，并且可以根据输入框中的输入过滤仓库名。可以直接选中底部列出的仓库名，而不需要输入完整的仓库）
• 显示上传进度条
• 显示上传结果，上传失败or上传成功。

Vue SFC Playground

问题:

• 该想法是否可行？
• 大体的实现思路是什么？
• 需要用到哪些知识点?

• 怎么在浏览器环境里将这个代码push到一个现有的仓库呢？

  • 先clone然添加vue sfc playground中写好的代码然后push?

Answer 1

你说的需求/想法 大概率 可以通过chrome插件来实现。

ui界面都好说，唯一的不确定就是github必须要走git协议才能提交文件，如果能通过js实现，那插件问题就不大。(查了一下还真有相关的项目可以用，不确定行不行 isomorphic-git)

思路：

1. 用content-script注入js脚本，拿到输入的内容文件名需要的数据，包括增加必要的按钮。
2. 当触发按钮的时候，把数据发送给service-worker，然后在这边提交数据到github。
3. 用上面提到的库推送到github

需要学习什么：可以看一下开发者文档，github上面找找开源的项目，学习一下，会写JavaScript 大概就够了。

---

其他的方案，如果上面提到的js git不太行，可以考虑这样：

这个play的项目是开源的，源码下载下来自己改改界面。然后自己实现一个后端，前端触发按钮后提交给后端程序再推送到github。