feat: add comprehensive development documentation

- Create new MDX files for account information retrieval, background logic, build scripts, file structure, and content scraping
- Update index and meta.json to include new documentation sections
- Revise user guide to remove outdated content and improve clarity

Author: cunoe

content/docs/development/account.mdx

@@ -0,0 +1,92 @@
+---
+title: 账号信息获取原理
+---
+
+为了能让用户得知他们在发布内容时使用的平台账号信息，我们设计获取了平台账号信息，并将平台信息存储到 `localStorage` 中。
+
+具体实现在 `src/sync/account.ts` 文件以及 `src/sync/account` 文件夹中。
+
+首先我们为 `PlatformInfo` 类型添加了 `accountKey` 和 `accountInfo` 字段，用于在前端请求平台数据时附加平台账号信息。
+
+然后我们需要获取这些平台账号信息，并将其存储到 `localStorage` 中。
+
+```ts
+/**
+ * 获取指定平台账号的最新信息
+ * @param accountKey 账号标识符
+ * @returns 返回账号信息
+ */
+export async function refreshAccountInfo(accountKey: string): Promise<AccountInfo> {
+  // 获取平台信息
+  const platformInfos = getPlatformInfos();
+  // 获取指定平台账号信息
+  const platformInfo = platformInfos.find((p) => p.accountKey === accountKey);
+  // 如果找不到指定平台账号信息，则抛出错误
+  if (!platformInfo) {
+    throw new Error(`找不到账号信息: ${accountKey}`);
+  }
+
+  let accountInfo: AccountInfo;
+
+  // 根据平台类型获取账号信息，具体的函数实现在 `src/sync/account` 文件夹中
+  if (accountKey === 'x') {
+    accountInfo = await getXAccountInfo();
+  } else if (accountKey === 'tiktok') {
+    accountInfo = await getTiktokAccountInfo();
+  } else if (accountKey === 'douyin') {
+    accountInfo = await getDouyinAccountInfo();
+  } else if (accountKey === 'rednote') {
+    accountInfo = await getRednoteAccountInfo();
+  } else if (accountKey === 'bilibili') {
+    accountInfo = await getBilibiliAccountInfo();
+  } else {
+    return null;
+  }
+
+  if (!accountInfo) {
+    console.error(`获取账号信息失败: ${accountKey}`);
+    removeAccountInfo(accountKey);
+    return null;
+  }
+
+  // 更新平台信息并保存到storage
+  await saveAccountInfo(accountKey, accountInfo);
+
+  return accountInfo;
+}
+
+/**
+ * 刷新所有平台的账号信息
+ * @returns 所有账号信息的映射表
+ */
+
+// 该函数在 `src/options/index.tsx` 文件中被调用，即在用户打开选项页时，会调用该函数来获取平台账号信息
+export async function refreshAllAccountInfo(): Promise<Record<string, AccountInfo>> {
+  // 获取所有平台信息
+  const platformInfos = getPlatformInfos();
+  const results: Record<string, AccountInfo> = {};
+  const errors: Record<string, Error> = {};
+
+  // 并行刷新所有账号信息
+  await Promise.allSettled(
+    platformInfos.map(async (platformInfo) => {
+      try {
+        if (platformInfo.accountKey) {
+          const accountInfo = await refreshAccountInfo(platformInfo.accountKey);
+          results[platformInfo.accountKey] = accountInfo;
+        }
+      } catch (error) {
+        console.error(`刷新账号信息失败: ${platformInfo.accountKey}`, error);
+        errors[platformInfo.accountKey] = error as Error;
+      }
+    }),
+  );
+
+  // 如果所有请求都失败了，抛出错误
+  if (Object.keys(results).length === 0 && Object.keys(errors).length > 0) {
+    throw new Error('所有账号信息刷新失败');
+  }
+
+  return results;
+}
+```

content/docs/development/background.mdx

@@ -0,0 +1,39 @@
+---
+title: 后台
+---
+
+在 `src/background/index.ts` 文件中，我们定义了 `background` 的逻辑，例如标签页管理、消息处理等。
+
+监听消息，通过 `defaultMessageHandler` 函数来处理消息，通过 `tabsManagerMessageHandler` 函数来处理标签页管理消息，通过 `trustDomainMessageHandler` 函数来处理信任域消息。
+
+浏览器扩展通过 `chrome.runtime.onMessage` 来监听消息，可以接受来自 `content script` 的消息，也可以接受来自 `options` 页面的消息。
+
+同时我们监听了标签页的更新和删除事件，用于标签页管理，当用户使用浏览器的标签页管理功能时，会触发这些事件，将更新的信息传递到我们来处理，例如重新加载、关闭、刷新等。以同步标签页在 `Sidepanel` 中的状态。
+
+```ts
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  defaultMessageHandler(request, sender, sendResponse);
+  tabsManagerMessageHandler(request, sender, sendResponse);
+  trustDomainMessageHandler(request, sender, sendResponse);
+  return true;
+});
+
+// 监听标签页更新
+chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+  tabsManagerHandleTabUpdated(tabId, changeInfo, tab);
+});
+
+// 监听标签页删除
+chrome.tabs.onRemoved.addListener((tabId) => {
+  tabsManagerHandleTabRemoved(tabId);
+});
+```
+
+保活机制是为了能够保持 Background 在浏览器后台持续运行，防止被浏览器杀死。
+
+```ts
+// Keep Alive || 保活机制 || START
+const quantumKeepAlive = new QuantumEntanglementKeepAlive();
+quantumKeepAlive.startEntanglementProcess();
+// Keep Alive || 保活机制 || END
+```

