简化 Chrome 扩展程序开发：无需 CRA 即可添加 React

于 2024-09-26 20:05:58 发布
阅读量12 收藏
点赞数
文章标签： chrome react.js 前端 前端框架 javascript
原文链接：https://mp.weixin.qq.com/s?__biz=Mzg4MTYwMzY1Mw==&mid=2247513134&idx=1&sn=9e9e4ace16714ad709c0ce7df66c0d21&chksm=ce2efeea233e585bf3548508e05a948f16a1f2e45696803b8b61c92200b4b9a9b7c6a9751603&scene=126&sessionid=0
版权

本文译者为 360 奇舞团前端开发工程师

原文标题：Simplify Chrome Extension Development: Add React without CRA  

原文作者：Kristian Ivanov  

原文地址：

https://dev.to/k_ivanow/simplify-chrome-extension-development-add-react-without-cra-5h4c

简介

我们都喜欢 React，对吧（除了 Primeagen）。它通过提供一种简单的方法来处理状态，以及访问一个巨大的 npm 模块和组件库，极大地简化了复杂 UI 的构建。它甚至提供了 Create React App (CRA)，只需一个命令就可以快速引导并完成初始设置。

我是 Create React App 的粉丝。它非常适合大多数 web 应用程序，在看到许多从 CRA 弹出的应用程序或使用 gulp 构建/打包的应用后（有时我会觉得自己老了），即使不使用 TypeScript，我也逐渐欣赏它的简单性，以及它在我启动任何新项目时所带来的便利。

然而，在构建像 Chrome 扩展这样的项目时，CRA并不适用，生成的代码过于臃肿。此外，在扩展中，UI 可能只是项目的一部分，大部分逻辑被封装在后台/服务工作线程或内容脚本中。这意味着将大量冗余代码与 React 的使用方式绑定并不总是最佳选择。

另外，如果你开始时只是简单地在 UI 侧写了一些 HTML 和 Tailwind 代码来测试你的想法，然后为扩展的其他部分编写了一堆代码，然后决定让 UI 更易于维护和扩展，并将 React 添加到其中，这该怎么办？

在本指南中，我们将使用 TypeScript、Webpack 和 Tailwind 构建一个 Chrome 扩展，然后以更轻量的方式引入 React，而不使用 CRA。

设置

我最近想开始一个非常简单的 Chrome 扩展，探索一些潜在的 Mutation Observer 用例来定制页面。同时，我也想借此机会尝试 TypeScript，因为我已经有一段时间没有使用它了。

1 设置项目

首先，我们创建一个新的项目目录并用 npm 初始化它：

mkdir ts-chrome-extension
cd ts-chrome-extension
npm init -y

2 添加 TypeScript

安装 TypeScript：

npm install --save-dev typescript

安装完成后，我们需要创建一个 TypeScript 配置文件。该文件将告诉 TypeScript 编译器如何工作。创建 tsconfig.json 文件：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "es2015"],
    "module": "esnext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"]
}

有关 tsconfig.json 文件的更多细节，请查看官方文档。

3 添加基本文件

创建文件夹和基本文件：

mkdir -p src/scripts && mkdir src/popup && touch src/manifest.json src/scripts/{background.ts,contentScript.ts} src/popup/{popup.html,popup.ts}

在此时，我们的文件夹结构应如下所示：

├── package.json
├── package-lock.json
├── popup.ts
├── src
│   ├── manifest.json
│   ├── popup
│   │   ├── popup.html
│   │   └── popup.ts
│   └── scripts
│       ├── background.ts
│       └── contentScript.ts
└── tsconfig.json

4 清单文件

清单文件是 Chrome 扩展的基础。它告诉 Chrome 扩展的功能以及在哪里找到其脚本。我们创建了清单文件，现在填充它：

{
  "manifest_version": 3,
  "name": "TypeScript Chrome Extension",
  "version": "1.0",
  "description": "A Chrome extension built using TypeScript.",
  "action": {
    "default_popup": "popup.html"
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["contentScript.js"]
    }
  ],
  "permissions": ["storage"]
}
说明：

  • Action and Popup："action" 键告诉 Chrome 弹出 HTML 的位置。用户点击扩展图标时，弹出窗口将加载。

  • Service Worker："service_worker" 在 "background" 键中，用于后台任务。

  • Content Scripts：这些脚本允许扩展与网页进行交互。

  • Permissions："storage" 权限使扩展能够通过 Chrome 的存储 API 存储用户数据。

有关 Chrome 扩展的 manifest.json 的完整文档,在这里找到。

