构建发布脚本

目前所有平台都采用页面操作的方式实现，主要包含以下几个关键部分：

基础架构

每个平台的动态发布功能都需要实现以下接口：

export async function DynamicPlatform(data: SyncData) {
  // 实现平台特定的发布逻辑
}

实现模式

所有平台遵循类似的实现模式：

1. 注册平台信息到 infos

每个平台需要注册到 infos 中，然后通过 infos 中的信息来进行初始化。

例如 Bilibili 动态发布的平台信息如下：

// src/sync/dynamic.ts
  DYNAMIC_BILIBILI: {
    type: 'DYNAMIC', // 平台类型
    name: 'DYNAMIC_BILIBILI', // 平台名称，一般以 DYNAMIC_、ARTICEL_ 或 VIDEO_ 开头
    homeUrl: 'https://t.bilibili.com', // 平台首页，建议设置为平台的登录页面
    faviconUrl: 'https://static.hdslb.com/images/favicon.ico', // 平台图标，在 F12 中的网页可以找到不同平台的 favicon 资源的来源
    iconifyIcon: 'ant-design:bilibili-outlined', // 平台图标（可选）
    platformName: chrome.i18n.getMessage('platformBilibili'), // 平台名称，在 locales 中进行 i18n 配置
    injectUrl: 'https://t.bilibili.com', // 平台发布页面，注入脚本时打开的页面
    injectFunction: DynamicBilibili, // 平台发布函数
    tags: ['CN'], // 平台标签，例如 ['CN'] 表示中文平台，['EN'] 表示英文平台
    accountKey: 'bilibili', // 平台账号标识，用于获取账号信息的 key
  },

其中 accountKey 是获取账号信息的 key，用于获取账号信息，详情可以查看 src/sync/account.ts 和 src/sync/account 文件夹。

2. 内容处理

2.1 标题

获取到输入框或其它输入区域，然后进行内容填充。可以考虑直接使用 textContent 或 innerHTML 进行填充，或者使用复制粘贴事件等方式进行。

const titleElement = await waitForElement('h1[class*="title"]');
const title = titleElement.textContent;

2.2 内容

获取到输入框或其它输入区域，然后进行内容填充。可以考虑直接使用 textContent 或 innerHTML 进行填充，或者使用复制粘贴事件等方式进行。

const contentElement = await waitForElement('div[class*="content"]');
const content = contentElement.textContent;

2.3 上传图片/视频等

找到文件输入Input后，使用 fetch 下载图片/视频等，然后使用 DataTransfer 模拟文件上传。

const response = await fetch(imageUrl);
const blob = await response.blob();
const imageFile = new File([blob], file.name, { type: file.type });
 
const dataTransfer = new DataTransfer();
dataTransfer.items.add(imageFile);
const imageData = dataTransfer.files[0];
 
fileInput.files = dataTransfer.files;
fileInput.dispatchEvent(new Event('change', { bubbles: true }));

3. 自动发布（可选）

if (autoPublish) {
  const publishButton = await waitForElement('button[type="submit"]');
  publishButton.click();
} else {
  // 监听手动发布
  publishButton.addEventListener('click', () => {
    setTimeout(() => window.location.reload(), 3000);
  });
}

开发建议

学习使用 devtools，使用审查元素来获取元素信息。
学习各类 event 的使用，例如 input、change、click 等。
学习 浏览器 API 的使用，例如 fetch、DataTransfer、ClipboardEvent 等。更多信息可以参考MDN
在遇见问题的时候，可以先尝试使用 console.log 来输出信息，然后根据信息来判断问题所在。

构建发布脚本

On this page