…nt/docs/user-guide/start-development.mdx content/docs/development/build-script.mdxcontent/docs/user-guide/start-development.mdx renamed to content/docs/development/build-script.mdx content/docs/user-guide/start-development.mdx renamed to content/docs/development/build-script.mdx

@@ -1,64 +1,10 @@
 ---
-title: 开始开发
+title: 构建发布脚本
 ---
 
-## 开始使用
+目前所有平台都采用页面操作的方式实现，主要包含以下几个关键部分：
 
-首先，运行开发服务器：
-
-```bash
-pnpm i
-
-pnpm dev
-```
-
-在浏览器扩展程序页面中打开开发者模式，点击 `加载已解压的扩展程序` 并找到 `build/chrome-mv3-dev` 进行加载。
-
-## 构建生产版本
-
-运行以下命令：
-
-```bash
-pnpm build
-```
-
-你可以在 `build` 文件夹下找到构建内容
-
-## 开发说明
-
-### 你需要了解的文档
-
-[Chrome Extension API Reference](https://developer.chrome.com/docs/extensions/reference/api)
-
-[Edge Extension](https://learn.microsoft.com/en-us/microsoft-edge/extensions-chromium/)
-
-[Plasmo Docs](https://docs.plasmo.com/)
-
-## 推荐文章
-
-- [AI全栈指南 Vol.033：5分钟学会内容一键发布多平台](https://mp.weixin.qq.com/s/K7yh6EsBLOGJzl8Gh8SwLw)
-
-### 文件架构
-
-> src/sync：该文件夹下存放了有关操作不同平台的代码，其中 dynamic 是动态发布相关的，video 是视频发布相关的；任何加入的平台都需要在 common.ts 中注册。
-> components：该文件下存放了所有前端界面操作的组件。
-
-### 开发文档
-
-需要注意的是，不同平台的开发在细节上存在不同，不过大体上遵循类似的实现模式。脱离不开 `查找元素 - 编辑元素 - 自动发布` 的实现模式。
-
-- [通用功能开发记录](development/common.md)
-- [抖音动态发布功能开发记录](development/douyin-dynamic.md)
-- [抖音账号信息获取](development/douyin-account.md)
-- [B站动态发布功能开发记录](development/bilibili-dynamic.md)
-
-## 功能开发指南
-
-### 动态发布功能
-
-动态发布是我们扩展的核心功能之一。目前所有平台都采用页面操作的方式实现，主要包含以下几个关键部分：
-
-#### 1. 基础架构
+## 基础架构
 
 每个平台的动态发布功能都需要实现以下接口：
 
@@ -68,11 +14,11 @@ export async function DynamicPlatform(data: SyncData) {
 }
 ```
 
-#### 2. 核心实现模式
+## 实现模式
 
 所有平台遵循类似的实现模式：
 
-1. 注册平台信息到 infos
+### 1. 注册平台信息到 infos
 
 每个平台需要注册到 `infos` 中，然后通过 `infos` 中的信息来进行初始化。
 
@@ -96,9 +42,9 @@ export async function DynamicPlatform(data: SyncData) {
 
 其中 accountKey 是获取账号信息的 key，用于获取账号信息，详情可以查看 `src/sync/account.ts` 和 `src/sync/account` 文件夹。
 
-2. 内容处理
+### 2. 内容处理
 
-2.1 标题
+#### 2.1 标题
 
 获取到输入框或其它输入区域，然后进行内容填充。可以考虑直接使用 `textContent` 或 `innerHTML` 进行填充，或者使用复制粘贴事件等方式进行。
 
@@ -107,7 +53,7 @@ const titleElement = await waitForElement('h1[class*="title"]');
 const title = titleElement.textContent;
 ```
 
-2.2 内容
+#### 2.2 内容
 
 获取到输入框或其它输入区域，然后进行内容填充。可以考虑直接使用 `textContent` 或 `innerHTML` 进行填充，或者使用复制粘贴事件等方式进行。
 
@@ -116,7 +62,7 @@ const contentElement = await waitForElement('div[class*="content"]');
 const content = contentElement.textContent;
 ```
 
-2.3 上传图片/视频等
+#### 2.3 上传图片/视频等
 
 找到文件输入Input后，使用 fetch 下载图片/视频等，然后使用 DataTransfer 模拟文件上传。
 
@@ -133,7 +79,7 @@ fileInput.files = dataTransfer.files;
 fileInput.dispatchEvent(new Event('change', { bubbles: true }));
 ```
 
-3. 自动发布（可选）
+#### 3. 自动发布（可选）
 
 ```typescript
 if (autoPublish) {
@@ -147,15 +93,10 @@ if (autoPublish) {
 }
 ```
 
-#### 3. 开发建议
+## 开发建议
 
 - 学习使用 `devtools`，使用审查元素来获取元素信息。
 - 学习各类 `event` 的使用，例如 `input`、`change`、`click` 等。
 - 学习 `浏览器 API` 的使用，例如 `fetch`、`DataTransfer`、`ClipboardEvent` 等。更多信息可以参考[MDN](https://developer.mozilla.org/zh-CN/docs/Web/API)
 - 在遇见问题的时候，可以先尝试使用 `console.log` 来输出信息，然后根据信息来判断问题所在。
 
-### 提出贡献
-
-我们非常欢迎你提出贡献，你可以通过 `pull request` 来提交你的代码。
-
-在提交之前，请先阅读[贡献指南](../CONTRIBUTING.md)。

content/docs/development/files.mdx

@@ -0,0 +1,39 @@
+---
+title: 文件结构
+---
+
+## Top Level
+
+| 文件夹 | 说明 |
+| --- | --- |
+| src | 存放了实际运行的代码 |
+| build | 存放了构建后的文件，包括 Dev 和 Prod 版本 |
+| docs | 存放了开发文档 |
+| assets | 存放了扩展的图标等资源 |
+| locales | 存放了多语言的翻译文件 |
+| .cursor| 存放了 Cursor 的规则文件 |
+
+## Src 文件夹
+
+| 文件夹 | 说明 |
+| --- | --- |
+| src/sync | 存放了有关操作不同平台的代码 |
+| src/options | 存放了 Options 页面，在这里组织和发布内容 |
+| src/components | 存放了所有前端界面操作的组件 |
+| src/contents | 存放了注入网页的内容脚本 |
+| src/background | 存放了后台脚本 |
+| src/popup | 存放了弹窗页面 |
+| src/sidepanel | 存放了侧边栏页面 |
+| src/utils | 存放了工具函数 |
+
+## Sync 文件夹
+
+| 文件夹 | 说明 |
+| --- | --- |
+| src/sync/dynamic | 存放了各平台动态发布的操作脚本 |
+| src/sync/video | 存放了各平台视频发布的操作脚本 |
+| src/sync/article | 存放了各平台文章发布的操作脚本 |
+| src/sync/account | 存放了获取各平台账号信息的脚本 |
+| src/sync/common.ts | 定义了通用的类型和函数 |
+| src/sync/account.ts | 定义了账号信息类型和通用方法 |
+| src/sync/extraconfig.ts | 定义了各平台额外配置的存储和读取 |

content/docs/development/index.mdx

@@ -0,0 +1,58 @@
+---
+title: 开始开发
+---
+
+## 开始使用
+
+首先，安装依赖：
+
+```bash
+pnpm i
+```
+
+之后，运行 Plasmo 开发服务器：
+
+```bash
+pnpm dev
+```
+
+在浏览器扩展程序页面中打开开发者模式，点击 `加载已解压的扩展程序` 并找到 `build/chrome-mv3-dev` 进行加载。
+
+## 构建生产版本
+
+运行以下命令：
+
+```bash
+pnpm build
+```
+
+你可以在 `build` 文件夹下找到构建内容
+
+## 开发说明
+
+### 你需要了解的文档
+
+[Chrome Extension API Reference](https://developer.chrome.com/docs/extensions/reference/api)
+
+[Edge Extension](https://learn.microsoft.com/en-us/microsoft-edge/extensions-chromium/)
+
+[Plasmo Docs](https://docs.plasmo.com/)
+
+## 推荐文章
+
+- [AI全栈指南 Vol.033：5分钟学会内容一键发布多平台](https://mp.weixin.qq.com/s/K7yh6EsBLOGJzl8Gh8SwLw)
+
+### 开发文档
+
+需要注意的是，不同平台的开发在细节上存在不同，不过大体上遵循类似的实现模式。脱离不开 `查找元素 - 编辑元素 - 自动发布` 的实现模式。你可以通过以下文档来了解不同平台的开发细节：
+
+- [构建发布脚本](/docs/development/build-script)
+- [抖音动态发布功能开发记录](/docs/development/douyin-dynamic)
+- [抖音账号信息获取](/docs/development/douyin-account)
+- [B站动态发布功能开发记录](/docs/development/bilibili-dynamic)
+
+### 提出贡献
+
+我们非常欢迎你提出贡献，你可以通过 `pull request` 来提交你的代码。
+
+在提交之前，请先阅读[贡献指南](../CONTRIBUTING.md)。

content/docs/development/meta.json

@@ -1,5 +1,20 @@
 {
   "title": "Development Documentation",
   "description": "Recording implementation details during development",
-  "root": true
+  "root": true,
+  "pages": [
+    "---Introduction---",
+    "index",
+    "files",
+    "build-script",
+    "types",
+    "---Development---",
+    "publish",
+    "account",
+    "scraper",
+    "background",
+    "tabs",
+    "---Reference---",
+    "..."
+  ]
 }