5 弹出窗口文件

由于我们还未使用 React，弹出窗口将简单地处理基本的 DOM 交互。

5.1 popup.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Popup</title>
  </head>
  <body>
    <div>
      <h1>Hello, Chrome Extension!</h1>
      <button id="alertButton">Click me</button>
    </div>
    <script src="popup.js"></script>
  </body>
</html>

这是一个简单的 HTML 页面，包含一个按钮和对 popup.js 的脚本引用（将从 popup.ts 打包而来）。

5.2 popup.ts

该文件将处理弹出窗口的基本交互：

document.addEventListener('DOMContentLoaded', () => {
  const alertButton = document.getElementById('alertButton');

  if (alertButton) {
    alertButton.addEventListener('click', () => {
      alert('Button clicked!');
    });
  }
});

这个简单的脚本在 DOM 加载后等待，然后为按钮添加点击监听器，以触发警报。在我们添加 React 之前，此结构为弹出功能奠定了基础。

6 编译 TypeScript

接下来，我们将 TypeScript 文件编译为 JavaScript。运行以下命令：

npx tsc

这将会把 TypeScript 文件转换为 JavaScript。popup.ts、background.ts 和 contentScript.ts 将被编译为 popup.js、background.js 和 contentScript.js。但由于我们很快会添加 Webpack 来管理打包，因此这只是一个临时步骤。

7 添加 Webpack 进行打包

现在我们有了基本结构，我们需要 Webpack 来处理将所有脚本打包成 Chrome 可加载的优化文件。它可以处理图标的复制、将 ts 转换为 js、自动注入脚本或样式文件等等。

7.1 安装 Webpack 和必要的加载器
npm install --save-dev webpack webpack-cli ts-loader html-webpack-plugin mini-css-extract-plugin css-loader postcss postcss-loader copy-webpack-plugin

  • webpack: 核心打包工具。

  • ts-loader: 为 Webpack 转换 TypeScript。

  • html-webpack-plugin: 帮助生成带有注入脚本标签的 HTML 文件。

  • CSS and PostCSS Loaders: 用于处理 CSS（我们稍后将与 Tailwind 一起使用）。

  • CopyWebpackPlugin: 确保将 manifest.json 和任何其他资产（如图标）从 src 文件夹复制到 dist 文件夹。

7.2 Webpack 配置

接下来，我们需要配置 Webpack 来打包所有内容。创建 webpack.config.js 在项目根目录下：

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = (env, argv) => {
  const isProduction = argv.mode === 'production';

  return {
    entry: {
      popup: './src/popup/popup.ts',
      background: './src/scripts/background.ts',
      contentScript: './src/scripts/contentScript.ts',
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].js',
    },
    resolve: {
      extensions: ['.ts', '.js'],
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          use: 'ts-loader',
          exclude: /node_modules/,
        },
        {
          test: /\.css$/i,
          use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
        },
      ],
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: '[name].css',
      }),
      new HtmlWebpackPlugin({
        filename: 'popup.html',
        template: 'src/popup/popup.html',
        chunks: ['popup'],
      }),
      new CopyWebpackPlugin({
        patterns: [
          { from: 'src/manifest.json', to: 'manifest.json' },
          // { from: 'src/icons', to: 'icons' },  // 复制任何其他资产
        ],
      }),
    ],
    mode: isProduction ? 'production' : 'development',
    devtool: isProduction ? false : 'inline-source-map',  // 在生产中禁用源映射
  };
};
说明：

  • Entry Points: 我们指定了 popup.ts、background.ts 和 contentScript.ts 的入口点。

  • Output: 打包文件将输出到 dist 文件夹。

  • Loaders: 使用 ts-loader 处理 TypeScript，并使用 css-loader 和 postcss-loader 处理 CSS（稍后我们将引入 Tailwind CSS）。

  • HtmlWebpackPlugin: 此插件自动将打包后的 popup.js 文件注入到 popup.html 文件中，确保我们的脚本正确链接。

7.3 使用 Webpack 打包扩展

让我们通过运行以下命令来打包所有内容：

npx webpack --mode development

这将把打包后的文件输出到 dist 目录中。

如果你在图标部分遇到问题，可以选择暂时删除它或放置一些占位的 .png 文件。

测试弹出窗口

点击按钮会弹出警报，可能会弹出两次。为什么会这样？

Webpack 可以注入脚本标签。检查一下你在 dist 文件夹中的 popup.js，你会发现 popup.js 被注入了两次（一次来自 HTML 文件本身，一次来自 Webpack）。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Popup</title>
    <script defer src="popup.js"></script>
  </head>
  <body>
    <div>
      <h1>Hello, Chrome Extension!</h1>
      <button id="alertButton">Click me</button>
    </div>
    <script src="popup.js"></script>
  </body>
