NPM包Webstore-Upload的使用教程

随着现代 Web 应用程序不断壮大，使用自动化工具进行构建和部署的需求也越来越重要。其中，npm 是 JavaScript 包管理器，可以大大简化前端开发过程中依赖管理的复杂度。而 Webstore-Upload 是一个 npm 包，它提供了一种简单的方式来上传你的 Google Chrome 浏览器扩展程序至 Chrome 网上应用店。

接下来，我们将介绍 Webstore-Upload 的使用方法，并提供示例代码和深入学习的参考资料。

安装

通过 npm 来安装 Webstore-Upload：

npm install --save-dev webstore-upload

使用

配置

在使用 Webstore-Upload 之前，需配置一些参数。可以通过创建一个具有必需参数的 JSON 文件来定义这些参数：

{
  "extensionId": "abcdefghijklmnop",
  "clientId": "123456789012-abcdefghijklmn.apps.googleusercontent.com",
  "clientSecret": "abcdefghijklmnopqrstuvwxyz",
  "refreshToken": "abcdefghijklmnopqrstuvwxyz",
  "autoPublish": true,
  "source": "dist.zip"
}

• extensionId：需要上传新版本的扩展程序的 ID（应用程序识别号）
• clientId：Google 开发者控制台中创建的 OAuth 2.0 客户端 ID
• clientSecret：生成的 OAuth 2.0 客户端密钥
• refreshToken：与已授权账号关联的 OAuth 2.0 刷新令牌
• autoPublish：布尔值，控制上传后是否自动发布应用程序
• source：扩展程序的 zip 文件路径

执行上传

完成配置后，上传操作就非常简单。只需执行以下命令即可运行上传：

webstore-upload upload

上传成功后，你的扩展程序就会被添加到 Chrome 网上应用店中。

其他命令

Webstore-Upload 还提供其他命令，以用于实现其他功能：

• --config：指定配置文件位置
• --skip：跳过指定步骤
• --target：上传的目标 Chrome Web Store 账户

完整的 Webstore-Upload 命令列表，请查看项目的 GitHub 页面。

如何创建 Webstore-Upload 配置文件

关于如何获取并生成 Google Web Store 扩展的配置文件，将在下面进行详细讨论。

创建 OAuth 客户端 ID/密码

首先，你需要去 Google Cloud Console 平台上创建一个 OAuth 客户端 ID 以及与之对应的客户机密密钥。操作步骤如下：

1. 打开 Google Cloud Console 平台；
2. 创建或选择一个新项目；
3. 进入 APIs & Services -> Credentials 页面；
4. 点击 Create credentials 下拉菜单；
5. 选择 OAuth client ID；
6. 根据需要设置 OAuth 2.0 客户端 ID 的名字，类型和重定向 URI；
7. 单击 Create 按钮；
8. 记录 OAuth 2.0 客户端 ID 和创建的秘密密钥，并将其保存到你的 Webstore-Upload 配置文件中。

获取授权码

在生成 OAuth 客户端 ID/密码之后，你需要获取 OAuth 2.0 授权代码，并使用它来生成访问令牌和刷新令牌。操作步骤如下：

1. 打开以下 URL：

   https://accounts.google.com/o/oauth2/auth?response_type=code&client_id=<CLIENT_ID>&redirect_uri=https%3A%2F%2Flocalhost%3A8080%2F&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fchromewebstore&access_type=offline

替换 <CLIENT_ID> 为你在前述步骤中创建的 OAuth 2.0 客户端 ID；

1. 登录 Google 账户；
2. 点击 Allow 按钮；
3. 浏览器将重定向到 https://localhost:8080/?code=AUTHORIZATION_CODE；
4. 记录 AUTHORIZATION_CODE 后面的代码，以备后用。

获取令牌

最后，你可以使用上一步获取的授权码来提取刷新令牌和访问令牌。可以使用以下步骤来生成并记录刷新令牌和访问令牌：

1. 打开 Terminal（终端），在命令行中执行以下命令，替换 <client_id>，<client_secret>和 <refresh_token>：

   curl "https://accounts.google.com/o/oauth2/token" -d "client_id=<CLIENT_ID>&client_secret=<CLIENT_SECRET>&code=<AUTHORIZATION_CODE>&grant_type=authorization_code&redirect_uri=https://localhost:8080/"

2. 运行上述命令后，将显示 JSON 格式的响应。从响应中提取 access_token 和 refresh_token 值，并将它们添加到 Webstore-Upload 配置文件中。

通过以上步骤，你就能完成 Webstore-Upload 的配置，可以使用 webstore-upload 命令快速上传 Chrome 扩展程序。

示例代码

以下是一个示例的 Webstore-Upload 配置文件：

{
  "extensionId": <EXTENSION_ID>,
  "clientId": "<CLIENT_ID>",
  "clientSecret": "<CLIENT_SECRET>",
  "refreshToken": "<REFRESH_TOKEN>",
  "autoPublish": true,
  "source": "dist.zip"
}

学习资料

• Webstore-Upload GitHub 项目
• npm 文档
• Google Developers Console
• Google Chrome Developer Dashboard
• OAuth 2.0
• Google API 授权流程
• Google Chrome 扩展程序开发文档

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671078dd3466f61ffde74