# chrome_extensions_basic_skeleton

**Repository Path**: his0769/chrome_extensions_basic_skeleton

## Basic Information

- **Project Name**: chrome_extensions_basic_skeleton
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-04
- **Last Updated**: 2025-08-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Chrome, Chrome-extension

## README

# Juejin Article Title Reader

这是一个Chrome扩展程序，用于读取掘金（juejin.cn）首页的文章标题。

## 功能

- 自动读取掘金首页的文章标题
- 在浏览器控制台中显示所有文章标题
- 通过Popup页面直观展示文章标题

## 安装步骤

1. 打开Chrome浏览器
2. 进入 `chrome://extensions/`
3. 开启右上角的 "开发者模式"
4. 点击 "加载已解压的扩展程序"
5. 选择本项目文件夹

## 使用方法

### 方法一：通过控制台查看

1. 安装扩展程序后，访问 [掘金首页](https://juejin.cn)
2. 打开浏览器开发者工具（F12）
3. 切换到控制台（Console）标签
4. 等待约2秒后，查看输出的文章标题列表

### 方法二：通过Popup页面查看

1. 安装扩展程序后，访问 [掘金首页](https://juejin.cn)
2. 点击浏览器工具栏中的扩展程序图标
3. 在弹出的窗口中查看文章标题列表

## 工作原理

扩展程序使用内容脚本（Content Script）在掘金页面加载完成后执行，通过以下选择器获取文章标题：

```js
document.querySelectorAll('div[class="entry-list list"] li[class="item"] a[class="jj-link title"]')
```

然后将提取的标题打印到浏览器控制台。

为了确保能够正确读取到文章标题，内容脚本采用以下策略：

1. 等待页面完全加载完成
2. 延时2秒后执行标题提取，确保所有动态内容加载完成

Popup页面会优先从Chrome的storage中读取已保存的文章标题。如果storage中没有数据，Popup页面才会通过Chrome的消息传递机制与内容脚本通信，向内容脚本发送请求获取最新的文章标题。

扩展程序使用background script来处理数据存储。当内容脚本采集到文章标题后，会通过Chrome的消息传递机制将标题发送给background script，background script再将标题保存到Chrome的storage中。

## 开发Popup页面

Popup页面使用Vue 3和Vite构建。要开发或修改Popup页面，请按照以下步骤操作：

1. 确保已安装pnpm包管理工具
2. 在项目根目录运行`pnpm install`安装依赖
3. 进入popup目录：`cd popup`
4. 运行开发服务器：`pnpm dev`
5. 在浏览器中打开 http://localhost:5173 查看Popup页面
6. 注意：由于浏览器安全限制，Popup页面在开发服务器中无法与content script通信，要测试完整功能需要在Chrome扩展环境中
7. 修改src/App.vue文件来更新Popup页面的UI和功能
8. 构建生产版本：`pnpm build`
9. 构建后的文件将位于dist/popup目录中，Chrome扩展会自动使用这些文件

## 开发Content Script

Content Script现在也使用Vue 3和Vite构建。要开发或修改Content Script，请按照以下步骤操作：

1. 确保已安装pnpm包管理工具
2. 在项目根目录运行`pnpm install`安装依赖
3. 进入content目录：`cd content`
4. 运行开发服务器：`pnpm dev`
5. 在浏览器中打开 http://localhost:5173 查看Content Script的UI
6. 注意：Content Script在开发服务器中无法直接与页面交互，要测试完整功能需要在Chrome扩展环境中
7. 修改src/App.vue文件来更新Content Script的UI和功能
8. 构建生产版本：`pnpm build`
9. 构建后的文件将位于dist/content目录中，Chrome扩展会自动使用这些文件

10. 为了确保content script在所有网页中都能正确显示，我们在`main.js`中动态创建了一个div元素并将其添加到页面body中，然后将Vue应用挂载到这个元素上。这样可以确保按钮能够正确显示在页面上。

### Background Script

Background Script负责处理数据存储功能。当内容脚本采集到文章标题后，会通过Chrome的消息传递机制将标题发送给background script，background script再将标题保存到Chrome的storage中。

要开发或修改Background Script，请按照以下步骤操作：

1. 修改background.js文件来更新Background Script的功能
2. 重新加载扩展程序使修改生效

### 按钮样式

Content Script中的按钮采用了悬浮设计，使用绝对定位放置在页面左上角，确保在任何页面都能看到并点击。按钮具有以下样式特性：

- 悬浮在所有页面元素之上（z-index: 99999）
- 固定位置：距离左侧40px，距离顶部60px
- 具有阴影效果和圆角设计，提升视觉效果
- 点击后会显示采集到的标题列表

## 调试扩展程序

如果遇到读取内容为空的情况，请按以下步骤调试：

1. 确保已正确安装扩展程序
2. 访问掘金首页时，检查控制台是否有任何输出
3. 等待约2秒后，查看是否有标题信息输出
4. 如果仍然没有输出，检查掘金网站的结构是否发生了变化，可能需要更新选择器

如果问题仍然存在，可以在GitHub上提交issue或联系开发者。