使用 Typescript 构建一个 Web3 Chrome 扩展插件

通过本篇文章，您将会了解到构建一个简单的web3 chrome 扩展程序的步骤，该扩展程序的主要功能是获取给定钱包地址的 ETH 余额。

在本文章中，您将了解到以下内容：

• 设置 Webpack 开发环境。
• Typescript 的一些核心概念。
• 进行 Web3 调用。
• 创建 Chrome 扩展程序并了解 Manifest。

在我们开始之前，请确保您的计算机上安装了Nodejs和NPM。

我们从初始化项目和创建package.json文件开始

mkdir ts-web3-extension && cd ts-web3-extension && npm init -y

Typescript：

Typescript 是由Microsoft开发和维护的一种强类型语言。它是建立在它之上的Javascript超集。
与动态类型的 Javascript 不同，Typescript 提供可选的静态类型和额外功能，可帮助您识别常见错误并编写更简洁的代码。

您可以将 Typescript 安装到您的项目中或在您的计算机上全局安装。

npm i typescript --save-dev

Webpack：

Webpack 是Javascript 应用程序的模块捆绑器，它有助于捆绑和优化我们在应用程序中拥有的不同文件，使代码更短并可在浏览器上使用。

要开始使用 Webpack 构建我们的开发设置，我们需要安装一些依赖项：

npm i webpack webpack-cli html-webpack-plugin clean-webpack-plugin --save-dev

默认情况下，webpack 只能编译和打包Javascript 文件，所以我们需要使用一个加载器来处理 Typescript 文件。

将下面的命令复制到您的终端以安装 ts-loader

npm i ts-loader --save-dev

现在我们已经安装了所有需要的依赖项，让我们开始构建我们的环境。

我们在根目录下创建tsconfig.ts文件

touch tsconfig.ts

tsconfig.json表示这是TypeScript 项目的根。
让我们暂时将文件留空，或者只添加{}让我们使用编译器默认值的文件。

接下来，我们创建webpack.config.js

touch webpack.config.js

现在，将下面的代码复制到其中

const HTMLWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path&#