Chrome 扩展开发

Chrome 扩展开发：设置开发环境（一）-安装配置

Moran 的茶馆

2024年2月20日 • 7 min read

在开始 Chrome 扩展的开发之前，正确设置开发环境是非常重要的一步。这将确保你拥有开发、测试和调试扩展所需的所有工具。下面是设置开发环境的具体步骤：

环境及资源

操作系统：Windows 11
Node.js 官网：https://nodejs.org/en

安装 Node.js 和 yarn

安装 Node.js：

访问 Node.js 官网，下载并安装适合你操作系统的最新稳定版本。Node.js 的安装包通常会包括 npm（Node.js 的包管理器），这是安装 JavaScript 库和工具的必需组件。通常选择 LTS 版本下载，这是长期支持的稳定版本。

安装完成后，打开终端工具（不了解的阅读《目录及全局说明》章节），输入 node -v 和 npm -v 来验证 Node.js 和 npm 是否已正确安装。你应该能看到安装的 Node.js 和 npm 的版本号。

安装 yarn：

通过 npm 安装 yarn。在终端中输入以下命令：npm install -g yarn。这会全局安装 yarn 包管理器。
安装完成后，输入 yarn -v 来验证 yarn 是否已正确安装。你应该能看到安装的 yarn 版本号。

对于全局和项目安装的区别，可以看这篇文章：

初始化项目

创建项目目录：在你的计算机上选择一个合适的位置，创建一个新的文件夹用作项目目录，例如 SimpleBookmark。
初始化项目：打开终端，切换到你的项目目录下。使用 yarn init -y 命令初始化一个新的 Node.js 项目。这个命令会创建一个 package.json 文件，其中包含了项目的基本信息和依赖。

这里在 yarn init 后面带 -y 参数的意思是直接初始化，如果不带 -y 参数，可以自定义一些配置，为了方便照着做就行。

C:\Users\wqmor>d:
D:\>cd D:\WorkSpace\SimpleBookmark
D:\WorkSpace\SimpleBookmark>yarn init -y

# Out
yarn init v1.22.21
warning The yes flag has been set. This will automatically answer yes to all questions, which may have security implications.
success Saved package.json
Done in 0.03s.

初始化后的目录结构如下：

.
└── package.json

配置 TypeScript

其实刚开始的时候我是打算使用原生 js 开发的，看到 Chrome 官方文档最后提及了 TypeScript，毅然选择了 TypeScript，既然官方都提供了开发包，说明这是主流操作，当然学习曲线会比较陡峭，咱们一步一步来。

安装 TypeScript：在项目目录中，通过运行命令 yarn add typescript --dev 来安装 TypeScript 作为开发依赖。

D:\WorkSpace\SimpleBookmark>yarn add typescript --dev

# Out
yarn add v1.22.21
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ typescript@5.3.3
info All dependencies
└─ typescript@5.3.3
Done in 1.35s.

初始化 TypeScript 配置：运行命令 npx tsc --init 来生成一个 tsconfig.json 文件。这个文件包含了 TypeScript 编译器的配置选项。

D:\WorkSpace\SimpleBookmark>npx tsc --init

# Out
Created a new tsconfig.json with:
                                                                                                         TS
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true


You can learn more at https://aka.ms/tsconfig

配置完成的目录结构如下：

.
├── package.json
├── tsconfig.json
└── yarn.lock

还有一个 node_modules 文件夹，这里面是所有项目依赖的包，文件非常多，后面的目录结构中会省略这个文件夹。

yarn.lock 是 Yarn 自动生成的文件，用于锁定安装的依赖包的版本，确保项目依赖在所有环境中的一致性。

配置 Tailwind CSS

使用 Tailwind CSS 的目的是为了避免去写 css 样式代码，那个在教程里面呈现起来也不方便，实际开发的时候大家会体会到 Tailwind CSS 的便利之处的，这里按照教程走就行。

当然，如果觉得麻烦，也可以忽略所有和 Tailwind CSS 相关的内容，直接写 css 也可以，不影响整个过程，毕竟这个教程的目的不是教大家如何写前端页面。

安装 Tailwind CSS：

使用命令 yarn add tailwindcss 安装 Tailwind CSS 作为生产依赖。

D:\WorkSpace\SimpleBookmark>yarn add tailwindcss

# Out
yarn add v1.22.21
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 91 new dependencies.
......
Done in 13.43s.

运行 npx tailwindcss init 来生成一个 tailwind.config.js 文件，这里面包含了 Tailwind 的配置。

D:\WorkSpace\SimpleBookmark>npx tailwindcss init

# Out
Created Tailwind CSS config file: tailwind.config.js

这里说一下 npx 命令，npx 命令的使用很广泛，在这里可以直接理解为我们的 tailwindcss 不是执行的全局安装，因此不能直接使用 tailwindcss init 命令初始化，所以通过 npx 命令来执行包命令。

设置 Tailwind CSS：在项目目录下创建一个 src 目录，src 中创建一个 CSS 文件，例如 tailwind.css。

tailwind.css 的内容如下：

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

创建完成后的目录结构如下：

.
├── package.json
├── src
│   └── tailwind.css
├── tailwind.config.js
├── tsconfig.json
└── yarn.lock

这里特意说明一下，对于 Tailwind CSS 不了解的读者到这里会很迷糊，千万千万不要觉得很复杂，这就是一个基础配置，没有什么高深的东西在里面。

@tailwind base：引入基础样式，通常包含重置默认样式、设置全局样式等，需要首次加载
@tailwind components：引入组件样式，包括按钮、表单等常用组件，在基础样式之后加载
@tailwind utilities：引入实用工具类样式，比如元素的颜色、边距、宽高等，在组件样式之后加载，便于需要的时候覆盖组件样式

感兴趣的可以去阅读一下 Tailwind CSS 的官方文档，在这里就单纯的理解 css 中的命令就是确定我们要用 Tailwind CSS 的哪些功能即可。