【亲测免费】 Highlighter Chrome 扩展下载及安装教程

1、项目介绍

Highlighter 是一个简单的 Chrome 扩展，允许用户通过右键点击（或使用快捷键 Ctrl+Shift+H）在网页上高亮文本，并保存所有高亮内容，以便在网页重新打开时重新高亮显示。该扩展可以在 Chrome 网上应用店下载使用。

2、项目下载位置

你可以通过以下链接下载 Highlighter 项目的源代码：

Highlighter GitHub 仓库

3、项目安装环境配置

在安装 Highlighter 扩展之前，你需要确保你的开发环境已经配置好以下工具：

• Node.js: 用于运行 JavaScript 环境。
• gh CLI: GitHub 命令行工具，用于管理 GitHub 仓库。

3.1 Node.js 安装

首先，你需要安装 Node.js。你可以从 Node.js 官方网站 下载并安装适合你操作系统的版本。

3.2 gh CLI 安装

接下来，安装 GitHub 命令行工具 gh。你可以通过以下命令安装：

# 在 macOS 上使用 Homebrew 安装
brew install gh

# 在 Linux 上使用包管理器安装
sudo apt install gh

# 在 Windows 上使用 Chocolatey 安装
choco install gh

4、项目安装方式

4.1 克隆项目

首先，克隆 Highlighter 项目的仓库到你的本地机器：

git clone https://github.com/jeromepl/highlighter.git
cd highlighter

4.2 安装依赖

进入项目目录后，运行以下命令安装项目依赖：

npm install

4.3 配置 Google Analytics

你需要配置 Google Analytics 账户 ID 以便在开发和生产环境中使用。复制示例配置文件并替换为你的 Google Analytics ID：

cp config/secrets.sample.js config/secrets.js
# 替换 secrets.js 中的 "GA_TRACKING_ID" 为你的测试账户 ID

cp config/secrets.sample.js config/secrets.production.js
# 替换 secrets.production.js 中的 "GA_TRACKING_ID" 为你的生产账户 ID

5、项目处理脚本

5.1 运行 ESLint

你可以使用以下命令运行 ESLint 进行代码检查：

npm run lint

5.2 发布新版本

要发布新版本，你需要更新 manifest.json 和 package.json 中的版本号，创建一个新的提交，并推送到 GitHub。然后，使用 gh CLI 工具创建一个草稿发布：

npm run release

5.3 构建扩展包

最后，运行以下命令构建扩展包，以便上传到 Chrome 网上应用店：

npm run build

通过以上步骤，你已经成功下载并安装了 Highlighter Chrome 扩展，并配置好了开发环境。现在你可以开始使用这个扩展来高亮网页上的文本了！