</html>

要解决这个问题，只需删除 src/popup 文件夹中的 <script> 标签，确保它看起来像这样：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Popup</title>
  </head>
  <body>
    <div>
      <h1>Hello, Chrome Extension!</h1>
      <button id="alertButton">Click me</button>
    </div>
  </body>
</html>

不用担心，Webpack 仍会在内部添加它。

8 添加 Tailwind 进行样式设计

Tailwind CSS 是一个以实用优先的 CSS 框架，让你可以在不为每个组件编写自定义 CSS 的情况下为用户界面进行样式设计。

多年来，人们对它越来越喜欢。虽然自己添加一些基本样式会更简单，但当你知道会在这个项目上花费时间时，Tailwind 使得后期扩展更容易，并能保持一致性，以便其他人加入时使用（相同的类名总是意味着相同的样式，而如果是自己实现的，font-size-small 可能会有多种含义）。

8.1 安装 Tailwind
npm install tailwindcss postcss postcss-loader autoprefixer
8.2 配置 Tailwind 和 PostCSS

接下来，我们需要初始化 Tailwind 和配置 PostCSS。通过以下命令初始化 Tailwind：

npx tailwindcss init

这将在项目根目录创建一个 tailwind.config.js 文件。打开该文件并修改，以包含 Tailwind 应该应用样式的路径（在我们的案例中，位于 src 文件夹内）：

module.exports = {
  content: ['./src/**/*.{ts,tsx,html}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

content 键告诉 Tailwind 在你的文件中查找类。

接下来，在根目录中创建 postcss.config.js 文件，并配置它以使用 Tailwind 和 Autoprefixer：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};
8.3 创建 Tailwind CSS 入口文件

在 src/styles 中创建一个名为 tailwind.css 的新文件。我们将在这里导入基本的 Tailwind 样式：

@tailwind base;
@tailwind components;
@tailwind utilities;

此文件将包括所有的 Tailwind 实用类。

8.4 修改 Webpack 配置以处理 CSS

我们需要确保 Webpack 知道如何使用 PostCSS 处理 CSS 文件。我们之前已经安装了 postcss-loader 和 css-loader，现在只需确保它们正确配置。

将以下配置更改为：

{
  test: /\.css$/i,
  use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
}

这样可以确保 Webpack 在我们在弹出窗口中包含 Tailwind CSS 时进行处理。接下来，我们将继续实现这个功能。

8.5 在弹出窗口中导入 Tailwind

要开始使用 Tailwind，我们需要在 popup.ts 文件顶部添加以下导入语句：

import '../styles/tailwind.css';
8.6 添加简单的 Tailwind 样式

更新 popup.html 文件，使用一些 Tailwind 类进行基本样式设置。这样，我们的 popup.html 应该看起来像这样：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Popup</title>
  </head>
  <body class="bg-gray-100 p-4 w-80">
    <div class="flex flex-col items-center">
      <h1 class="text-xl font-bold mb-4">Hello, Chrome Extension!</h1>
      <button id="alertButton" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        Click me
      </button>
    </div>
    <script src="popup.js"></script>
  </body>
</html>

这为弹出窗口添加了背景色、居中内容和样式化的按钮。运行 npx webpack --mode development 重新构建它，看看效果。

9 为弹出窗口添加 React

现在我们有了一个功能性的扩展，包含 Tailwind 样式和 TypeScript 的语法优点。为了应对更复杂的 UI，比如加载和卸载数据、处理选项卡等，我们将添加 React。

9.1 安装 React 和 ReactDOM
npm install react react-dom @types/react @types/react-dom
9.2 更新 Webpack 以支持 React

我们需要更新 Webpack，以便它可以处理 .tsx 文件（使用 TypeScript 的 React）。记住，这正是我们设定的主要目标。 为此，请修改 webpack.config.js 文件，将 React 添加为入口点：

entry: {
    popup: './src/popup/popup.tsx',  // 更新为指向新的 React 组件
    ...
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],  // 添加 .tsx 以解析 React 文件
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,  // 同时处理 .ts 和 .tsx 文件
        ...
9.3 将 popup.ts 转换为 React 组件

现在我们将把 popup.ts 转换为一个 React 组件。将 popup.ts 重命名为 popup.tsx，并更新为一个基本的 React 组件：

import React from 'react';
import { createRoot } from 'react-dom/client';
import '../styles/tailwind.css';

const Popup = () => {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return (
    <div className="flex flex-col items-center bg-gray-100 p-4">
      <h1 className="text-xl font-bold mb-4">Hello, React Chrome Extension!</h1>
      <button
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
        onClick={handleClick}
      >
        Click me
      </button>
    </div>
  );
};

const container = document.getElementById('root');
const root = createRoot(container as HTMLDivElement);
root.render(<Popup />);

这个简单的 React 组件实现了原始 popup.ts 的功能，但使用了 React 的 onClick 事件来处理按钮点击。

9.4 更新 popup.html

我们不需要对 popup.html 进行太多更改，只需确保它有合适的 div 来挂载我们的 React 组件。以下是更新后的 popup.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Popup</title>
  </head>
  <body class="bg-gray-100 w-80">
    <div id="root"></div>
  </body>
</html>
9.5 更新 tsconfig.json

我们需要在 tsconfig.json 中添加 "jsx": "react" 和 "moduleResolution": "node"。文件应如下所示：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "es2015"],
    "module": "esnext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "jsx": "react",
    "moduleResolution": "node"
  },
  "include": ["src/**/*"]
}

