借助 Github API，打造专属图床 Chrome 插件

2023-10-15 16:13:39

打造专属图床神器：Picee Chrome 插件开发之旅

在数字化的时代里，图片无处不在，成为了我们沟通交流和记录生活的重要媒介。作为一名创作者，图片的存储和分享问题一直困扰着我。在尝试了各种图床服务后，我发现它们要么收费昂贵，要么限制重重。于是，我萌生了开发一款专属图床 Chrome 插件的想法。

缘起：寻找完美的图床

我的初衷很简单：打造一款免费、无限制、且易于使用的图床插件。它应该能够无缝集成到我的工作流程中，并满足我分享图片的需求。经过一番调研，我决定基于 Github API 开发这款插件，原因有三：

强大的功能： Github API 可让我轻松实现图片上传、存储和分享。
稳定可靠： Github 是一个可靠且稳定的平台，可以确保图片的安全性和持久性。
庞大用户群体： Github 拥有庞大的用户群体，可以为我的插件提供潜在的受众。

构思：勾勒插件蓝图

明确了开发方向后，我开始构思插件的具体功能和设计。我将其划分为以下几个核心模块：

图片上传： 允许用户轻松地从本地计算机上传图片到 Github。
图片存储： 将上传的图片存储在 Github 的私有仓库中，以确保安全性。
图片分享： 提供多种分享方式，如生成图片链接、插入 Markdown 代码等。
图片管理： 提供基本的图片管理功能，如图片列表、删除等。

设计：打造用户友好的界面

为了让插件更易于使用，我精心设计了插件的界面和交互。我采用了简洁明了的风格，并加入了一些人性化的细节，如拖放上传、右键菜单等。

实现：将构思转化为代码

在设计完成后，我开始编写代码。我使用了 Javascript 和 HTML/CSS，并遵循了良好的编程规范。在开发过程中，我遇到了不少挑战，但最终都一一克服。

代码示例：

// 上传图片
const uploadImage = async (file) => {
  const formData = new FormData();
  formData.append('file', file);
  const response = await fetch('https://api.github.com/repos/your-username/your-repo/contents/images', {
    method: 'POST',
    headers: {
      Authorization: 'token your-access-token',
    },
    body: formData,
  });
  const data = await response.json();
  return data;
};

// 插件界面
<div class="container">
  <div class="header">
    <h1>Picee</h1>
    <p>您的专属图床</p>
  </div>
  <div class="content">
    <div class="uploader">
      <label class="btn" for="file-input">
        <span>上传图片</span>
        <input type="file" id="file-input" multiple>
      </label>
      <div class="progress-bar"></div>
    </div>
    <div class="gallery">
      <ul class="list">
        <!-- 显示上传的图片 -->
      </ul>
    </div>
  </div>
</div>