# workspace-chorme-extension-web-page

**Repository Path**: wei_wen_yue/workspace-chorme-extension-web-page

## Basic Information

- **Project Name**: workspace-chorme-extension-web-page
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-13
- **Last Updated**: 2022-03-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<a name="sAMuH"></a>

## Table of contents

- [Overview](#overview)
  - 项目简介
    - 项目介绍
    - 模块介绍
      - 用户故事：
    - 功能模块划分
  - 截图
  - 链接
  - 使用详情
- [My process](#my-process)
  - 所使用的技术
  - 我学会了什么
  - 后续的开发
  - 有用的资源

<a name="rgEqX"></a>

# 项目简介

<a name="MvStr"></a>

## 项目介绍

小丽是一个热爱前端的在读生，平常喜欢捣鼓一些一些小产品进行前端的实践。她同时也是一个勤勤恳恳的打工人，要完成导师布置的各项任务，所以当导师又在催她要任务成果的时候，她只能默默暂停开发小产品的进程，关闭桌面上因为查询 bug 的解决方案而打开的一个个 Tab 页。等她科研任务做完之后，又想启动开发进程，所以她打开了 chomre 的历史记录，一个个点开之前打开的资料,继续她的开发…..<br /> 不知道这样的故事是不是在需要同时兼顾课业和兴趣的你身上也常有发生。你需要在多个进程之间切换，要查询不同领域的资料，同时又不想标签页太过杂乱，并且希望能够在切换进程之后能够快速恢复之前的工作区。<br /> 如果你有这样的需求，那么 workspace 值得你拥有。当您发现自己有太多的标签页时，单击 workspace 图标，将所有标签页转换成一个列表，并且把列表放入你指定的分类中，当您需要再次访问这些标签页时，可以单独或全部恢复它们，当您的标签页位于 workspace 列表时，您将节省高达 95％的内存，因为你将减少 Google Chrome 浏览器中打开的标签页的数量。
<a name="GiaLs"></a>

## 模块介绍

<a name="vpRIL"></a>

### 用户故事

- 如果用户未登录/注册，则点击插件会显示登录/注册按钮，让用户跳转到 workspace 的 web 主页上面进行登录/注册
- 用户已经登录，则可以使用 workspace 插件，当点击 workspace 插件图标的时候，会弹出窗口，让用户选择即将关闭的标签页的所在集合，当用户选择完毕后并且点击确认后，会关闭掉当前窗口内的所有标签页。
- 随后，用户可以在 workspace 的 web 页中，找到分类列表，点击对应分类之后，可以找到之前关闭的标签页集合，点击标签页会打开新的窗口
- 用户可以删除集合、移动标签页集合到其他的分类中
- 用户可以删除标签页集合中的标签
- 每个分类中都有一个【默认标签页】集合，用于存放用户在这个标签页下的自定义标签合集
  - 用户可以从其他标签页集合中，拖拽标签到这个集合下
    <a name="ArNyj"></a>

### 功能模块划分

![截屏2022-02-11 下午5.49.00.png](https://gitee.com/wei_wen_yue/test-bench/raw/workspace/%E6%88%AA%E5%B1%8F2022-02-11%20%E4%B8%8B%E5%8D%889.15.20.png)

<a name="V0ubZ"></a>

## 截图

<a name="RW6mj"></a>

### 登录/注册页

- 此时保持 web 端和插件端用户状态一致

![截屏2022-02-11 下午5.50.19.png](https://gitee.com/wei_wen_yue/test-bench/raw/workspace/login.png)
<a name="BgV81"></a>

### 主页![截屏2022-02-11 下午5.50.48.png](https://gitee.com/wei_wen_yue/test-bench/raw/workspace/%E6%88%AA%E5%B1%8F2022-02-11%20%E4%B8%8B%E5%8D%885.50.48.png)

![截屏2022-02-11 下午5.51.00.png](https://gitee.com/wei_wen_yue/test-bench/raw/workspace/%E6%88%AA%E5%B1%8F2022-02-11%20%E4%B8%8B%E5%8D%885.51.00.png)<br />![截屏2022-02-11 下午5.51.25.png](https://gitee.com/wei_wen_yue/test-bench/raw/workspace/%E6%88%AA%E5%B1%8F2022-02-11%20%E4%B8%8B%E5%8D%885.51.25.png)
<a name="bVlx3"></a>

### workspace 细节页面

![image.png](https://gitee.com/wei_wen_yue/test-bench/raw/workspace/%E6%88%AA%E5%B1%8F2022-02-11%20%E4%B8%8B%E5%8D%885.48.25.png)<br />![截屏2022-02-11 下午5.48.44.png](https://gitee.com/wei_wen_yue/test-bench/raw/workspace/%E6%88%AA%E5%B1%8F2022-02-11%20%E4%B8%8B%E5%8D%885.48.44.png)<br />![截屏2022-02-11 下午5.52.07.png](https://gitee.com/wei_wen_yue/test-bench/raw/workspace/%E6%88%AA%E5%B1%8F2022-02-11%20%E4%B8%8B%E5%8D%885.52.07.png)
<a name="Vfl1i"></a>

### 链接

- Chrome 插件：https://gitee.com/wei_wen_yue/workspace-chorme-extension
- 前端：https://gitee.com/wei_wen_yue/workspace-chorme-extension-web-page
- 后端：https://gitee.com/wei_wen_yue/workspace-chorme-extension-api
- 后端接口文档&基本思路：https://vq7s46ofuj.feishu.cn/docs/doccnlm4UofHwAsMAxvL9N8hwFb?from=from_copylink

<a name="Rk5Ea"></a>

### 使用方式

1.先下载<br />
方式 1:
链接: [https://pan.baidu.com/s/1Z74iAugWKu41bNacfDUllQ](https://pan.baidu.com/s/1Z74iAugWKu41bNacfDUllQ) 密码: u6lv<br />
方式 2:
https://gitee.com/wei_wen_yue/workspace-chorme-extension/tree/for-debug/
下载这个链接中的 build 压缩包文件 <br /> 2.然后![image.png](https://gitee.com/wei_wen_yue/test-bench/raw/workspace/image.png)<br />3.开始使用～<br />​<br />
<a name="rrlN8"></a>

## 开发过程

<a name="zswnS"></a>

### 所使用的技术

- React
- React-router
- React-redux
- 谷歌 chrome extension api
  <a name="uNQm2"></a>

### 我学会了什么

- 谷歌插件开发的基本 api 的使用
- react usestate 的坑
- 使用 nest.js 提供 api
- 部署 nest.js 的后端程序
  <a name="p8ZaQ"></a>

### 后续的开发

- [ ] 前端加密用户提交的密码
- [ ] 增加删除标签页的功能
- [ ] 解决如果用户先访问 web 端该如何保持 web 端和插件端的用户状态
- [ ] 上架到 chrome extension 商店
      <a name="btkQS"></a>

### 有用的资源

[react 使用 hook——useState 的坑](https://segmentfault.com/a/1190000040013137)<br />[react useState 异步回调取不到最新值？见代码](https://segmentfault.com/q/1010000021998386)<br />[https://cloud.tencent.com/developer/article/1784240](https://cloud.tencent.com/developer/article/1784240)<br />[https://dev.to/tuanlc/mongoerror-e11000-duplicate-key-error-collection-587l](https://dev.to/tuanlc/mongoerror-e11000-duplicate-key-error-collection-587l)<br />插件学习：[https://developer.chrome.com/docs/extensions/mv3/overview/](https://developer.chrome.com/docs/extensions/mv3/overview/)<br />插件学习：[https://www.zhihu.com/question/20179805/answer/48191009](https://www.zhihu.com/question/20179805/answer/48191009)<br />chrome-extension-react 脚手架[https://www.npmjs.com/package/cra-template-complex-browserext](https://www.npmjs.com/package/cra-template-complex-browserext)