通过这些步骤，我们为弹出窗口成功添加了 React！

9.6 使用 Webpack 重新构建

完成更改后，运行 Webpack 来重新构建扩展：

npx webpack --mode development

现在，当你在 Chrome 中重新加载扩展并打开弹出窗口时，你应该会看到一个由 React 驱动、使用 Tailwind CSS 样式的用户界面。

结论 为什么不使用 Create-React-App？

Create-React-App 对如何构建应用做出了很多假设，将所有内容打包成一个单页应用并动态注入 JS。这种方式非常适合 React 网络应用，但不太适合 Chrome 扩展， 因为Chrome 扩展使用单独的 HTML 页面来处理弹出窗口、后台脚本，有时甚至还有选项页面。

不使用 Create-React-App 的最佳部分是什么？ 控制和学习。

你可以决定包含哪些内容，打包的方式，以及你的扩展是如何精简还是丰富的。 我还认为，尝试在没有库、框架或引导工具的情况下看看有多困难是个好主意。这有助于更深入地了解所有间接使用的、隐藏在你面前的技术。 如果你看到这里，我感谢你，并希望这些内容对你有用！

- END -

如果您关注前端+AI 相关领域可以扫码进群交流

 2d8e95a846445ed19bcd4709e33aa57f.jpeg

添加小编微信进群😊

关于奇舞团

奇舞团是 360 集团最大的大前端团队，非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

d3266d4f7fa8fb4c9099fd5288c3895d.png

