feat: Custom route support in extensions

colin969 · colin969 · commit 66d9b206d52a · 2025-11-08T15:52:46.000Z
diff --git a/docs/extensions/overview.md b/docs/extensions/overview.md
@@ -291,3 +291,9 @@ However, Applications can also provide `url` or `command` instead. The full deta
 - **type** - Type of this configuration prop's value (string, boolean or object)
 - **enum** - *(Optional)* - Array of enums to use when you want a Select config box instead of an Input config box.
 - **default** - Default value of this configuration prop
+
+# Frontend Extensions
+
+Recommend installing `@reduxjs/toolkit` for type support of dispatch actions and the selector
+
+TODO
diff --git a/src/renderer/components/ActivityRoutes.tsx b/src/renderer/components/ActivityRoutes.tsx
@@ -1,18 +1,21 @@
 import { Paths } from '@shared/Paths';
+import { CustomRoute } from 'flashpoint-launcher-renderer';
 import { Activity, ReactNode } from 'react';
 import { useLocation } from 'react-router-dom';
+import { DynamicComponent } from './DynamicComponent';
 import { CuratePage } from './pages/CuratePage';
+import { FpfssPage } from './pages/FpfssPage';
 import { HomePage } from './pages/HomePage';
 import { IFramePage } from './pages/IFramePage';
 import { LogsPage } from './pages/LogsPage';
 import { TagsPage } from './pages/TagsPage';
-import { FpfssPage } from './pages/FpfssPage';
 
 export type ActivityRoutesProps = {
   manualUrl: string;
+  customRoutes: CustomRoute[];
 }
 
