# chrome-extension

**Repository Path**: Krpgly/chrome-extension

## Basic Information

- **Project Name**: chrome-extension
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-22
- **Last Updated**: 2026-01-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 Chrome Extension

基于 Vue3 和 Vite 构建的现代化 Chrome 浏览器插件。

## 功能特性

- 🎯 **链接高亮**: 一键高亮页面所有链接
- 📊 **页面信息**: 显示当前页面标题和URL
- ⚙️ **自动模式**: 支持自动高亮新加载的页面
- 🎨 **现代UI**: 基于Vue3构建的美观界面
- 🔧 **右键菜单**: 便捷的右键菜单操作

## 技术栈

- **Vue 3**: 现代化的前端框架
- **Vite**: 快速的构建工具
- **Chrome Extension Manifest V3**: 最新的插件规范
- **Chrome APIs**: 标签页、存储、消息传递等API

## 开发环境设置

### 1. 安装依赖

```bash
npm install
```

### 2. 开发模式

```bash
npm run dev
```

### 3. 构建生产版本

```bash
npm run build
```

## 安装插件

### 开发模式安装

1. 运行 `npm run build` 构建项目
2. 打开 Chrome 浏览器
3. 访问 `chrome://extensions/`
4. 开启"开发者模式"
5. 点击"加载已解压的扩展程序"
6. 选择项目的 `dist` 文件夹

### 生产模式安装

1. 将构建后的 `dist` 文件夹打包为 `.zip` 文件
2. 上传到 Chrome Web Store（需要开发者账号）

## 项目结构

```
浏览器插件/
├── src/
│   ├── App.vue          # 主Vue组件
│   ├── popup.js         # 弹窗入口文件
│   ├── content.js       # 内容脚本
│   └── background.js    # 后台脚本
├── manifest.json        # 插件配置文件
├── popup.html          # 弹窗HTML
├── vite.config.js      # Vite配置
├── package.json        # 项目配置
└── README.md           # 项目说明
```

## 使用说明

### 基本操作

1. **打开插件**: 点击浏览器工具栏中的插件图标
2. **查看页面信息**: 在弹窗中查看当前页面的标题和URL
3. **手动高亮**: 点击"高亮所有链接"按钮
4. **自动高亮**: 开启"自动高亮链接"选项

### 右键菜单

- 在任意页面右键，选择"高亮页面所有链接"

### 设置选项

- **自动高亮链接**: 开启后，每次加载新页面时自动高亮所有链接

## 开发说明

### 主要文件说明

- **manifest.json**: Chrome插件的配置文件，定义权限、脚本等
- **popup.html/popup.js**: 插件弹窗界面
- **content.js**: 注入到网页中的脚本，负责DOM操作
- **background.js**: 后台服务脚本，处理插件生命周期和消息
- **App.vue**: Vue3主组件，包含插件的主要界面

### 消息传递

插件使用Chrome的消息传递API在不同脚本间通信：
- Popup ↔ Background
- Popup ↔ Content Script
- Background ↔ Content Script

### 存储

使用Chrome Storage API保存用户设置：
- `chrome.storage.sync`: 同步存储，跨设备同步
- `chrome.storage.local`: 本地存储

## 许可证

MIT License