# 谷歌插件加解密

**Repository Path**: ruirui-study/chrome-utils

## Basic Information

- **Project Name**: 谷歌插件加解密
- **Description**: 谷歌插件测试，集成项目的加解密，实验性的暗黑模式、网页编辑模式、右键菜单等
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-06-26
- **Last Updated**: 2026-09-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3

## README

# 大塔加解密插件（data-crypt-utils）

> 面向内部开发/测试人员的 Chrome 插件，基于 Vite + Vue 3 + Element Plus 构建，Manifest V3。
> 核心能力：AES 密文解密/加密、JSON 可视化解析，附带项目环境快捷入口等小工具。

## 功能特性

### 1. 加解密工作台（主功能）
- **解密**：输入 Base64 密文，配合 key / iv 进行 AES-CBC（Pkcs7）解密，支持一键去除引号、空白字符后自动解析。
- **加密**：切换为加密模式后，将明文按同样规则（AES-CBC + Pkcs7）加密为 Base64 字符串。
- **JSON 可视化**：解密/输入内容若为 JSON，自动以树状结构展示，支持复制、展开层级控制。
- **项目预设**：选择已配置的项目后自动填充对应的 key / iv，无需重复输入。
- **虚拟渲染**（可选）：数据量很大时可开启虚拟解析，提升渲染性能。

### 2. 项目密钥配置页
- 维护「项目名称 / key / iv」列表，支持新增、编辑、删除。
- 配置存储在浏览器 LocalStorage，加解密工作台直接复用。

### 3. 右键菜单
- **大塔加解密面板**：在任意网页右键，新标签页打开加解密工作台。
- **网页编辑模式**：切换当前页面的可编辑状态（`contentEditable`），可直接改页面文案，刷新后恢复。

### 4. 快捷入口（Popup 弹窗）
- 收录公司各项目（智慧管廊、大塔管廊、蒸汽管网、莱州管廊等）测试/预发布/生产环境链接，点击直达。
- 一键给当前网页应用/移除暗黑模式（CSS 反色滤镜）。

### 5. 侧边栏（Side Panel）
- 演示面板，支持查看本机 CPU 信息。

## 安装与开发

### 环境要求
- Node.js >= **14.18**

### 本地开发

```shell
# 1. 安装依赖
$ npm install

# 2. 启动开发构建（watch 模式）
$ npm run dev
```

然后在 Chrome 中加载插件：

1. 打开 `chrome://extensions`，开启右上角 **开发者模式**
2. 点击 **加载已解压的扩展程序**，选择本项目的 `build` 目录

> 开发模式下插件名称会带 `➡️ Dev` 后缀，便于区分。

### 纯前端页面调试（不依赖插件环境）

1. 访问 `http://localhost:3000/`
2. 调试弹窗页：`http://localhost:3000/popup.html`
3. 调试配置页：`http://localhost:3000/settings.html`
4. 调试加解密页：`http://localhost:3000/crypt.html`

## 加解密使用步骤

1. **配置密钥**：打开配置页（settings.html），新增项目并填写名称、key、iv（16 位字符串，由项目后端提供）。
2. **打开工作台**：在任意网页右键选择「大塔加解密面板」，或从配置页的提示弹窗进入。
3. **选择项目**：下拉选择项目后自动填充 key / iv，也可手动输入。
4. **解密**：左侧粘贴 Base64 密文（或直接粘贴 JSON 对象），点击「解密」查看右侧解析结果。
5. **加密**：在设置抽屉中将「当前模式」切换为「加密」，左侧输入明文后点击「加密」，右侧输出 Base64 密文。

## 设置项说明

点击工作台的「设置」按钮打开配置抽屉：

| 设置项 | 说明 |
| --- | --- |
| 默认加解密项目 | 每次打开工作台自动选中的项目 |
| 点击输入框自动清除 | 左侧输入框获得焦点时自动清空旧内容 |
| 输入后自动加解密 | 输入内容变化后无需点按钮，自动执行加解密 |
| 默认展开层级 | JSON 树状结构默认展开的层数（1~8 级） |
| 当前模式 | 解密 / 加密 模式切换 |
| 虚拟解析 | 大数据量时开启，提升 JSON 渲染性能 |

## 打包

```shell
# 构建产物输出到 build 目录，可直接发布到 Chrome Web Store
$ npm run build

# 构建 + 生成 zip 包（便于上传商店）
$ npm run zip
```

## 注意事项

- **密钥安全**：key / iv 为 16 位字符串（AES-128），请勿将真实密钥提交到公共仓库或外传。
- **配置仅存本地**：项目密钥等配置保存在当前浏览器的 LocalStorage 中，更换浏览器、更换电脑或清除浏览器数据后需要重新配置。
- **密文格式**：仅支持 Base64 密文；输入会自动去除首尾引号和空白字符。
- **加密行为**：加密模式会先移除输入内容中的换行、空格和反斜杠，再进行加密。
- **权限说明**：插件申请了 `contextMenus`（右键菜单）、`scripting`（页面编辑/暗黑模式注入）、`storage`（状态记忆）、`sidePanel`（侧边栏）、`system.cpu`（CPU 信息）等权限，仅用于上述功能。
- **网页编辑模式**：仅修改前端展示，不会真正改动页面数据，刷新即恢复。
- **暗黑模式**：基于 CSS 滤镜反色实现，个别页面可能出现显示异常，再次点击即可还原。

## 技术栈

- Vue 3 + Vite（@crxjs/vite-plugin）
- Element Plus + element-plus icons
- crypto-js（AES 加解密）
- vue-json-viewer / vue-json-pretty（JSON 可视化）

---

Generated by [create-chrome-ext](https://github.com/guocaoyi/create-chrome-ext)