-export function ActivityRoutes({ manualUrl }: ActivityRoutesProps) {
+export function ActivityRoutes({ manualUrl, customRoutes }: ActivityRoutesProps) {
   return (
     <>
       <ActivityRoute path={Paths.HOME} exact>
@@ -33,6 +36,11 @@ export function ActivityRoutes({ manualUrl }: ActivityRoutesProps) {
       <ActivityRoute path={Paths.FPFSS}>
         <FpfssPage/>
       </ActivityRoute>
+      { customRoutes.filter(r => r.keepLoaded).map(route =>
+        <ActivityRoute key={route.path} path={route.path}>
+          <DynamicComponent name={route.component} props={{}}/>
+        </ActivityRoute>
+      )}
     </>
   );
 }
diff --git a/src/renderer/components/Header.tsx b/src/renderer/components/Header.tsx
@@ -13,10 +13,11 @@ import { RootState } from '@renderer/store/store';
 import { getLibraryItemTitle } from '@shared/library/util';
 import { Paths } from '@shared/Paths';
 import { DialogFieldProps, DialogState, DialogStateTemplate } from 'flashpoint-launcher';
-import { MenuItemType } from 'flashpoint-launcher-renderer';
+import { CustomHeaderItemProps, MenuItemType } from 'flashpoint-launcher-renderer';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { joinLibraryRoute, openUrlInWindow } from '../Util';
+import { DynamicComponent } from './DynamicComponent';
 import { OpenIcon } from './OpenIcon';
 
 const viewDragType = 'text/plain';
@@ -47,6 +48,7 @@ export function Header() {
   const fpfssUser = useAppSelector(state => state.fpfss.user);
   const fpfssEditsOpen = useAppSelector(state => Object.keys(state.search.views).filter(k => k.startsWith('!fpfss-')).length > 0);
   const playlists = useAppSelector(state => state.main.playlists);
+  const customRoutes = useAppSelector(state => state.main.displaySettings.customRoutes);
   const { openMenu } = useContextMenu();
   const viewName = useViewName();
   const allStrings = useLocalization();
@@ -426,6 +428,22 @@ export function Header() {
               title={'FPFSS'}
               link={Paths.FPFSS} />
           )}
+          { customRoutes.filter(r => r.headerItem !== undefined).map(route => {
+            if (route.headerItem && route.headerItem.component !== undefined) {
+              const routeProps: CustomHeaderItemProps = {
+                id: route.headerItem.id,
+                title: route.headerItem.title,
+                link: route.path
+              };
+              return <DynamicComponent name={route.headerItem.component} props={routeProps} />;
+            } else {
+              return <HeaderMenuItem
+                key={route.path}
+                id={'header__' + route.headerItem!.id}
+                link={route.path}
+                title={route.headerItem!.title}/>;
+            }
+          })}
         </ul>
       </div>
       {/* Right-most portion */}
diff --git a/src/renderer/components/app.tsx b/src/renderer/components/app.tsx
@@ -9,12 +9,13 @@ import { setDownloaderState, updateDownloaderStatus, updateDownloaderTask, updat
 import { setFpfssUser } from '@renderer/store/fpfss/slice';
 import { pushHistory } from '@renderer/store/history/slice';
 import { addLogEntries, setEntries } from '@renderer/store/logs/slice';
-import { addLoaded, cancelDialog, changeService, createDialog, openDynamicPage, removeService, setDisplaySettingsFromCallback, setExtOrderablesFromCallback, setMainState, setUpdateInfo, updateDialog, updateDialogField, updateMetadataSource } from '@renderer/store/main/slice';
+import { addLoaded, cancelDialog, changeService, createDialog, dsAddCustomRoute, openDynamicPage, removeService, setDisplaySettingsFromCallback, setExtOrderablesFromCallback, setMainState, setUpdateInfo, updateDialog, updateDialogField, updateMetadataSource } from '@renderer/store/main/slice';
 import { setPreferences, updatePreferences } from '@renderer/store/preferences/slice';
 import { addData, createViews, GENERAL_VIEW_ID, resetDropdownData } from '@renderer/store/search/slice';
 import store, { AppDispatch, RootState } from '@renderer/store/store';
 import { setTagCategories } from '@renderer/store/tagCategories/slice';
 import { addTask, setTask, setTaskBarOpen } from '@renderer/store/tasks/slice';
+import { idToGame } from '@renderer/util/async';
 import * as extUtils from '@renderer/util/ext';
 import { BackIn, BackInit, BackOut, FpfssUser } from '@shared/back/types';
 import { APP_TITLE } from '@shared/constants';
@@ -34,6 +35,7 @@ import { LangContext } from '../util/lang';
 import { ActivityRoutes } from './ActivityRoutes';
 import { Dialog } from './Dialog';
 import { GameComponentDropdownSelectField, GameComponentInputField } from './DisplayComponent';
+import { DynamicComponent } from './DynamicComponent';
 import { DynamicComponentProvider, RemoteModule } from './DynamicComponentProvider';
 import { DynamicThemeProvider } from './DynamicThemeProvider';
 import { FloatingContainer } from './FloatingContainer';
@@ -134,6 +136,7 @@ export function App() {
   const manualUrl = useAppSelector(state => state.preferences.onlineManual || pathToFileUrl(path.join(window.Shared.config.fullFlashpointPath, state.preferences.offlineManual)));
   const dynamicThemeFileList = useAppSelector(selectDynamicThemes);
   const remoteModules = useAppSelector(selectRemoteModules);
+  const customRoutes = useAppSelector(state => state.main.displaySettings.customRoutes);
   const currentView = useView();
   const firstBrowsePageViewName = useAppSelector(state => Object.keys(state.search.views).find(v => v !== GENERAL_VIEW_ID));
   const showRightSidebar = currentView?.selectedGame !== undefined && browsePageShowRightSidebar && !hiddenRightSidebarPages.reduce((prev, cur) => prev || location.pathname.startsWith(cur), false);
@@ -219,12 +222,10 @@ export function App() {
       <DynamicThemeProvider fileList={dynamicThemeFileList} >
         <DynamicComponentProvider manifests={remoteModules}>
           <MenuProvider>
-
             <ToastContainer
               theme='dark'
               className='toast-container'
               progressClassName='toast-container-progress'
-              hideProgressBar={true}
               position='bottom-center'/>
             {!stopRender ? (
               <>
@@ -280,7 +281,8 @@ export function App() {
                         <>
                           { useActivityRoutes && (
                             <ActivityRoutes
-                              manualUrl={manualUrl} />
+                              manualUrl={manualUrl}
+                              customRoutes={customRoutes} />
                           )}
                           <Routes>
                             <Route
@@ -322,6 +324,12 @@ export function App() {
                             <Route
                               path={Paths.DYNAMIC}
                               element={<DynamicPage name={dynamicPage?.name || ''} props={dynamicPage?.props}/>}/>
+                            { customRoutes.map(route =>
+                              <Route
+                                key={route.path}
+                                path={route.path}
+                                element={useActivityRoutes ? <></> : <DynamicComponent name={route.component} props={{}}/>}/>
+                            )}
                             <Route element={<NotFoundPage/>}/>
                           </Routes>
                           <Activity mode={isBrowsePage ? 'visible' : 'hidden'}>
@@ -406,10 +414,14 @@ function initApp(dispatch: AppDispatch) {
   window.ext = {
     utils: {
       getPointer,
-      getFileServerURL: getFileServerURL,
+      getFileServerURL,
       getExtensionFileURL: (extId, filePath) => {
         return `${getFileServerURL()}/extdata/${extId}/${filePath}`;
       },
+      idToGame,
+      runCommand: (command, args) => {
+        return window.Shared.back.request(BackIn.RUN_COMMAND, command, args);
+      },
       search: {
         onWhitelistFactory: extUtils.onWhitelistFactory,
         onBlacklistFactory: extUtils.onBlacklistFactory,
@@ -427,12 +439,17 @@ function initApp(dispatch: AppDispatch) {
       RandomGames,
     },
     hooks: {
-      useNavigate: () => useNavigate(),
+      useNavigate,
       useAppDispatch,
       useAppSelector,
       useContextMenu,
       useLocalization,
     },
+    actions: {
+      main: {
+        dsAddCustomRoute,
+      }
+    }
   };
   window.setDisplaySettings = ((cb) => {
     dispatch(setDisplaySettingsFromCallback(cb));
diff --git a/src/renderer/store/main/slice.ts b/src/renderer/store/main/slice.ts
@@ -6,7 +6,7 @@ import { createLangContainer } from '@shared/lang';
 import { deepCopy, recursiveReplace } from '@shared/Util';
 import * as axiosImport from 'axios';
 import { AppExtConfigData, ComponentStatus, CreditsData, DialogFieldProps, DialogState, ExtensionContribution, Game, GameData, GameMetadataSource, GameOfTheDay, IExtensionDescription, ILogoSet, IService, ITheme, LangContainer, LangFile, MetaUpdateState, PlatformAppPathSuggestions, Playlist, PlaylistGame, ViewGame } from 'flashpoint-launcher';
-import { DisplaySettings, DynamicPageProps, ExtOrderable } from 'flashpoint-launcher-renderer';
+import { CustomRoute, DisplaySettings, DynamicPageProps, ExtOrderable } from 'flashpoint-launcher-renderer';
 
 export const RANDOM_GAME_ROW_COUNT = 6;
 
@@ -191,7 +191,8 @@ const DEFAULT_DISPLAYS: DisplaySettings = {
     'homePage_extras'
   ],
   searchComponents: [],
-  browseDisplays: {}
+  browseDisplays: {},
+  customRoutes: [],
 };
 
 const initialState: MainState = {
@@ -419,6 +420,12 @@ const mainSlice = createSlice({
         state.services.splice(serviceIdx, 1);
       }
     },
+    dsAddCustomRoute(state: MainState, { payload }: PayloadAction<CustomRoute>) {
+      const existingIdx = state.displaySettings.customRoutes.findIndex(r => r.path === payload.path);
+      if (existingIdx === -1) {
+        state.displaySettings.customRoutes.push(payload);
+      }
+    },
     setDisplaySettingsFromCallback(state: MainState, { payload }: PayloadAction<DisplaySettingsCallback>) {
       try {
         state.displaySettings = payload(state.displaySettings);
@@ -478,6 +485,7 @@ export const { setMainState,
   openDynamicPage,
   changeService,
   removeService,
+  dsAddCustomRoute,
   setDisplaySettingsFromCallback,
   setExtOrderablesFromCallback,
   setUpdateInfo,
diff --git a/typings/flashpoint-launcher.d.ts b/typings/flashpoint-launcher.d.ts
@@ -21,8 +21,8 @@
 // tslint:disable:no-declare-current-package
 
 declare module 'flashpoint-launcher' {
-  import { Readable } from 'stream';
   import { FlashpointArchive, GameSearch } from '@fparchive/flashpoint-archive';
+  import { Readable } from 'stream';
 
   /** Version of the Flashpoint Launcher */
   const version: string;
@@ -2864,14 +2864,36 @@ declare module 'flashpoint-launcher' {
 }
 
 declare module 'flashpoint-launcher-renderer' {
-  import { AppPreferencesData, GameOrderBy, GameOrderReverse, Game, Tag, ViewGame,
-    ExtOrder, PlaylistGame, AdvancedFilter, ResultsView, CurationState, CurateGroup,
-    GameOfTheDay, GameData, Playlist, DialogState, ComponentStatus, MetaUpdateState,
-    IService, AppExtConfigData, LangContainer, LangFile, CreditsData, ITheme,
-    ILogoSet, PlatformAppPathSuggestions, IExtensionDescription,
-    ExtensionContribution } from 'flashpoint-launcher';
-  import { TypedUseSelectorHook } from 'react-redux';
+  import { ActionCreatorWithPayload } from '@reduxjs/toolkit';
   import { CancelToken } from 'axios';
+  import {
+    AdvancedFilter,
+    AppExtConfigData,
+    AppPreferencesData,
+    ComponentStatus,
+    CreditsData,
+    CurateGroup,
+    CurationState,
+    DialogState,
+    ExtensionContribution,
+    ExtOrder,
+    Game,
+    GameData,
+    GameOfTheDay,
+    GameOrderBy, GameOrderReverse,
+    IExtensionDescription,
+    ILogoSet,
+    IService,
+    ITheme,
+    LangContainer, LangFile,
+    MetaUpdateState,
+    PlatformAppPathSuggestions,
+    Playlist,
+    PlaylistGame,
+    ResultsView,
+    Tag, ViewGame
+  } from 'flashpoint-launcher';
+  import { TypedUseSelectorHook } from 'react-redux';
 
   /** Game properties that will have suggestions gathered and displayed. */
   type SuggestionProps = (
@@ -2995,6 +3017,23 @@ declare module 'flashpoint-launcher-renderer' {
 
   type GameListColumnInfo = GameListColumnInfoIcon | GameListColumnInfoNormal
 
+  type CustomHeaderItemProps = {
+    id?: string;
+    title: string;
+    link: string;
+  }
+
+  type CustomRoute = {
+    headerItem?: {
+      id: string;
+      title: string;
+      component?: string,
+    };
+    path: string;
+    keepLoaded?: boolean;
+    component: string;
+  }
+
   type DisplaySettings = {
     gameSidebar: {
       middle: string[],
@@ -3009,6 +3048,7 @@ declare module 'flashpoint-launcher-renderer' {
     browseDisplays: {
       [k: string]: any
     },
+    customRoutes: CustomRoute[],
   }
 
   type SearchableSelectItem = {
@@ -3290,11 +3330,18 @@ declare module 'flashpoint-launcher-renderer' {
     rollRandomGames: () => void;
   };
 
+  type RunCommandResponse = {
+    success: boolean;
+    res: any;
+  }
+
   interface IExtensionWindow {
     utils: {
       getExtensionFileURL: (extId: string, filePath: string) => string;
       getFileServerURL: () => string;
       getPointer: (event: React.MouseEvent<any>) => Pointer;
+      idToGame: (gameId: string) => Promise<Game | null>;
+      runCommand: (command: string, args?: any[]) => Promise<RunCommandResponse>;
       search: {
         onWhitelistFactory: (extId: string, key: string, filter: AdvancedFilter, setAdvancedFilter: (advFilter: AdvancedFilter) => void) => (value: string) => void,
         onBlacklistFactory: (extId: string, key: string, filter: AdvancedFilter, setAdvancedFilter: (advFilter: AdvancedFilter) => void) => (value: string) => void,
@@ -3318,6 +3365,11 @@ declare module 'flashpoint-launcher-renderer' {
       useContextMenu: () => MenuContextStateProps,
       useLocalization:() => LangContainer,
     },
+    actions: {
+      main: {
+        dsAddCustomRoute: ActionCreatorWithPayload<CustomRoute>
+      }
+    }
   }
 
   declare global {
