用 React 开发你的下一个 Chrome 插件：七牛云图床指南
2023-03-25 13:28:48
利用 React 和七牛云打造专属 Markdown 图床插件
前言
Markdown 写作爱好者经常面临图像存储和带宽的烦恼。而七牛云对象存储为个人用户提供每月 10GB 的免费空间，无疑是白嫖的理想选择。本文将指导你使用 React 构建一个 Chrome 插件，助你轻松将图像上传至七牛云图床，并将其插入 Markdown 文档，解决你的存储和带宽问题。
准备工作
踏上征程之前，请确保安装以下软件：
- Node.js
- npm
- React
- Chrome 浏览器
根据需要，你还可以安装代码编辑器或调试工具等其他软件。
创建 React 项目
首先，使用命令行创建一个新的 React 项目：
npx create-react-app my-app
这将创建一个名为 my-app 的 React 项目。
安装所需依赖项
接下来，使用以下命令安装必需的依赖项：
npm install --save axios react-dropzone react-quill
- axios：用于发送 HTTP 请求的库。
- react-dropzone：用于创建拖放文件上传区域的库。
- react-quill：用于创建富文本编辑器的库。
开发插件
现在，让我们开始开发插件。创建 src/App.js 文件，编写插件的主要逻辑：
import React, { useState } from "react";
import axios from "axios";
import Dropzone from "react-dropzone";
import Quill from "react-quill";
const App = () => {
const [image, setImage] = useState(null);
const [url, setUrl] = useState("");
const onDrop = (acceptedFiles) => {
setImage(acceptedFiles[0]);
};
const uploadImage = () => {
const formData = new FormData();
formData.append("image", image);
axios
.post("https://upload.qiniu.com", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
})
.then((response) => {
setUrl(response.data.url);
})
.catch((error) => {
console.error(error);
});
};
return (
<div>
<Dropzone onDrop={onDrop} multiple={false}>
{({ getRootProps, getInputProps }) => (
<div {...getRootProps()}>
<input {...getInputProps()} />
<p>Drag and drop an image here, or click to select one</p>
</div>
)}
</Dropzone>
{image && (
<div>
<img src={URL.createObjectURL(image)} alt="" />
<button onClick={uploadImage}>Upload Image</button>
</div>
)}
{url && <p>Image URL: {url}</p>}
</div>
);
};
export default App;
这段代码创建了一个 React 应用程序，允许用户选择并上传图像到七牛云图床。当图像上传成功时，应用程序会显示图像的 URL，以便用户复制粘贴到 Markdown 文档中。
打包插件
开发完成后，我们需要打包插件以便安装到 Chrome 浏览器：
npm run build
这将在 build 文件夹中生成打包好的插件。
安装插件
安装插件的过程非常简单：
- 打开 Chrome 浏览器，导航至
chrome://extensions/。 - 启用“开发人员模式”开关。
- 点击“加载已解压的扩展程序”。
- 选择
build文件夹。
插件现在已安装完毕。点击 Chrome 工具栏中的插件图标即可访问它。
使用插件
在 Markdown 文档中插入图像非常简单：
- 打开 Chrome 浏览器，导航到要插入图像的 Markdown 文档。
- 点击插件图标。
- 选择要上传的图像。
- 点击“上传图像”按钮。
图像将上传到七牛云图床，你将获得图像的 URL。将此 URL 复制到 Markdown 文档即可完成插入。
结语
本文介绍了如何使用 React 开发一个 Chrome 插件，将图像上传至七牛云图床并插入 Markdown 文档。通过使用七牛云的免费存储空间，你可以轻松解决 Markdown 写作中的图像存储和带宽问题。
常见问题解答
-
上传文件有哪些限制？
文件大小不能超过 10MB，格式仅限于常见的图像格式（例如 JPG、PNG）。 -
如何获取七牛云的访问密钥？
注册七牛云账号并绑定域名后，在管理控制台中创建密钥对即可。 -
为什么我的图像无法上传？
检查文件大小和格式是否符合要求，并确保七牛云的访问密钥正确。 -
如何自定义插件的外观？
你可以修改src/App.css文件来修改插件的样式和布局。 -
插件支持哪些 Markdown 编辑器？
插件与大多数支持图像插入的 Markdown 编辑器兼容，包括 Typora、Obsidian 和 Notion。