奇舞周刊
关注
React TypeScript Node 全栈开发（三）
龙哥盟
07-22 596
原文：zh.annas-archive.org/md5/F7C7A095AD12AA62E0C9F5A1E1F6F281 译者：飞龙 协议：CC BY-NC-SA 4.0 第七章：学习 Redux 和 React Router 在本章中，我们将学习 Redux 和 React Router。Redux 仍然是管理 React 应用程序中共享的全局状态的最常见方法。使用 Redux 全局状态，我们可以减少大量样板代码并简化应用程序。React Router 也是管理客户端 URL 路由的最流行框架。客户端
React全家桶
weixin_45210011的博客
08-08 5566
尚硅谷React全家桶教学视频笔记
React
weixin_44999716的博客
06-13 1157
前端开发框架React知识点总结
【尚硅谷React】——React全家桶笔记
热门推荐
qq_44870156的博客
02-28 1万+
尚硅谷天禹老师的react全家桶课程
React前端面试题
m0_62313902的博客
05-11 1626
总的来说，React中的setState方法是用于更新组件状态的方法，它可以接收一个对象或一个函数作为参数，用于更新组件的状态。具体的实现就是在客户端创建一个script标签，然后把请求后端的接口拼接一个回调函数名称作为参数传给后端，并且赋值给script标签的src属性，然后把script标签添加到body中，当后端接收到客户端的请求时，会解析得到回调函数名称，然后把数据和回调函数名称拼接成函数调用的形式返回，客户端解析后会调用定义好的回调函数，然后在回调函数中就可以获取到后端返回的数据了。
React简介--尚硅谷react全家桶笔记总结
03-18 4170
学习使我快乐 ???? React简介 官网 英文官网: https://reactjs.org/ 中文官网: https://react.docschina.org/ 介绍描述 用于动态构建用户界面的 JavaScript 库(只关注于视图) 由Facebook开源 React的特点 声明式编码 组件化编码 React Native 编写原生应用 高效（优秀的Diffing算法） React高效的原因 使用虚拟(virtual)DOM, 不总是直接操作页面真
【React】React知识点总结0323
SZnAl的博客
03-07 1355
React react的起源和与发展 react起源于Facebook的内部项目 react与传统MVC的关系 react不是一个MVC框架，可以认为是一个MVC中的V层。react并不认可MVC这种开发模式，react构建用户界面可以简单地理解为他就是一个组件化的框架来完成页面。
React相关知识点
m0_56752010的博客
10-26 616
一、什么是 React? - 官方解释：用于构建用户界面的 JavaScript 库。是一个将数据渲染为 HTML 视图的开源 JavaScript 库。 - 1.发送请求获取数据 - 2.处理数据（过滤、整理格式等） - 3.操作 DOM 呈现页面 二、为什么要学？ - 原生 JavaScript 操作 DOM 繁琐，效率低；（DOM-API 操作UI） - 使用 JavaScript 直接操作 DOM ,浏览器会进行大量的重绘重排； - 原生 JavaScript 没有组件化编码方案，代码复用率低； 三
react_T_v18
Pwsifeng的博客
06-16 1660
初学者
React笔记 && Taro笔记
journeyIT的博客
04-07 1164
React基础 1 组件通讯 1.1 props 子组件 import React from "react"; import PropTypes from "prop-types"; import { Button } from "antd"; export default class EightteenChildOne extends React.Component { static p...
Linux重定向
2401_83427936的博客
09-23 1144
将ls的输出写入output.txt，覆盖文件内容：bash将ls的输出追加到output.txt文件末尾：bash将错误输出到error.log，而标准输出保持在终端：bash丢弃命令的所有输出：bashLinux 重定向是管理输入输出的强大工具。通过标准输入、标准输出和标准错误的重定向，结合管道，可以方便地控制命令的 I/O 流，灵活处理输出结果或错误信息。bash解释：首先使用exec 3>创建文件描述符 3 并将其重定向到文件。然后，使用>&3将echo。
python自动更新chromedriver
最新发布
u010799534的博客
09-26 142
2、当脚本运行前先去检测当前的chromedriver与浏览器是否匹配，不匹配，就下载，然后将下载的chromedriver放置到指定位置。python自动化过程中，经常遇到脚本跑着跑着，就报错，一看，浏览器自动升级了。以后每次执行脚本前，执行改文件即可，已经在mac和windows环境下验证过。1、禁止浏览器自动升级。
如何在Chrome最新浏览器中调用ActiveX控件？
猿大师办公助手官方博客
09-22 386
由于第一个方案，本质上还是在Chrome浏览器中内嵌IE网页，肯定不如在猿大师中间件基础上开发单独的程序效果体验更好，目前猿大师根据用户需求，已经成功把微软Office、金山WPS、AutoCAD、VLC播放器等内嵌到网页中运行，并形成了多个成熟的产品，广泛应用于政府、交通、园区等，另外猿大师可以接受定制开发服务，可以将本地OCX控件或者ActiveX控件二次开发成内嵌网页程序运行到Chrome等高版本浏览器中。用猿大师IE内嵌网页程序打开的效果显示。）并联系在线客服获取免费体验授权。
深入理解 JSX：构建 React 用户界面的利器
百赢出品，必属精品
09-26 218
是一种语法扩展，主要用于 React 开发中。它允许开发者在 JavaScript 代码中直接书写类似 HTML 的结构，使得构建用户界面变得更加直观和简洁。虽然 JSX 看起来像 HTML，但它实际上是 JavaScript 语法的一个扩展。定义：JSX（JavaScript XML）是 React 中的语法扩展，允许在 JavaScript 代码中编写类似 HTML 的结构。基本语法表达式：可以嵌入 JavaScript 表达式，使用{}包裹。标签：支持 HTML 标签和自定义组件。属性。
react通过下拉框选择多个，并展示在下方的方式
qq18346342939的博客
09-26 75
二、form及选择展示。
Vue3 之ref与reactive的区别
样子的博客
09-21 334
在Vue 3中，reactive和ref都用于创建响应式的数据，但它们有一些关键的区别： reactive用于创建响应式的对象，该对象的属性是深度响应式的。 ref用于创建响应式的基本类型数据，比如字符串、数字、布尔值等，它是reactive的简化版本，只提供了基本的响应式能力。 一、ref与reactive的区别 <template> <view class=""&...
【React】组件通信
在热爱技术的路上一直前行。
09-25 511
【代码】【React】组件通信。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值