构建发布脚本
目前所有平台都采用页面操作的方式实现,主要包含以下几个关键部分:
基础架构
每个平台的动态发布功能都需要实现以下接口:
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来输出信息,然后根据信息来判断问题所在。