core: frontend: use url names for extensions

core/frontend/src/App.vue

@@ -1,5 +1,5 @@
 <template>
- <v-app :class="app_style">
+ <v-app v-if="!full_page_requested" :class="app_style">
  <v-card
  id="context-menu"
  ref="contextMenu"
@@ -309,6 +309,10 @@
  :callbacks="tourCallbacks"
  />
  </v-app>
+ <div v-else>
+ <services-scanner />
+ <router-view />
+ </div>
 </template>
 
 <script lang="ts">
@@ -416,6 +420,9 @@ export default Vue.extend({
  toolbar_height(): number {
  return settings.is_pirate_mode && this.backend_offline ? 66 : 56
  },
+ full_page_requested(): boolean {
+ return this.$router.currentRoute.query.full_page === 'true'
+ },
  computed_menu(): menuItem[] {
  const foundExtensions = services_scanner.services
  .filter((service: Service) : boolean => service.metadata !== null)
@@ -630,12 +637,11 @@ export default Vue.extend({
  }
  },
  createExtensionAddress(service: Service): string {
- if (service?.metadata?.new_page !== true) {
- return `/extensions/${service.port}`
+ let address = `/extension/${service?.metadata?.sanitized_name}`
+ if (service?.metadata?.new_page) {
+ address += '?full_page=true'
  }
-
- // The `//` force href to be used as absolute path and not as relative
- return `//${window.location.hostname}:${service.port}`
+ return address
  },
  setupCallbacks(): void {
  this.tourCallbacks = {

core/frontend/src/router/index.ts

@@ -116,6 +116,11 @@ const routes: Array<RouteConfig> = [
  name: 'Extensions',
  component: ExtensionView,
  },
+ {
+ path: '/extension/:name',
+ name: 'Named Extensions',
+ component: ExtensionView,
+ },
  {
  path: '/tools/extensions-manager',
  name: 'Extension Manager',

core/frontend/src/types/helper.ts

@@ -8,6 +8,7 @@ export interface ServiceMetadata {
  api: string
  route?: string
  new_page?: boolean
+ sanitized_name?: string
 }
 
 export interface Service {

core/frontend/src/views/ExtensionView.vue

@@ -1,23 +1,39 @@
 <template>
  <BrIframe
  :source="service_path"
+ :class="fullpage ? 'fullpage' : ''"
  />
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
 
 import BrIframe from '@/components/utils/BrIframe.vue'
+import services_scanner from '@/store/servicesScanner'
 
 export default Vue.extend({
  name: 'ExtensionView',
  components: {
  BrIframe,
  },
  computed: {
- service_path() {
- return `${window.location.protocol}//${window.location.hostname}:${this.$route.params.port}`
+ fullpage(): boolean {
+ return this.$route.query.full_page === 'true'
+ },
+ port(): number {
+ return services_scanner.services.filter(
+ (service) => service?.metadata?.sanitized_name === this.$route.params.name,
+ )[0]?.port ?? 80
+ },
+ service_path(): string {
+ return `${window.location.protocol}//${window.location.hostname}:${this.port}`
  },
  },
 })
 </script>
+
+<style>
+.fullpage {
+ position:absolute; left: 0; right: 0; bottom: 0; top: 0px;
+}
+</style>