PostBot - 内容同步助手

Appearance

PostBot 开发指南 ​

📦 项目概述 ​

PostBot 基于 Plasmo 框架开发的浏览器扩展项目，采用现代前端技术栈（Vue 3 + TypeScript）构建，支持声明式开发和实时热重载功能。

🛠️ 开发环境要求 ​

必备工具 ​

  • Node.js
  • 包管理器: pnpm（推荐）

可选工具 ​

  • Git 版本控制
  • Chrome 浏览器（最新版）

🔧 开发流程 ​

  1. 安装依赖
    bash
    pnpm i
  2. 启动开发服务器
    bash
    pnpm dev  # 支持实时重载与 HMR 热更新
  3. 加载扩展
    • 访问 chrome://extensions
    • 启用 开发者模式
    • 点击 加载已解压的扩展程序
    • 选择 build/chrome-mv3-dev 目录

🚀 构建与发布 ​

  • 生产版本构建：
    bash
    pnpm build
  • 生成发布包（ZIP 格式）：
    bash
    pnpm build -- --zip

🛠️ 开发指南 ​

后台脚本（Background Script） ​

  • 管理扩展生命周期（安装/更新/卸载）
  • 监听浏览器事件（标签页更新/历史记录变更等）
  • 禁止 DOM 操作（无法直接访问网页 DOM，需通过内容脚本代理操作）
  • 非持久化运行（Manifest V3 中默认按需唤醒，事件触发后自动休眠）
  • 通过 chrome.runtime.sendMessage 接收内容脚本/弹出窗口的消息
  • 使用 chrome.tabs.sendMessage 向特定标签页发送指令

内容脚本（Content Script） ​

  • 可直接访问页面 DOM，但无法调用大部分 Chrome API
  • 通过 chrome.runtime.sendMessage 与后台通信

弹出窗口（Popup） ​

  • 支持 Vue.js 组件开发，可调用完整 Chrome API
  • 使用 chrome.storage 进行数据存储

❓ 常见问题 ​

  • 热重载失效：尝试刷新扩展页面或重启开发服务器。
  • 类型错误：检查 tsconfig.json 配置并确认依赖安装完整。

🙌 贡献指南 ​

欢迎通过 Pull Request 贡献代码，需满足：

  • 代码风格与项目一致
  • 通过现有测试用例
  • 补充相关文档更新

贡献者指南