MultiPost Docs
HomeBlog

Introduction

Start DevelopmentFile StructureBuild Publishing ScriptType Definitions

Development

Content Publishing PrincipleAccount Information Retrieval PrincipleBackgroundTab Management

Reference

Bilibili Dynamic Publishing Feature Development RecordDouyin Account Information Retrieval Development RecordDouyin Image-Text Dynamic Publishing Script Development Record
简体中文English

Tab Management

PreviousBackgroundNextBilibili Dynamic Publishing Feature Development Record

Tab management is located in the src/background/services/tabs.ts file.

Tab management is mainly to allow users to manage tabs through Sidepanel after tab creation, such as reload, close, refresh, etc.

import { injectScriptsToTabs, type SyncData } from '~sync/common';
import { getDefaultPlatformInfo } from '~sync/common';

// Define types used for tab management
export interface TabManagerMessage {
  // Publishing information
  syncData: SyncData;
  // Tab information
  tabs: {
    tab: chrome.tabs.Tab;
    platform: string;
  }[];
}

// Tab management message array
const tabsManagerMessages: TabManagerMessage[] = [];

// Handle tab updates
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 };
  });
};

// Handle tab removal
const handleTabRemoved = (tabId: number) => {
  tabsManagerMessages.forEach((group, index) => {
    const filteredTabs = group.tabs.filter((item) => item.tab.id !== tabId);
    tabsManagerMessages[index] = { ...group, tabs: filteredTabs };
  });
};

// Get tab management messages
export const getTabsManagerMessages = () => {
  return tabsManagerMessages;
};

// Add tab management messages
export const addTabsManagerMessages = (data: TabManagerMessage) => {
  tabsManagerMessages.push(data);
};

// Tab update handling
export const tabsManagerHandleTabUpdated = handleTabUpdated;
// Tab removal handling
export const tabsManagerHandleTabRemoved = handleTabRemoved;
// Tab management message handling
export const tabsManagerMessageHandler = (request, sender, sendResponse) => {
  // Reload tab
  if (request.type === 'MUTLIPOST_EXTENSION_REQUEST_PUBLISH_RELOAD') {
    const { tabId, tabGroup } = request.data;
    const tabInfo = tabGroup.tabs.find((t) => t.tab.id === tabId);

    // If tab information exists, get platform information
    if (tabInfo) {
      const platformInfo = getDefaultPlatformInfo(tabInfo.platform);

      // If platform information exists, update tab URL and inject script
      if (platformInfo) {
        chrome.tabs.update(tabId, { url: platformInfo.injectUrl, active: true }).then(() => {
          injectScriptsToTabs([[tabInfo.tab, tabInfo.platform]], tabGroup.syncData);
        });
      } else {
        console.error(`Unable to get information for platform ${tabInfo.platform}`);
        sendResponse('error');
        return;
      }
    } else {
      console.error(`Information for tab ID ${tabId} not found`);
      sendResponse('error');
      return;
    }
    sendResponse('success');
  }
  // Get tab management messages
  if (request.type === 'MUTLIPOST_EXTENSION_TABS_MANAGER_REQUEST_TABS') {
    sendResponse(getTabsManagerMessages());
  }
  // Add tab management messages
  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');
  }
};

The specific location where this functionality is used is in the src/components/Sidepanel/Tabs/TabsManager.tsx file.