store_ai_extension/step.md

项目结构

src:.
├─assets              # 静态资源目录
│      vite.svg       # 这里的资源通常用于图标、Logo 或扩展程序内部引用的图片
│
├─background          # 后台脚本 (Background Script / Service Worker)
│      index.ts       # 扩展的“大脑”，常驻后台运行，处理事件监听、报文转发、存储管理等
│
├─config              # 配置目录
│      platforms.ts   # 自定义配置，各种平台（如不同网站、不同浏览器）的适配配置
│
├─content             # 内容脚本 (Content Script)
│  │  App.vue         # 注入到网页中的 UI 组件（通常用于在目标页面侧边栏或浮窗显示界面）
│  │  main.ts         # 内容脚本的入口文件，负责将 Vue 组件挂载到宿主页面的 DOM 中
│  │
│  └─views            # 内容脚本相关的子视图或组件
│
├─options             # 选项页 (Options Page)
│      App.vue        # 扩展设置页面的 UI（右键扩展图标点击“选项”打开的页面）
│      index.html     # 选项页的 HTML 宿主文件
│      main.ts        # 选项页的 Vue 入口文件
│
├─popup               # 弹窗页 (Popup Page)
│      App.vue        # 点击扩展图标时显示的弹出框 UI
│      index.html     # 弹窗页的 HTML 宿主文件
│      main.ts        # 弹窗页的 Vue 入口文件
│
├─shared              # 共享代码库 (Shared)
│                     # 存放被 background、content、popup 等多个模块共同引用的工具函数、常量、API封装等
│
└─types               # 类型定义目录
        index.ts      # 存放全局的 TypeScript 接口（Interface）和类型（Type）定义

开发步骤

1.在popup模块中的App.vue中用tailwindcss编写，点击扩展图标时出现的弹窗，逻辑如下

• 在未登录情况下，即storage中token字段是否存在，如果不存在，弹窗内容只用显示扩展名字、描述、请登录按钮，底部扩展版本
• 当点击登录按钮后，先模拟登录，写死token，之后ui如下
  • 显示扩展名字、描述、一个平台选择框（通过读取config/platforms.ts)的内容for循环显示平台、扫描按钮、最底部Row（退出按钮，扩展版本号）
• 注意：token的存储和获取逻辑放到/shared/auth.ts中去，如果涉及到接口和枚举的定义，请判断是否是全局类型
  • 如果是，该类型写到一个新文件中，并放到types/下，如果不是，放到当前模块的types/目录下（如果没用，新建）

2.前提：当1完成后，点击popup的立即爬取已经可以打开一个新的窗口了

• 在所有网页（包括新打开的窗口和所有网页）的右下角都放一个圆形正计时（表示正在爬取中）
• 点击圆形正计时时，出现一个popup，内容如下
  • 以时间轴的形式，表示当前爬取进度，即：根据platforms.ts中的steps
• 同时点击扩展的popup里的内容，也变得和上面的时间轴内容一致，显示爬取进度，隐藏立即爬取等按钮，

3.前提：1和2都已完成，ui和交互操作上ok

• 开始爬取网页中的数据，查看message.js内容，吧里面的爬取方法都提取出来放到background/domScraper.ts中去，
• 基于2，每次根据steps打开一个新网页后，根据它的fields数组字段，调用domScraper中的方法，来提取数据，并打印到控制台即可