PicGo

PicGo是一个用于快速上传图片并获取图片 URL 链接的工具，可以把本地图片上传到图床并返回各种格式的链接

插件

PicGo支持插件开发，但官方教程并没有从零到安装成功的具体细节演示，只说了插件开发相关的一些东西

所以对新手的我来说还是碰到很多坑的，在此记录分享一下

入门教程

下面我会用PicGo给我们提供的插件开发模板进行插件从零到安装成功的开发过程演示

全局安装 PicGo

yarn global add picgo
# or
npm install picgo -g

下载模板

picgo...

chrome/browser

这两个是浏览器为插件开发提供的API，Chrome浏览器的变量名叫chrome，火狐浏览器的变量名叫browser

代码提示

我用的编辑器是vscode，之前一直不明白怎么给这两个变量添加代码提示

最早尝试

最开始我想的是加一个全局变量，搜到可以在.eslintrc配置中添加一个globals，把变量名加进去，但后来发现这个东西跟代码提示没半毛钱关系。这是ESLint的配置文件，它的功能只是代码检查。

问过插件开发的大佬，大佬只说导入Library啥的，当时的我亿脸懵逼...

原由

单纯用javascript其实还是有点局限性，比如枚举，虽然js中可以用对象实现，实际上就是定义一个对象，并让它readonly。但不如用typescript语法清晰明了。还有我一直想接触静态类型语言，包括之前想把Btools插件重制一下，目前也是用的vue+typescript起步了，不过搁置了。

加入 TypeScript 的方式

直接安装

因为目前开发的项目是用的electron-vue^(Github)直接创建的，所以就想直接用包管理器进行安装，装好typescript和ts-loader...

做插件需要用到的，因为插件比页面元素加载的快，并且有些页面还是js渲染内容的

所以就需要一个计时器循环检查页面中是否有我需要的元素，于是这个getElements()就出来了

放在了一个工具类中

export default class Util {
  private static _instance: Util;

  public static instance(): Util {
    if (typeof this._instance === 'undefined'...

折腾了两天，终于把这个做成了能打包成浏览器加载的插件了

姑且在这里记录一下，也算是前端学习笔记

目录结构

📦src
 ┣ 📂assets
 ┃ ┣ 📂icon
 ┃ ┃ ┣ 📜128.png
 ┃ ┃ ┣ 📜16.png
 ┃ ┃ ┗ 📜48.png
 ┃ ┗ 📂styles
 ┃ ┃ ┣ 📜global.scss
 ┃ ┃ ┣ 📜options.scss
 ┃ ┃ ┗ 📜popup.scss
 ┣ 📂background
 ┃ ┗ 📜background.ts
 ┣ 📂components
 ┃ ┣ 📂ui
 ┃ ┃ ┗...