标签页管理
标签页管理,在 src/background/services/tabs.ts
文件中。
标签页管理主要是为了在标签页创建后允许用户通过 Sidepanel 来管理标签页,例如重新加载、关闭、刷新等。
import { injectScriptsToTabs, type SyncData } from '~sync/common';
import { getDefaultPlatformInfo } from '~sync/common';
// 定义了标签页管理使用的类型
export interface TabManagerMessage {
// 发布信息
syncData: SyncData;
// 标签页信息
tabs: {
tab: chrome.tabs.Tab;
platform: string;
}[];
}
// 标签页管理消息数组
const tabsManagerMessages: TabManagerMessage[] = [];
// 处理标签页更新
const handleTabUpdated = (tabId: number, changeInfo: chrome.tabs.TabChangeInfo, tab: chrome.tabs.Tab) => {
tabsManagerMessages.forEach((group, index) => {
const updatedTabs = group.tabs.map((item) => (item.tab.id === tabId ? { ...item, tab } : item));
tabsManagerMessages[index] = { ...group, tabs: updatedTabs };
});
};
// 处理标签页删除
const handleTabRemoved = (tabId: number) => {
tabsManagerMessages.forEach((group, index) => {
const filteredTabs = group.tabs.filter((item) => item.tab.id !== tabId);
tabsManagerMessages[index] = { ...group, tabs: filteredTabs };
});
};
// 获取标签页管理消息
export const getTabsManagerMessages = () => {
return tabsManagerMessages;
};
// 添加标签页管理消息
export const addTabsManagerMessages = (data: TabManagerMessage) => {
tabsManagerMessages.push(data);
};
// 标签页更新处理
export const tabsManagerHandleTabUpdated = handleTabUpdated;
// 标签页删除处理
export const tabsManagerHandleTabRemoved = handleTabRemoved;
// 标签页管理消息处理
export const tabsManagerMessageHandler = (request, sender, sendResponse) => {
// 重新加载标签页
if (request.type === 'MUTLIPOST_EXTENSION_REQUEST_PUBLISH_RELOAD') {
const { tabId, tabGroup } = request.data;
const tabInfo = tabGroup.tabs.find((t) => t.tab.id === tabId);
// 如果标签页信息存在,则获取平台信息
if (tabInfo) {
const platformInfo = getDefaultPlatformInfo(tabInfo.platform);
// 如果平台信息存在,则更新标签页 URL 并注入脚本
if (platformInfo) {
chrome.tabs.update(tabId, { url: platformInfo.injectUrl, active: true }).then(() => {
injectScriptsToTabs([[tabInfo.tab, tabInfo.platform]], tabGroup.syncData);
});
} else {
console.error(`无法获取平台 ${tabInfo.platform} 的信息`);
sendResponse('error');
return;
}
} else {
console.error(`未找到标签页 ID ${tabId} 的信息`);
sendResponse('error');
return;
}
sendResponse('success');
}
// 获取标签页管理消息
if (request.type === 'MUTLIPOST_EXTENSION_TABS_MANAGER_REQUEST_TABS') {
sendResponse(getTabsManagerMessages());
}
// 添加标签页管理消息
if (request.type === 'MUTLIPOST_EXTENSION_TABS_MANAGER_REQUEST_ADD_TABS') {
const { data, tabs } = request;
addTabsManagerMessages({
syncData: data,
tabs: tabs.map((t: [chrome.tabs.Tab, string]) => ({
tab: t[0],
platform: t[1],
})),
});
sendResponse('success');
}
};
具体使用该功能的位置在 src/components/Sidepanel/Tabs/TabsManager.tsx
文件中。